Tencent Cloud のPlayer SDK (Superplayer for Web)を使ったデモ

8682 ワード
HTML 動画配信 動画 Tencent TencentCloud HTML テキストリンク

Player SDKとは

PlayerSDKはTencent Cloud Video on Demand (VOD)の動画再生で使用されるSDKです。
APIから簡単に独自のWebアプリケーション等に統合することが可能であり、様々な機能を有しています。

Superplayer for Webについて(公式)

1. 主な機能

  • ビデオの再生
  • ライブ配信機能

2. サポートされているフォーマットとプラットフォーム

対応ブラウザ及びフォーマットは公式より以下のとおりです。

VODプラットフォームについて(公式)

Tencent CloudのVODプラットフォームではアップロードされたビデオを最終的にMP4かHLS(M3U8)形式で公開します。

アップロードの段階でサポートされる形式

ビデオ：
MP4、TS、FLV、WMV、ASF、RM、RMVB、MPG、MPEG、3GP、MOV、WEBM、AVI
オーディオ：
MP3、M4A、FLAC、OGG、WAV

作業環境

Windows10
Chrome

実装手順

今回はデモなのでサンプルとして公開されている動画のidを使用しています。

0. 自分の動画を使用する場合

サンプルの動画を使用するので記事ではこの手順をスキップしますが、VODに動画をアップロードすることで任意の動画を使用できます。(※有料)
こちらについては公式のURLを置いておきます。

上記URLを参考に動画をアップロードして下さい。

1. ファイルをページに読み込む

superplayerのデザインであるcssファイルやスクリプトファイルを適切な場所に読み込みます

<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">

<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>

注意：

HTML5 を使って Chrome や Firefox などの最新のブラウザで HLS の動画を再生したい場合は、tcplayer.v4.1.min.js をインポートする前に hls.min.0.13.2m.js をインポートする必要があります。

その場合は

<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">

<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>

となります。

2. Playerコンテナを配置する

ページ上の目的の場所にPlayerコンテナを配置します。
この時、id,width,heightは任意の値で設定出来ます。

<video id="hogehoge-id" width="414" height="270" preload="auto" playsinline webkit-playsinline></video>

preload 属性：
ページが読み込まれた直後にビデオを読み込むかを指定します。
デフォルトで auto となっており再生をより早く開始するために設定されます。
他には meta 、 none が指定できます。

playinline とwebkit-playinline 属性：
インライン再生を実装するために使用されます。

注意：

必ずvideoタグを使用する必要があります

3. TCPlayerを初期化する

サンプルの
fileID:5285890799710670616
appID:1400329073
を以下の初期化スクリプト内に設定し、ページ内の適切な位置に追加します。

var player = TCPlayer('hogehoge-id', { // `player-container-id` is the player container ID, which must be the same as that in HTML
    fileID: '5285890799710670616', // Pass in the `fileID` of the video to be played back, which is required
    appID: '1400329073' // Pass in the `appID` of the VOD account, which is required
  });

手順0 (自分の動画を使用する場合)を行っている場合はコンソールからfileID （メディアアセットのビデオID ）とappID （アカウント情報>基本情報で表示可能）を渡します。

ここまでで準備は完了です。

デモ用のコード全体

<html lang="en">
       <head>
           <meta charset=utf-8/>
           <link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
           <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
           <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
       </head>
       <body>
            <video id="hogehoge-id" width="414" height="270" preload="auto" playsinline webkit-playsinline></video>
            <script>
                var player = TCPlayer('hogehoge-id', { // `player-container-id` is the player container ID, which must be the same as that in HTML
                    fileID: '5285890799710670616', // Pass in the `fileID` of the video to be played back, which is required
                    appID: '1400329073' // Pass in the `appID` of the VOD account, which is required
                });
            </script>
       </body>
</html>

実行結果

無事デモの実行が出来ました。