美文网首页
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