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>
-----------------------------------
uniapp 做点播,用的是腾讯的tcplayer( 原理基本上和 vue 一样,区别在于 uniapp 不能直接引用 video 标签,得动态创建 )
https://blog.51cto.com/u_15057848/4155117

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值