TCPlayerLite騰訊雲流播放器的使用

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

首先需要一個dom容器：

        <div
          id="id_test_video"
          style="width: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,//是否為直播
        width: "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、

自動播放相關問題

自動播放失敗

問題表現：設置了自動播放屬性，視頻沒有自動播放。
解決方案：在許多瀏覽器中，都禁止了多媒體文件自動播放，特別是移動端瀏覽器。部分瀏覽器允許靜音視頻或者無音軌視頻自動播放，因此可以嘗試將播放器設置為靜音。對於靜音也無法播放的瀏覽器，暫無解決辦法。

 

 

 

。