騰訊雲播放器更新——TCplayer

概述

最近騰訊雲播放器進行了更新，增長了TCplayer，支持點播播放。因爲工做須要，瞭解了一下TCplayer，把心得記錄下來，供之後開發時參考，相信對其餘人也有用。

參考文檔：
TCPlayer開發文檔
TCPlayer使用文檔

TCplayer

TCplayer能夠播放發佈在騰訊雲點播中的視頻。因此要先上傳視頻到騰訊雲點播，而後它會給你一個fileID和appID。前端就利用這個fileID和appID來播放視頻。

因爲 MP4 和 HLS（m3u8）是目前在 PC 瀏覽器和手機瀏覽器上支持程度最普遍的格式，因此騰訊雲的視頻點播平臺最終會把上傳的視頻發佈爲 MP4 和 HLS（m3u8） 格式。

引入播放器

首先在頁面合適的地方引入文件：

<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">

<!-- 在 Chrome Firefox 等現代瀏覽器中經過 HTML5 播放 hls -->
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

而後放置播放器容器，注意必須爲video標籤。

<video id="player-container-id" preload="auto" playsinline webkit-playinline x5-playinline>
</video>

最後在頁面初始化的代碼中加入如下初始化腳本，傳入獲取到的fileID和appID。

var player = TCPlayer('player-container-id', {
    // player-container-id 爲播放器容器ID，必須與html中一致
    fileID: '4564972818956091133', // 請傳入須要播放的視頻filID 必須
    appID: '1253668508' // 請傳入點播帳號的appID 必須
  });

自定義寬高

像這種第三方視頻組件，難點就是自定義它的寬高。咱們有2種方法，一種方法是在腳本中用js去取它的寬高，代碼以下所示：

var player = TCPlayer('player-container-id', {
    // player-container-id 爲播放器容器ID，必須與html中一致
    fileID: '4564972818956091133', // 請傳入須要播放的視頻filID 必須
    appID: '1253668508', // 請傳入點播帳號的appID 必須
    width: $('player-container-id').width(),
    height: $('player-container-id').height()
  });

上面這種方法有一個缺點就是視頻容易被拉伸。因此咱們更推薦用第二種方法：設置視頻的寬高自適應。咱們在css裏面設置視頻的寬高自適應，代碼以下：

/* 經過 css 設置播放器尺寸 這時<video>中的寬高屬性將被覆蓋*/
#player-container-id {
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 56.25%; /* 計算方式：播放器以16：9的比率顯示，這裏的值爲 9/16 * 100 = 56.25  */
}

/* 外部容器也須要是自適應的*/
#wrap {
  width: 80%;
  margin: 0 auto;
}

切換fileID播放

咱們經常有這種需求，就是須要更換視屏播放內容。TCPlayer有一個API, loadVideoByID(args) 方法，能夠更換視屏內容，代碼以下：

//其中player就是實例化的TCPlayer
player.loadVideoByID({
  fileID: '', // 請傳入須要播放的視頻 filID 必須
  appID: '' // 請傳入點播帳號的 appID 必須
});

暫停與繼續

對於視頻，咱們經常有這種需求，就是在暫停視頻後，點擊任何地方，都可以繼續播放視頻。這個能夠利用TCPlayer的圖片貼片功能實現。

TCPlayer支持配置片頭、片中暫停、片尾顯示圖片貼片,而且能夠綁定事件，也能夠添加超連接。也就是說，不只能夠實現上述需求，還能夠添加超連接跳轉等。

方法是在【控制檯】>【Web 播放器管理】選定某個播放器配置，單擊貼片欄目進行設置貼片信息。

示例請看：圖片貼片