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

2021-12-23 14:58:18 阅读：283 来源： 互联网

标签：视频 vue 容器续播 myVideo api video data id

项目背景

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

直播

页面准备工作： 在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>

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

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

对接视频播放： 从指定的 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', //视频的显示高度，请尽量使用视频分辨率高度
        });

点播

页面准备工作： 在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>

渲染播放器容器：在需要展示播放器的页面位置加入播放器容器（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云点播的视频参数

标签：视频,vue,容器,续播,myVideo,api,video,data,id
来源： https://blog.csdn.net/weixin_44791115/article/details/122100563

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

项目背景

直播

点播