<template>
<view id="videoContain">
<!-- <video id="player-container-id" preload="auto" playsinline webkit-playsinline></video> -->
</view>
</template>
<!--播放器脚本文件-->
<script>
export default {
name: 'TencentPlayer',
props: {
options: {
type: Object,
default() {
return {};
}
}
},
// data() {
// return {
// tcPlayerId: 'tcPlayer' + Date.now(),
// player: null
// };
// },
// watch: {
// options: {
// handler(newV, oldV) {
// this.$nextTick(() => {
// this.loadJS();
// });
// },
// immediate: true,
// deep: true
// }
// },
mounted() {
this.tcpalyer();
},
methods: {
tcpalyer() {
// 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)
document.getElementById("videoContain").appendChild(video)
// 引入成功
script.onload = function () {
console.log("js资源加载成功了");
var player = TCPlayer("player-container-id", {
fileID: '5285890799710670616',
appID: '1400329073',
// autoplay: true,
width: "375",
height: "320",
});
};
// 引入失败
script.onerror = function () {
console.log("js资源加载失败了");
};
},
}
};
</script>
<style lang="scss" scoped>
@import url('https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');
</style>
-----------------------------------
uniapp 做点播,用的是腾讯的tcplayer( 原理基本上和 vue 一样,区别在于 uniapp 不能直接引用 video 标签,得动态创建 )
https://blog.51cto.com/u_15057848/4155117