uni-app 引入外部js 【只能通过script方式引入的sdk】。以uni-app h5平台使用腾讯云点播为例

有蝉

已于 2022-03-13 15:12:15 修改

阅读量1.5w

点赞数 4

分类专栏： H5 文章标签： uni-app manifest 腾讯云点播

于 2020-09-02 16:09:08 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/108364131

版权

H5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

uniapp需要引入sdk,但是这个sdk只能通过script的方式引入，此时，需要配置项目中的manifest.json

官网：uni-app官网

可以如下配置（方法一）

也可以在源码中配置（方法二）

做出的效果如下

index.html内容如下

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				console.log("document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'")
			})
		</script>
		<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />
		
		<!-- 引入外部start -->
		<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
		 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
		 <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
		 <!--播放器脚本文件-->
		 <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
		<!-- 引入外部end -->
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

以下是腾讯云点播在uni-app时的使用（h5）

<template>
	<view class="courseVideo">
		<view id="tcView" ref="tcView" class="video-container">
		
		</view>
		<view class="list-container">
			
		</view>

	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				player:null,
				playerId:'videoDomId',
				
			}
		},
		onLoad(options) {
			//uni.setNavigationBarTitle({
			//	title: options.name
			//})
			
		},
		created(){
			this.initVideo()
		},
		destroyed() {
			this.player.pause();
			this.player.dispose();
			this.player = null
		},
		methods: {
			
			initVideo(){
				this.$nextTick(()=>{
					var p = document.getElementById("tcView");
					var x = document.createElement("video");
					x.setAttribute("id", this.playerId);
					x.setAttribute("preload", "auto");
					x.setAttribute("poster", '');
					x.setAttribute("width", p.clientWidth);
					x.setAttribute("height", p.clientHeight);
					// x.style.width = p.clientWidth+'px'
					// x.style.height = p.clientHeight+'px'
					x.setAttribute("x5-video-player-type", "h5");
					x.setAttribute("x5-video-player-fullscreen", true);
					x.setAttribute("show-center-play-btn", false);
					x.setAttribute("x5-playsinline", '');
					x.setAttribute("x5-video-orientation", 'portrait');
					x.setAttribute("playsinline", '');
					x.setAttribute("webkit-playsinline", "auto");
					p.appendChild(x);
					this.player = TCPlayer(this.playerId, { // player-container-id 为播放    
               // 器容器ID，必须与html中一致
					  fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
					  appID: '1400329073' // 请传入点播账号的appID 必须
					  //其他参数请在开发文档中查看
					});
				})
				
			},
           // 切换视频播放
			toggleVideo(item){
				
				this.player.loadVideoByID({
				  fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
				  appID: '1400329073', // 请传入点播账号的appID 必须
				  sign:'', // 参考 Key 防盗链说明
				});
				
			},
			
		}
	}
</script>

<style lang="scss">
	.courseVideo {
		.video-container {
			position: fixed;
			width: 100%;
			height: 210px;
			z-index: 2;

			// #playerId {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}

		.list-container:before {
			content: '';
			display: table;
		}
		.list-container{
			.e-course-time{
				margin-top:210px
			}
		}
		
	}
</style>

有蝉

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
19
评论
uni-app 引入外部js 【只能通过script方式引入的sdk】。以uni-app h5平台使用腾讯云点播为例

uniapp需要引入sdk,但是这个sdk只能通过script的方式引入，此时，需要配置项目中的manifest.json官网：https://uniapp.dcloud.io/collocation/manifest?id=h5可以如下配置也可以在源码中配置index.html内容如下<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> ..
复制链接

扫一扫