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 中放置容器
 
  • 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自适应


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

你可能感兴趣的:(Nuxt.js腾讯云直播)