uniapp 做点播,用的是腾讯的tcplayer( 原理基本上和 vue 一样,区别在于 uniapp 不能直接引用 video 标签,得动态创建 )


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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



猜您在找 vue 引入 tcplayer,并且实现视频点播,腾讯点播 uniapp和vue的区别总结 符号引用与直接引用 Vue-router: 直接引用与使用vue-cli 直接引用vue-js如何写公共部分 Vue直接引用