VUE 中使用 video 插件 vue-video-player 结合 IView 中的 Carousel 走马灯 实现视频轮播

VUE 中使用 video 插件 vue-video-player 结合 IView 中的 Carousel 走马灯 实现视频轮播，至于vue-video-player插件如何使用不在此进行说明，可查看上一篇文章。

功能要求：

1、走马灯不自动轮播，由用户手动触发轮播效果或视频播放完毕后触发轮播效果。

2、视频不能初始化后就直接播放，要根据当前轮播索引只播放当前可视轮播

3、手动触发轮播时从视频的开始位置重新播放。

实现代码如下

页面布局代码

            <div class="leftcss-Items">
              <Carousel v-model="VideoIndex" @on-change="VideoChange" height="400" arrow="always" :autoplay="false" :loop="false" >
                <CarouselItem v-for="(video,i) in VideoArry" :key="video.ID">
                  <video-player :ref="('videoPlayer'+i)" :options="PlayerArry[i]"
                    @ended="onPlayerEnded($event)" :playsinline="true" 
                    class="video-player vjs-custom-skin" ></video-player>
              </CarouselItem>
              </Carousel>
            </div>

其中特殊属性说明：走马灯组件Carousel 在对视频进行轮播时，autoplay属性是否自动轮播设置为false，loop属性在官网给出的解释为“是否开启循环”默认为false，这个属性暂时没有弄明白具体的意义，但是此处需要特别注意该参数的值一定要设置为false，否则第一轮所有视频轮播完成后视频将无法播放。

脚本代码

export default {
  data() {
    return {
      VideoArry:[],//轮播视频数据
      VideoIndex:0,//轮播索引
      PlayerArry:[],//视频轮播数据源参数集合
      playerOptions : {//video-player组件播放视频所需的参数，此参数作为模板用于复制
        controls: true, // 是否显示控制栏
        playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay : false, //如果true,浏览器准备好时开始回放。
        muted : true, // 默认情况下将会消除任何音频。
        loop : false, // 视频一结束就重新开始。
        preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language : 'zh-CN',
        aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources : [ 
          // { type : "",src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'} //url地址
        ],
        poster : "", //你的封面地址
        // width: document.documentElement.clientWidth,//视频画面宽度
        notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar : {
            timeDivider : true,//当前时间和持续时间的分隔符
            durationDisplay : true,//显示持续时间
            remainingTimeDisplay : false,//是否显示剩余时间功能
            fullscreenToggle : true  //全屏按钮
        },
        playtimes:0,//视频播放起点
      }
    }
  },
  created(){
    this.GetVideoData();
  },
  methods: {
    VideoChange(oldValue, value){//视频轮播索引改变时触发
      var _this = this;
      this.VideoArry.forEach(function(v,i){
        if(i==value){
          //指定播放器跳转至视频开始重新播放。
          _this.$refs["videoPlayer"+i][0].player.currentTime(0);
          _this.$refs["videoPlayer"+i][0].player.play();
        }else{
          _this.$refs["videoPlayer"+i][0].player.pause();
        }
      });
    },
    onPlayerEnded(obj){//播放完成后进行回调
      var oldValue= this.VideoIndex;
      this.VideoIndex = this.VideoIndex < (this.VideoArry.length-1) ? this.VideoIndex + 1 : 0;
      this.VideoChange(oldValue,this.VideoIndex);
    },
    GetVideoData(){//加载轮播图和视频
      var _this = this;
      post("/api/GetVideoData", {ProjectID:XXXX}).then((res) => {
        if (res.Code == 0) {
          //加载轮播视频以及每个视频对应的播放参数
          var videoArry = res.Datas;
          videoArry.forEach(function(v,i){
            var op = JSON.parse(JSON.stringify(_this.playerOptions));
            op.sources=[{ type : "video/mp4" ,src :_this.BASE_URL+ v.FilePath }];
            _this.PlayerArry.push(op);
          });
          _this.VideoArry = videoArry;
          setTimeout(function(){
            _this.$refs["videoPlayer"+_this.VideoIndex][0].player.play();
          },1000);
        }
      });
    },
  },
}
</script>

<style scoped>
 .leftcss{ 
    float:left; width: 24.95vw; height: 100%; z-index: 10; 
 }
</style>