More than 3 years have passed since last update.

Tencent CloudのTCPlayerを使ってみた

Posted at 2020-09-07

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up