小程序仿抖音无限刷视频

小程序视频滑动组件

重要想法使用四个video无限循环，然后切换视频源，实现无限滑动。

video组件wxml

  <swiper class="video-swiper" circular="{
  {circular}}" easing-function="{
  {easingFunction}}" vertical current="{
  {current}}" duration="{
  {duration}}" next-margin="{
  {nextmargin}}" bindanimationfinish="animationfinish" >
    <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
    <swiper-item wx:for="{
  {curQueue}}" wx:key="*this">
      <video id="video_{
  {index}}" class="video_item"  loop="{
  {loop}}" style="height: 100%;width: 100%;" bind:tap="videoPlay" enable-progress-gesture="{
  {false}}" show-center-play-btn="{
  {false}}" controls="{
  {false}}" src="{
  {api+item.videoPath}}" data-id="{
  {item.videoId}}" data-index="{
  {index}}" bindplay="bindplay"  bindended="timeupdate" >
      </video>
      <!-- 暂停遮盖层 -->
      <view class="maskinglayer" bind:tap="videoPlay" data-index="{
  {index}}"  hidden="{
  {!item.videoPlay}}">
        <image src="/images/zt.png" mode=""/>
      </view>
    </swiper-item>
  </swiper>

video组件js

module.exports =
  /******/
  (function (modules) { // webpackBootstrap
    /******/ // The module cache
    /******/
    var installedModules = {};
    /******/
    /******/ // The require function
    /******/
    function __webpack_require__(moduleId) {
      /******/
      /******/ // Check if module is in cache
      /******/
      if (installedModules[moduleId]) {
        /******/
        return installedModules[moduleId].exports;
        /******/
      }
      /******/ // Create a new module (and put it into the cache)
      /******/
      var module = installedModules[moduleId] = {
        /******/
        i: moduleId,
        /******/
        l: false,
        /******/
        exports: {}
        /******/
      };
      /******/
      /******/ // Execute the module function
      /******/
      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
      /******/
      /******/ // Flag the module as loaded
      /******/
      module.l = true;
      /******/
      /******/ // Return the exports of the module
      /******/
      return module.exports;
      /******/
    }
    /******/
    /******/
    /******/ // expose the modules object (__webpack_modules__)
    /******/
    __webpack_require__.m = modules;
    /******/
    /******/ // expose the module cache
    /******/
    __webpack_require__.c = installedModules;
    /******/
    /******/ // define getter function f