TCPlayerLiteとは
TCPlayerLite（Tencent Cloud Web Super Player ）は、モバイルやPCのブラウザ上でオーディオやビデオストリームを再生する問題を解決するために設計された。
機能
1.ビデオの再生の他に、ライブ配信の再生機能も持っている。
- ビデオの再生
- ライブ配信の再生
2.サポートするプロトコールは以下のようです。
- HLS(M3U8)（ビデオとライブ配信） format: http://xxx.liveplay.myqcloud.com/xxx.m3u8
- FLV（ビデオとライブ配信） format: http://xxx.liveplay.myqcloud.com/xxx.flv
- RTMP(ライブ配信の再生) format: rtmp://xxx.liveplay.myqcloud.com/live/xxx
- MP4(ビデオの再生) format: http://xxx.vod.myqcloud.com/xxx.mp4
実装方法
1. Scriptの導入
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>;
2. Playerのタグを追加
<div id="id_test_video" style="width:100%; height:auto;"></div>
3. jsでTcPlayerを設定
var player = new TcPlayer('id_test_video', {
"m3u8": "https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/cc9f922c5285890781386012275/v.f220.m3u8", //ビデオのURL
//"mp4":"http://1301505281.vod2.myqcloud.com/dc455e1cvodcq1301505281/d98e77ce5285890806134848415/pmdn9YUDQBYA.mp4", // mp4のURL
"autoplay" : true, // 自動再生
"poster" : "http://www.test.com/myimage.jpg", //動画のヒントとなる画像を表示する
"width" : '480',//playrの幅
"height" : '320'//playrの高さ
});
ここまではTcplayerをできた。
全部のソースコード：
<html lang="en">
<head>
<meta charset=utf-8/>
</head>
<body>
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>;
<div id="id_test_video" style="width:100%; height:auto;"></div>
<script>
var player = new TcPlayer('id_test_video', {
"m3u8": "https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/cc9f922c5285890781386012275/v.f220.m3u8", //ビデオのURL
"mp4":"http://1301505281.vod2.myqcloud.com/dc455e1cvodcq1301505281/d98e77ce5285890806134848415/pmdn9YUDQBYA.mp4",
"autoplay" : true, //自動再生
"poster" : "",
"width" : '1280',// playerの幅
"height" : '720'//playerの高さ
});
</script>
</body>
</html>
TcPlayer:
まとめ
数行のソースコードでビデオとライブ配信を再生できるWeb Playerをできた。めっちゃ簡単！！！他の機能、例えばniconicoのような画面位コメントを流す機能がありそうです。まだ今度試します。
参考資料：
- VOD Web Player: https://intl.cloud.tencent.com/zh/document/product/266/33977