<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>