集成快应用小程序 SDK

视频点播提供快应用滑动切换组件。您可以在使用快应用 Video 组件时，搭配滑动切换组件，在视频竖屏上下滑动的播放场景中，实现流畅顺滑的切换效果。

具体效果如下：

安装

通过包管理工具安装。

# npm
npm i veplayer-mp-swiper-quickapp

# yarn 
yarn add veplayer-mp-swiper-quickapp

引用

滑动切换组件包含以下两个部分：

• veplayer-swiper：基于快应用的 swiper 开发，可作为轮播视图的容器。

• veplayer-swiper-item：可作为播放器的容器，实现控制视频的加载与播放。

使用 <import> 引入 npm 包中的滑动切换组件：

<import name="veplayer-swiper" src="../../../node_modules/veplayer-mp-swiper-quickapp/src/swiper/index.ux"></import>
<import name="veplayer-swiper-item" src="../../../node_modules/veplayer-mp-swiper-quickapp/src/swiper-item/index.ux"></import>

使用组件

在 player/index.ux 文件（示例路径）中使用 veplayer-swiper 和 veplayer-swiper-item 组件，请注意以下参数设置：

• veplayer-swiper 的 index 属性以 props 传入，并在生命周期 onInit 中添加对 change 事件的监听，在其事件回调里更新 veplayer-swiper 的当前index，即下方示例代码中的swiperIndex。

• veplayer-swiper-item 的 get-video 属性是一个获取 Video 组件的回调函数，其入参是 Video 组件的 ID，返回值需要为 Video 组件实例。需要注意对函数的 this 进行绑定，以获取到正确的组件上下文。

• 为了实现用户第一次进入播放页面时以及选集后自动播放视频，建议将 Video 组件的 autoplay 属性设置为 autoplay="{{index === swiperIndex}}"。

示例代码如下：

<import name="veplayer-swiper" src="../../../node_modules/veplayer-mp-swiper-quickapp/src/swiper/index.ux"></import>
<import name="veplayer-swiper-item" src="../../../node_modules/veplayer-mp-swiper-quickapp/src/swiper-item/index.ux"></import> 

<template>
  <div class="swiper-container">
    <veplayer-swiper class="swiper" index="{{swiperIndex}}">
      <block for="{{(index, item) in list}}" tid="vid">
        <veplayer-swiper-item
          swiper-index="{{swiperIndex}}"
          index="{{index}}"
          video-id="{{item.vid}}"
          poster="{{item.poster}}"
          get-video="{{getVideo}}"
        >
          <video
            slot="video"
            class="swiper-video"
            id="{{item.vid}}"
            src="{{item.src}}"
            autoplay="{{index === swiperIndex}}"
          >
          </video>
        </veplayer-swiper-item>
      </block>
    </veplayer-swiper>
  </div>
</template>

<script>
  const videoList = [
    {
      vid: 'v0ddfag10001c***qibo3casl9ed0',
      poster: 'https://voddemo.volcvod.com/poster.image',
      src: 'https://voddemo-play.volcvod.com/1.mp4',
      des: '',
    },
    {
      vid: 'v0ddfag10001c***k6qibo3casl9ed0',
      poster: 'https://voddemo.volcvod.com/poster.image',
      src: 'https://voddemo-play.volcvod.com/2.mp4',
      des: '',
    },
    {
      vid: 'v0ddfag10001c***k6qibo3casl9ed0',
      poster: 'https://voddemo.volcvod.com/poster.image',
      src: 'https://voddemo-play.volcvod.com/3.mp4',
      des: '',
    },
    // ...
  ]


  export default {
    data() {
      return {
        swiperIndex: 0,
        list: videoList,
      }
    },

    onInit() {
      this.$on('change', this.onChange)
      this.getVideo = this.getVideo.bind(this);
    },

    onChange(e) {
      this.swiperIndex = e.detail.index;
    },

    getVideo (videoId) {
      return this.$element(videoId);
    }
  }

</script>

<style>
  .swiper {
    width: 100%;
    height: 100%;
    flex-direction: column;
    animation-timing-function: ease-out
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-video {
    width: 100%;
    height: 100%;
  }
</style>

自动播放下一集

您可以监听快应用 Video 组件的 finish 事件，在该事件的回调函数中，设置 veplayer-swiper 和 veplayer-swiper-item 这两个组件的 index 属性。这样一来，播放完当前集之后，程序就会自动播放下一集。

示例代码如下：

<video
   slot="video"
   class="swiper-video"
   id="{{item.vid}}"
   src="{{item.src}}"
   autoplay="{{index === swiperIndex}}"
   @finish="onFinish"
 >
 </video>

onFinish () {
  if (this.swiperIndex + 1 < this.list.length) {
    // 设置 swiper 的 index 属性，切换到下一集
    this.swiperIndex += 1;
  } else {
    prompt.showToast({
      message: '看完了！'
    })
  }
}

选择或者跳转剧集

如果您希望实现在剧集列表中通过点击剧集按钮来使播放器跳转至特定剧集，可设置 veplayer-swiper 的 index 属性。

示例代码如下：

selectVideo() {
  this.swiperIndex = this.target;
}

组件属性

veplayer-swiper 属性

veplayer-swiper 属性和样式详见快应用 swiper 组件的属性和样式说明。

veplayer-swiper-item 属性

veplayer-swiper-item 属性详见下表：

veplayer-swiper-item 组件插槽

veplayer-swiper-item组件提供两个具名插槽 slot：

• video 插槽：此插槽用于放置播放器。对于播放器类型没有限制，但请确保播放器的原生 video 属性必须绑定一个唯一 ID。这个 ID 需要传递给 veplayer-swiper-item 的 video-id 属性，用于控制视频的播放与暂停。

• placeholder 插槽：此插槽用于播放器未渲染时的占位。如果你没有设置此插槽，那么默认会使用封面图片地址 poster 作为占位图。