概述
最近騰訊雲播放器進行了更新，增加了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 播放器管理】選定某個播放器配置，單擊貼片欄目進行設置貼片信息。
示例請看：圖片貼片