vue中使用TcPlayer,自动播放视频,以及下一个视频

前提是已经知道如何使用腾讯的TcPlayer。
腾讯云点播 超级播放器开发:https://cloud.tencent.com/document/product/266/14603

一、自动播放视频。

方案:在created中使用定时器(setTimeout())
例:

setTimeout(function(){
        $this.playBtn(0);
      },0);

二、自动切换下一个视频

方案:看new TcPlayer()返回的都有哪些参数,在这些参数里找需要的东西。

在script中全局定义: let i=0

	//列表数据放在了数组里,这是数组的长度
 let itemlength = this.dataInfo.items.length;

this.tenObj = new TcPlayer('videoBox', {
                "m3u8": this.tenData.vuValue, //请替换成实际可用的播放地址
                "width" :  this.clientW,//视频的显示宽度,请尽量使用视频分辨率宽度
                "height" :this.videoH,//视频的显示高度,请尽量使用视频分辨率高度
                "autoplay" : true,      //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的  自动播放
                "continuePlay":true,  //是否连续播放
                "coverpic" :{"style":"stretch", "src":this.dataInfo.courseAvatar},
                "listener" :function(msg) {
                  // 一个视频播放完的时候接着播放下一个,循环播放列表
                  //值得注意的是msg.type的属性有很多,可以自己打印看下
                  if (msg.type == "ended") {
                  //利用i循环播放
		           if (i > itemlength) {
		            } else {
		              // console.log("开始自动播放下一个")
		              i++;
		              $this.playBtn(i);
		            }
		          }
                }
            }
            );

三、视频试看

思路:试看时间设为6秒,播放视频时会返回一个当前时间(this.currentTime()),判断试看时间是否小于当前时间。当等于时,停止播放(this.pause())。this指向new的TcPlayer

 this.tenObj = new TcPlayer("videoBox", {
    m3u8: this.tenData.vuValue, //请替换成实际可用的播放地址
    width: this.clientW, //视频的显示宽度,请尽量使用视频分辨率宽度
    height: this.videoH, //视频的显示高度,请尽量使用视频分辨率高度
    autoplay: true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的  自动播放
    continuePlay: true, //是否连续播放
    coverpic: { style: "stretch", src: this.dataInfo.courseAvatar },
    listener: function(msg) {
    //获取播放时 当前时间
      let current = Number(this.currentTime()).toFixed(0);
	//timel为播放时长,比如只允许看前6秒
      if (timel == current || current > timel) {
        // console.log("就是这里")
        $this.$vux.toast.show({
          text: "继续观看,请先购买",
          type: "warn"
        });
	//调用的是函数内自带的方法,停止播放,就不会再播放了
        this.pause();
      }
    }
  });

你可能感兴趣的:(前端框架之VUE)