Nuxt.js腾讯云直播

腾讯云文档：
https://cloud.tencent.com/document/product/881/20207

• Step1. 引入初始化脚本

nuxt.config.js 引入TcPlayer JS库

    script: [
      {
        src:
          '//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js',
      },
    ],

• Step2. 在 HTML 中放置容器

 <div class="v_wra"><div id="id_test_video" style="width:100%; height:10rem;"></div></div>

• Step3. 对接视频播放

var player = new TcPlayer("id_test_video", {
          "m3u8": this.liveInfo.m3u8,
          "flv": this.liveInfo.flv,
          "autoplay": true,
          "x5_playsinline": true, //不加这个的话，部分Android点击视频会全屏播放
          // "live": true, //直播模式，Android点击视频会全屏播放
          "volume": "1",
          "poster": "/images/poster-1.jpg",
          "width": "1280", //视频的显示宽度，请尽量使用视频分辨率宽度
          "height": "640" //视频的显示高度，请尽量使用视频分辨率高度
});

记得加上css自适应

<style>
  .vcp-player,
  .vcp-player video {
    width: 100%!important;
    height: 10rem!important;
  }
</style>

vue中也尝试同样实现，不过最后页面会报错TcPlayer not defined. 就算了吧。