美文网首页
uniapp 腾讯云直播 TCplayer 播放器

uniapp 腾讯云直播 TCplayer 播放器

作者: 配角_2763 | 来源:发表于2023-09-02 17:35 被阅读0次

app.vue 里面先加载js,和css

<script>
    export default {
        onLaunch: function() {
            var script = document.createElement('script');
            script.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.v5.0.0.min.js";
            document.head.appendChild(script);
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
    @import url('https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.0/tcplayer.min.css');
</style>

在需要加直播的页面

//容器
<view id="videoplayer" style="width: 100%;height: 100vh;" preload="auto" playsinline webkit-playsinline>
</view>

js里面 我是在请求接口成功的里面加的这个

const video = document.createElement("video")
video.setAttribute("id", "video"+num);
video.setAttribute("width", "100%");
video.setAttribute("height", "100vh");
video.setAttribute('playsinline',true);
video.setAttribute('webkit-playsinline',true)// video的属性
document.getElementById("videoplayer").appendChild(video);//为这个盒子中添加一个video元素
                    
this.player = TCPlayer('video'+num, {
    sources: [{
        src: that.liveinfo.video_source_address,
     }],
    licenseUrl: 'https://license.vod-control.com/license/v2/1xxxxxx4_1/v_cube.license',  // 页面报 lack_license_url 的时候就加这个就可以了
    autoplay:true
});
photo_2023-08-28_16-42-27.jpg

页面报 lack license url error code 55 的时候,在配置里面加上licenseUrl 就好了

相关文章

网友评论

      本文标题:uniapp 腾讯云直播 TCplayer 播放器

      本文链接:https://www.haomeiwen.com/subject/czixvdtx.html