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中使用TcPlayer，自动播放视频，以及下一个视频相关推荐

chorme vue中使用audio自动播放问题
我这里是将audio文件放在static文件夹中,vue页面中直接引用: <audio class="audio" src="./static/audio/alar ...
抖音为什么不出一个自动播放下一个视频的功能呢？
你也许看到过很多抖音如何自动播放下个的教程文章.不过点击进去都是告诉你不可能,做不到.抖音没有这个功能等等... 于是乎我就想了一下,抖音为什么不出这么一个功能呢? 考虑后觉得啊,可能抖音是要根据你对 ...
vue 中哪些操作自动触发更新视图
vue 中哪些操作自动触发更新视图 vue数组对象修改触发视图更新直接修改数组元素是无法触发视图更新的,如 this.array[0] = {name: 'meng',age: 22 } 修改arr ...
android短视频列表自动播放,小程序实现多视频连续播放
类似于微博视频播放的功能,简单写了一个小demo,测试可以正常执行.功能是当点击一个视频播放完成后,自动加载下一个视频,当所有视频全部加载完成后,视频播放停止. wxml: JS: const app ...
抖音助手，帮您自动切换下一个视频
我发现了一个抖音自动下一个播放视频的辅助软件,很方便,不用自己手动滑动到下一个视频去播放.而且遇到长视频也会自动等待视频播放完毕再切换下一个.确实方便啊. 尤其是开车手机放到那,不用看,想听听抖音的歌 ...
剪辑技巧，将视频放在另一个视频画面上同时播放
有时候,我们想要将视频放在同一个画面中,而且能同时播放的那种,不知道怎么操作,那么其实想要实现也不是很难,下面随小编一起来试试这个新的技巧. 需要哪些工具? 一台电脑视频素材怎么快速剪辑? 打开浏 ...
交互设计｜抖音为什么是上滑查看下一个视频
去年求职的时候,作为一个产品新人,每次体验产品更多的是关注产品的设计细节,总是会觉得xx功能体验特别好,xx界面设计非常合理,xx细节引导非常场景化,非常贴心.但对于产品如何和用户发生交互,交互如何让 ...
php把视频合成画中画,视频画面合并软件-怎么把多个视频合并到一个视频画面里面,制作多画面视频播放效果...
视频画面合并软件-怎么把多个视频合并到一个视频画面里面,制作多画面视频播放效果平时我们在网上经常可以看到很多视频同一个视频画面带有很多个不同的视频在同时播放,这是怎么做到的呢?这个也叫视频画中画,用 ...
视频合并软件怎么把多个视频合并为一个视频
视频合并软件怎么把多个视频合并为一个视频.经常操作视频编辑的小伙伴对视频合并是再熟悉不过的了,一般制作视频前的拍摄工作都是在多个场景中拍摄多个片段,通过后期剪辑将拍摄的多个视频片段合并到一起.而对于视 ...

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

一、自动播放视频。

二、自动切换下一个视频

三、视频试看

vue中使用TcPlayer，自动播放视频，以及下一个视频相关推荐

最新文章

热门文章