TCPlayerLite腾讯云流播放器的使用

文档地址：https://cloud.tencent.com/document/product/881/20207

首先需要一个dom容器：

        <div
          id="id_test_video"
          style="100%; height:auto;"
        ></div>

初始化播放器：

// TCPlayer播放器初始化
    initTcPlayer() {
      var self = this;
      self.TCPlayer = new TcPlayer("id_test_video", {
        m3u8: self.roomDetail.streamPlayUrlHls, //m3u8连路
        flv: self.roomDetail.streamPlayUrlFlv,//flv连路
        rtmp: self.roomDetail.streamPlayUrlRtmp,
        autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        poster: { style: "cover", src: self.roomDetail.streamPoster },
        flash:false,//优先h5播放器  如果是true则是优先flash播放
        x5_player:tools.isAndroid()?false:true,//启用TBS
        controls:"default",//不显示控件
        x5_type:"h5",//启用同层播放器
        volume:0,//测试初始音量[0-1] 设置为0 静音 大多浏览器会恢复自动播放功能
        live:true,//是否为直播
         "100%", //视频的显示宽度，请尽量使用视频分辨率宽度
        height: "100%", //视频的显示高度，请尽量使用视频分辨率高度
        wording: {//定义错误提示语
            2032: "请求视频失败，请检查网络",
            2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
        },
        listener: function(msg) {
          console.log(msg)
          if (msg.type == "error") {
            switch(msg.detail.code){
              case 1:
                console.log("网络错误，请检查网络配置或者播放链接是否正确。");
                break;
              case 2:
                console.log("视频格式 Web 播放器无法解码。");
                break;
              case 3:
                console.log("视频解码错误。");
                break;
              case 4:
                console.log("当前系统环境不支持播放该视频格式。");
                break;
              case 5:
                console.log("播放器判断当前浏览器环境不支持播放传入的视频，可能是当前浏览器不支持 MSE 或者 Flash 插件未启用。");
                break;
              case 13:
                console.log("直播已结束，请稍后再来。");
                break;
              case 1001:
                console.log("断网了");
                break;
              case 1002:
                console.log("获取视频失败，请检查播放链接是否有效。");
                break;
              case 2048:
                console.log("无法加载视频文件，跨域访问被拒绝。");
                break;
              default:
                console.log("出错了");
                break;
            }
          }
          if (msg.type == "load") {
            console.log("load执行")
            self.TCPlayer.volume(0)
          }
          if (msg.type == "timeupdate") {
            console.log("timeupdate")
          }
          if (msg.type == "loadeddata") {
            console.log("loadeddata")
          }
          if (msg.type == "progress") {
            console.log("progress")
          }
          if (msg.type == "play") {
            console.log("play")
          }
          if (msg.type == "playing") {
            console.log("playing")
          }
          if (msg.type == "pause") {
            console.log("pause")
          }
          if (msg.type == "ended") {
            console.log("ended")
          }
          if (msg.type == "seeking") {
            console.log("seeking")
          }
          if (msg.type == "seeked") {
            console.log("seeked")
          }
          if (msg.type == "resize") {
            console.log("resize")
          }
          if (msg.type == "volumechange") {
            console.log("volumechange")
          }
        }
      });
    },

这里面用socket监听了房间的推流状态，如果监听到房间正在推流，则开始调用实例的播放方法，若监听到停止推流，则暂停视频播放。

 Android手机等浏览器 劫持播放器  设置不了封面？

 web播放器常见问题：https://cloud.tencent.com/document/product/881/20219#.E6.B5.8F.E8.A7.88.E5.99.A8.E5.8A.AB.E6.8C.81.E8.A7.86.E9.A2.91.E6.92.AD.E6.94.BE

1、跨协议拦截

问题表现：在 HTTPS 协议的页面播放 HTTP 协议的视频时，浏览器会处于安全考虑进行拦截。
解决方案：HTTP 协议的页面播放 HTTP 的视频，HTTPS 协议的页面播放 HTTPS 的视频。

2、RTMP、FLV 格式的视频以及在 IE 中播放视频都依赖 Flash 插件，请安装并启用 Flash 插件。

3、

浏览器不支持 MSE

问题表现：在 PC 浏览器不支持 Flash 的情况下，使用 H5 方式无法播放 HLS、FLV 格式的视频。
解决方案：不支持 Flash 的情况下，播放器将使用 MSE 播放 HLS、FLV 格式的视频，如浏览器不支持，只能更换或升级浏览器，目前支持通过 MSE 播放 HLS、FLV 格式视频的浏览器有 Edge、Chrome、Firefox 和 Safari11+。

 4、

浏览器劫持视频播放

视频激活播放后强制全屏

问题表现：在单击视频激活播放后，直接全屏播放，通常出现在 Android、iOS 的微信、手机 QQ、QQ 浏览器等浏览器中。

解决方案：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 属性，腾讯云播放器默认会在 video 标签中加上 playsinline 和 webkit-playsinline 属性。iOS10+ 识别 playsinline 属性，版本小于10的系统识别 webkit-playsinline 属性。经测试，在 iOS Safari 中可以实现页面内（内联）播放。Android 端识别 webkit-playsinline，但是由于 Android 的开放性，出现了许多定制浏览器，这些属性不一定生效，例如，在 TBS 内核浏览器（包括不限于微信、手机 QQ，QQ 浏览器）中，可能需要使用同层播放器属性（接入文档），避免系统强制全屏视频。

如果已配置以上提到的属性仍会强制全屏，则通用解决方案无效，需要浏览器厂商提供解决方案。

5、

自动播放相关问题

自动播放失败

问题表现：设置了自动播放属性，视频没有自动播放。
解决方案：在许多浏览器中，都禁止了多媒体文件自动播放，特别是移动端浏览器。部分浏览器允许静音视频或者无音轨视频自动播放，因此可以尝试将播放器设置为静音。对于静音也无法播放的浏览器，暂无解决办法。

。