vue通过腾讯Web（H5）播放器，实现直播点播

最新推荐文章于 2025-06-24 16:59:55 发布

原创最新推荐文章于 2025-06-24 16:59:55 发布 · 置顶 · 2.7k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #es6 #node.js

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在项目中集成腾讯云TcPlayer播放器，包括直播和点播功能的实现。通过示例代码展示了直播路径的简单设置及点播的10分钟试看限制处理，同时提供了兼容IE的flv播放地址解决方案。

官档：https://cloud.tencent.com/document/product/454/7503

index.html 引入

<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>

不管直播点播，页面都是这个容器

<div id="tcplayer"></div>

1、直播

直播的展现挺简单的，把直播路径放进去就行了，但实现过程中，测试拉流推流挺麻烦的

tcpPlay() {
    var player = new TcPlayer('tcplayer', {
        "m3u8": this.anchor.pullUrl,   
        "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        //"poster": this.anchor.cover,
        "width": '1110',       //480视频的显示宽度，请尽量使用视频分辨率宽度
        "height": '800',       //320视频的显示高度，请尽量使用视频分辨率高度
        "wording": {
           2: "未直播",
           2032: "未直播",  //"请求视频失败，请检查网络",
           2048: "未直播"   // "请求m3u8文件失败，可能是网络错误或者跨域问题"
        }
    });
},

效果

2、点播

项目中，这里的视频，只能试看10分钟，需要做一个播放到10分钟的拦截处理，暂停播放、提醒开通VIP之类的

兼容IE ：“flv” 也加上地址

tcpPlay(){
    let that = this,breakTime = 60*10             
    var player =  new TcPlayer('tcpplay', {
        "m3u8":  this.currentItem.url,
        "flv": this.currentItem.url, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
        "autoplay" : false,          //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        //"poster" : "http:          //www.test.com/myimage.jpg",
        "width" :  '100%',           //480视频的显示宽度，请尽量使用视频分辨率宽度
        "height" : '560',            //320视频的显示高度，请尽量使用视频分辨率高度
        //"controls":"none",         //禁用拖拽
        "wording": {
           2:"",
           2032: "未直播",          //"请求视频失败，请检查网络",
           2048:"未直播"            //"请求m3u8文件失败，可能是网络错误或者跨域问题"
        },
        listener(msg){
          if(player.currentTime() > breakTime){     //播放，且超过10分钟，暂停且提示！                             
            player.pause()
            that.tipVisible = true
          }
       }
    })
}

效果这样