vue+腾讯云api实现直播/续播

项目背景

用户在移动H5端能观看客户直播端推送的直播视频，以及服务器上的点播视频（可重复观看的视频）。实现方案是借助腾讯云灵活的接口，快速与其自有 Web 应用集成，来实现视频播放功能（前端实现部分很简单），参考文档：https://cloud.tencent.com/document/product/881/30818

直播

1. 页面准备工作： 在vue项目根目录下的index.html中引入初始化脚本；

    <!-- 直播sdk -->
    <script src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js" charset="utf-8"></script>

2. 渲染播放器容器：在需要展示播放器的页面位置(template模版中)加入播放器容器，即放一个 div 并命名，例如 id_test_video，视频画面都会在容器里渲染。

<div id="id_test_video" style="width:100%; height:auto;"></div>

3. 对接视频播放： 从指定的 URL 地址拉取音视频流，并将视频画面呈现到添加的容器内（script中）。

		//模拟后端返回的视频数据data
		let data = {
			playUrl: 'http://wmy.kingpointshow.com/stwmy/ZB_590b77846c2f4a7d8631ee7b81ce3201.m3u8',
			imgUrl: "https://demo.kingpointshow.com/stwmy/upload/6d43d36b1dc74d87acc1855d06d1066e20211126100731.png"
		};
		this.player = new TcPlayer('id_test_video', {
            "m3u8": data.playUrl, //请替换成实际可用的播放地址
            "autoplay" : true,   //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            "poster" : data.imgUrl,
            "width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
            "height" : '305', //视频的显示高度，请尽量使用视频分辨率高度
        });

点播

1. 页面准备工作： 在vue项目根目录下的index.html中引入初始化脚本；

    <!-- 腾讯云 -->
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/tcplayer.min.css" rel="stylesheet"/>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.2.min.js 之前引入 hls.min.0.13.2m.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/libs/hls.min.0.13.2m.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.2/tcplayer.v4.2.2.min.js"></script>

2. 渲染播放器容器：在需要展示播放器的页面位置加入播放器容器（template模版中），即放一个 div 并命名，例如 videoView，视频画面都会在容器里渲染。

<div id="videoView" style="width:100%; height:auto;"></div>

3.对接视频播放： 获取点播视频需要用到后端返回的fileId，及appId；该项目由于有同路由跳转相关视频推荐的需求，因此我在每次进行视频初始化之前先都把旧元素清空，动态创建video标签放进视频容器中：

//模拟后端返回的视频数据data
		let data = {
			fileId: '5285890799710670616'
		}
		
        // 动态移除
        var childList = document.getElementById('videoView').childNodes;
        if(childList.length > 0){
          childList.forEach(ele => {
            document.getElementById('videoView').removeChild(ele);
          });
        }

        // 解决：TCPlayer: WARN: Player "myVideo" is already initialised. Options will not be applied. 
        //       重复使用 videoId，不能重复调用 video Player 作用于同一个 videoId（动态创建video标签和Id）
        const el = document.getElementById("videoView"); //获取存放视频的容器id
        this.myVideo = document.createElement("video"); //创建video标签
        this.myVideoId = `myVideo${new Date().getTime()}`; //拼接时间戳防止id重复
        this.myVideo.id = this.myVideoId; //配置video标签的id
        this.myVideo.height = "305"; //配置video标签的高
        this.myVideo.preload = "auto"; 
        el.appendChild(this.myVideo); //把创建完的video标签放进视频容器中
        this.player = TCPlayer(this.myVideoId, {
          	fileID: data.fileId, //请传入需要播放的视频 fileID（必须）
			appID: '1400329073', //请传入点播账号的 appID（必须）
			plugins:{
				ContinuePlay: {
				// auto: true //是否在播放时自动续播
				}
			}
        }); //初始化TCPlayer云点播的视频参数