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>