uniapp 利用腾讯播放器开发视频功能，App版

nelly521

已于 2023-09-25 15:58:23 修改

阅读量548

点赞数

文章标签： uni-app 音视频前端

于 2023-09-25 13:47:23 首次发布

本文链接：https://blog.csdn.net/nelly521/article/details/133271464

版权

<template>
	<view>
		<view style="height: 300rpx; line-height: 300rpx;">{{abc}}-111</view>
		<view  :prop="playValue" :change:prop="testRenderjs.onChange" style="width: 100%; height:320rpx; background-color: #ff0000;" id="videoContain">
		
		</view>
		<view @click="getIndex">返回</view>
	</view>
</template>
<script>
	// 原先的script，这里被称为service层 
	export default {
		data() {
			return {
				playValue:{
					fileID:'',
					appID:'',
					psign:''
				},
				abc:''
				
				}
		},
		
		onLoad(){
					
			this.playValue.fileID = ""; // 请传入需要播放的视频fileID 必须
			this.playValue.appID = "";// 请传入点播账号的子应用appID 必须
			this.playValue.psign = ""; // 请传入播放器签名psign 必须
		},
		methods: {
			getIndex(){
			
			}
		}
	
	}
</script>
<!-- testRenderjs 为renderjs模块名称，lang固定写法 -->
<script module="testRenderjs" lang="renderjs">
	export default {
		data() {
			return {
				
				render_playValue:{
					fileID:'',
					appID:'',
					psign:''
				},
				
			}
		},
		created() {
		
		},
	mounted() {
		
		 this.tcpalyer();
	},
	methods: {
		
		onChange(newValue, oldValue, ownerInstance, instance) {
		//console.log('service层中的options发生变化')
		console.log('fileID', newValue.fileID)
		console.log('appID', newValue.appID)
		console.log('psign', newValue.psign)
		this.render_playValue.fileID = newValue.fileID;
		this.render_playValue.appID = newValue.appID;
		this.render_playValue.psign = newValue.psign;
		},
		
		tcpalyer() {
			console.log('red_fileID：',this.red_fileID)
		         // sdk引入有顺序
		         let script1 = document.createElement("script");
		         script1.type = "text/javascript";
		         script1.src =
		         "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js";
		         document.getElementsByTagName("head")[0].appendChild(script1);
		         // 创建script标签，引入外部文件
		         let script = document.createElement("script");
		         script.type = "text/javascript";
		         script.src =
		         "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js";
		         document.getElementsByTagName("head")[0].appendChild(script);
		         
		         const video = document.createElement("video")    
		         video.setAttribute("id", "player-container-id")
		         video.setAttribute('playsinline',true)
		         video.setAttribute('webkit-playsinline',true)
		         video.setAttribute('autoplay',true)
				 video.setAttribute('style','width:100%; height:100%')
		
				 
				 const input = document.createElement("input") 
				 input.setAttribute("id", "fileID")
				 input.setAttribute("type", "hidden")
				 input.setAttribute("value", this.render_playValue.fileID)
				
				const input2 = document.createElement("input")
				input2.setAttribute("id", "appID")
				input2.setAttribute("type", "hidden")
				input2.setAttribute("value", this.render_playValue.appID)	 
				
				const input3 = document.createElement("input")
				input3.setAttribute("id", "psign")
				input3.setAttribute("type", "hidden")
				input3.setAttribute("value", this.render_playValue.psign)
							  
				 document.getElementById("videoContain").appendChild(input)	
				 document.getElementById("videoContain").appendChild(input2)
				 document.getElementById("videoContain").appendChild(input3)
				 
		         document.getElementById("videoContain").appendChild(video)
		         
		         // 引入成功
		         script.onload = function () {	
					 
					 var fileID=document.getElementById('fileID').value
					 var appID=document.getElementById('appID').value
					 var psign=document.getElementById('psign').value
					 
		             console.log("js资源加载成功了"+document.getElementById('fileID').value);
		             var player = TCPlayer("player-container-id", {
		             fileID: fileID, // 请传入需要播放的视频fileID 必须
					 appID: appID, // 请传入点播账号的子应用appID 必须
		           	 psign: psign, // 请传入播放器签名psign 必须
					
					autoplay: false, // 是否自动播放
		              //width: "700rpx",
		              //height: "auto",
		             });


                // 点击全屏变横屏
					 player.on('fullscreenchange', function(e) {
					    // 做一些处理
						const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
						
						if (fullscreenElement) {
							//锁定横屏
							plus.screen.lockOrientation('landscape-primary'); 
						  //console.log('当前全屏元素：', fullscreenElement);
						} else {
							//锁定坚屏
							plus.screen.lockOrientation('portrait-primary'); 
						  //console.log('没有全屏元素');
						}												
					 });

		         };
		         // 引入失败
		         script.onerror = function () {
		             console.log("js资源加载失败了");
		         };
		      },
					
					
	},
	// 发送数据到service层
	emitData(event, ownerInstance) {
	
	}
	
	
	}
</script>