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

最新推荐文章于 2024-07-29 22:00:00 发布

自在飞花轻似梦paofu

最新推荐文章于 2024-07-29 22:00:00 发布

阅读量1.7w

点赞数 3

分类专栏：前端框架之VUE 文章标签： vuejs TcPlayer

原创珍贵，转载请声明出处。

本文链接：https://blog.csdn.net/weixin_42277214/article/details/90292095

版权

本文介绍了在 Vue.js 应用中如何使用 TcPlayer 实现视频自动播放和切换。首先，通过在 `created` 生命周期钩子中设置定时器实现视频的自动播放。接着，通过分析 `TcPlayer` 的参数找到相关配置来自动切换到下一个视频。此外，还提出了视频试看的解决方案，设置6秒试看时间，当达到试看时间时自动暂停播放。

摘要由CSDN通过智能技术生成

前提是已经知道如何使用腾讯的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浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的  自动播放
                &#