＜THEOplayer 使用に関する質問＞ Web SDKを使い始める – DPSJ カスタマーポータル

Web SDKを使い始める

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

THEOplayerは、THEO Technologies社が開発したユニバーサルビデオプレーヤーソリューションです。THEOplayer Web SDKは、HLS、MPEG-DASH、広告、DRMなど多くのサポートを提供しています。

https://portal.theoplayer.comでTHEOplayer Web SDKとライセンスを入手することができます。

⚠ NPM

THEOplayer v2.82.0以降は、NPMで管理することができます。詳しくは https://www.npmjs.com/package/theoplayer をご参照ください。

この記事は、初めてTHEOplayerをご利用になる方のための出発点です。この記事では、THEOplayer Web SDKの基本的な手動実装を実現するために必要なステップを紹介します。この記事の結果は、以下のテンプレートです。

<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>THEOplayer</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="/path/to/ui.css">
  </head> 
  <body>
    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
    <script type="text/javascript" src="/path/to/THEOplayer.js"></script>
    <script>
      var element = document.querySelector('.theoplayer-container'); 
      var player = new THEOplayer.Player(element, { 
        libraryLocation: '/path/to/your-theoplayer-folder/',
        license: 'your_license_string'
      });
      player.source = {
        sources: [{
          src: '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8',
          type: 'application/x-mpegurl'
        }]
      };
    </script>
  </body>
</html>

また、ブログ記事 Getting Started with THEOplayer（英文）や補完的なビデオチュートリアルも参考になるでしょう。

THEOplayer SDKとライセンス

THEOplayer SDKとライセンスの取得には3つのステップがあります。

　１．https://portal.theoplayer.com にサインアップする

　２．THEOplayer Web SDKを作成する

　３．「CDNのURL」と「ライセンスの文字列」を用意する

基本設定

このガイドでは、あなたのウェブサイトにTHEOplayerをセットアップする手順をご紹介します。

始めるために必要なものがいくつかあります。

　１．コードをホストし、視聴者にアクセスするためのウェブ・サーバーとドメイン名

　２．THEOplayerライブラリを実装し、THEOplayer APIにアクセスするためのTHEOplayer SDKおよびライセンス

　３．THEOplayer APIを介して視聴者に表示するためのビデオ・ストリーム（例：.m3u8または.mpdファイル）

このガイドでは、4つのステップでTHEOplayerを実装する方法を説明します。

　１．まずは、THEOplayerについて何も書かれていない、基本的なHTMLファイルからスタートします。

　２．THEOplayerライブラリとは何か、それをどのようにインクルードすればよいかを説明し、デフォルトの　

　　　THEOplayer UIについても同様に説明しています。

　３．THEOplayerでビデオストリームを再生する方法を説明します。

　４．最終的な概要を説明します。

Step 1: HTMLファイルの設定

THEOplayerをWebビデオプレーヤーとして使用する場合は、THEOplayerとコードを埋め込むためのWebページ（＝HTMLファイル）が必要になります。

THEOplayer SDKのライセンスは、ホワイトリストに登録されたドメインでのみ使用できることに注意してください。これらのドメインは、https://portal.theoplayer.com、THEOplayer Web SDKを作成する際に設定します。

まず、次のようなHTMLファイルを作成してみましょう。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>THEOplayer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    </body>
</html>

次に、THEOplayer SDKを入れます。

Step2：THEOplayerライブラリの組み込み

THEOplayer APIおよびデフォルトのUIにアクセスするには、まずTHEOplayerのライブラリファイルをインクルードする必要があります。JavaScriptライブラリはTHEOplayer APIを公開し、CSSライブラリはデフォルトのUIを含んでいます。

THEOplayer JavaScript ライブラリ

次の行は、THEOplayer JavaScriptライブラリを含み、THEOplayer APIへのアクセスを提供します。

<script type="text/javascript" src="/path/to/THEOplayer.js"></script>

　・src: これは、使用したいTHEOplayerライブラリのURIです。これは次のようなものになります。

　　/path/to/THEOplayer.jsのように、URLはTHEOplayer.jsファイルへのリンクです。

　・type：インクルードされるスクリプトの内容をJavaScriptに指定します。最近の多くのブラウザではオプションと

　　なっていますが、いずれにしてもこれを入れておくことをお勧めします。

path/to/をあなたのCDNのURLと入れ替える必要があります。もしあなたのSDKが上記のようなものであれば、代わりに以下のような<script>タグを代わりに入れます。

<script type="text/javascript" src="https://cdn.myth.theoplayer.com/55d71743-4924-4d1b-8440-78f9cd103879/THEOplayer.js"></script>

THEOplayer CSSライブラリ

デフォルトのTHEOplayer UIを使用するには、THEOplayer CSSライブラリを参照する必要があります。

<link rel="stylesheet" type="text/css" href="/path/to/ui.css">

次に、THEOplayerのインスタンスを作成し、ビデオストリームを設定します。

Step3：動画

THEOplayer Web SDKで動画を再生するには、以下の作業が必要です。

１．ビデオプレーヤーコンテナを作成する

２．このコンテナを JavaScript で取得します

３．そのコンテナに関連付けられたTHEOplayerインスタンスを作成する

４．そして、このインスタンスにビデオストリームを設定します

以下のスニペットは、これら4つのステップを実装しています。

<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
<script type="text/javascript" src="/path/to/THEOplayer.js"></script>
<script>
var element = document.querySelector('.theoplayer-container'); // fetch THEOplayer container div

var player = new THEOplayer.Player(element, { // instantiates video player
  libraryLocation: '/path/to/your-theoplayer-folder/', // references folder containing your THEOplayer library files (theoplayer.p.js, THEOplayer.js, ...)
  license: 'your_license_string' // references your THEOplayer SDK license
});

// HLS
player.source = {
  sources: [{
    src: '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8', // sets HLS source
    type: 'application/x-mpegurl' // sets type to HLS
  }]
};


// DASH
// player.source = {
//     sources : [{
//         src : '//amssamples.streaming.mediaservices.windows.net/634cd01c-6822-4630-8444-8dd6279f94c6/CaminandesLlamaDrama4K.ism/manifest(format=mpd-time-csf)', // sets DASH source
//         type : 'application/dash+xml' // sets type to MPEG-DASH
//     }]
// };
</script>

上記のスニペットを分解してみましょう。

ビデオプレーヤーコンテナの作成

この<div>要素は、ビデオプレーヤーのコンテナを作成します。

<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

　・theoplayer-containerクラスは、以下のスニペットで示されるように、JavaScriptでコンテナを取得するために使用さ

　　れます。

　・video-js theoplayer-skin vjs-16-9 クラスは、デフォルトの THEOplayer UI をロードします。16:9 のコンテナを必要

　　としない場合は vjs-16-9 を省略することができます。

var element = document.querySelector('.theoplayer-container');

THEOplayerインスタンスの作成

以下のスニペットは、特定のプレーヤー構成を持つコンテナのTHEOplayerインスタンスを作成します。

var player = new THEOplayer.Player(element, { // instantiates video player
  libraryLocation: '/path/to/your-theoplayer-folder/', // references folder containing your THEOplayer library files (theoplayer.p.js, THEOplayer.js, ...)
  license: 'your_license_string' // references your THEOplayer SDK license
});

JavaScriptやCSSライブラリと同様に、「/path/to/your-theoplayer-folder/」と「your_license_string」を入れ替える必要があります。例えば、先に示したSDKを表すスクリーンショットでは、代わりに以下のようなスニペットを設定します。

var player = new THEOplayer.Player(element, { 
  libraryLocation: 'https://cdn.myth.theoplayer.com/55d71743-4924-4d1b-8440-78f9cd103879/',
  license: 'sZP7IYe6T6PeCl0iCSbrI6klIQf_FSaZ3Le-TSez0mzoIDat3DarTSIlCSb6FOPlUY3zWokgbgjNIOf9fKaZTux10LUlFDXgTSb-3QIg06k1IKhrFSBrISCo0QPeCo0i36fVfK4_bQgZCYxNWoryIQXzImf90SCZ3SfZ0u5i0u5i0Oi6Io4pIYP1UQgqWgjeCYxgflEc3l5r3u0k0Se_this_is_a_fake_license_string_1dDrLYtA1Ioh6TgV6UQ1gWtAVCYggb6rlWoz6FOPVWo31WQ1qbta6Ymi6IQj-CDgpbkjLWt4ZCoh6TgV6UQ1gWtAVCYggb6rlWoz6FOPVWo31WQ1qbta6FOfJfgzVfG3edt06TgV6dwx-Wuh6Ymi6bo4pIXjNWYAZIY3LdDjpflNzbG4gya'
});

ライセンスの設定については、ライセンスの項で詳しく説明しています。

ビデオストリームの設定

以下のスニペットは、THEOplayerインスタンスにHLSビデオストリームを設定します。

player.source = {
  sources: [{
    src: '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8', // sets HLS source
    type: 'application/x-mpegurl' // sets type to HLS
  }]
};

DASHストリームを設定するには、typeを「application/x-mpegurl」ではなく「application/dash+xml」に設定する必要があります。これは、以前のスニペットにコメントアウトされたコードで示されています。

次のステップでは、すべてをまとめます。

Step 4: 結果

以下のスニペットをあなたのウェブサーバーで使用したり、オンラインのコードプレイグラウンドで実験してみてください。

<!DOCTYPE html>

<html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>THEOplayer</title>

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link rel="stylesheet" type="text/css" href="/path/to/ui.css">

  </head> 

  <body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

    <script type="text/javascript" src="/path/to/THEOplayer.js"></script>

    <script>

      var element = document.querySelector('.theoplayer-container'); 

      var player = new THEOplayer.Player(element, { 

        libraryLocation: '/path/to/your-theoplayer-folder/',

        license: 'your_license_string'

      });

      player.source = {

        sources: [{

          src: '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8',

          type: 'application/x-mpegurl'

        }]

      };

    </script>

  </body>

</html>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

www.dpsj.co.jp

日本デジタル・プロセシング・システムズ株式会社
東京都新宿区新宿2丁目5−12 FORECAST新宿AVENUE 6F東京都港区新橋 6-19-13 1F
TEL（代）: 03-6746-0231