ユニバーサルビデオプレーヤーのTHEOplayer(ジオ・プレイヤー)を使ってみた

森 亮介

2020.04.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

唐突ですが以下の動画プレイヤーを見てくれないか？

上記プレイヤーはYoutubeではなく、THEOplayerというサービスを使って表示させたものです。 サービスの概要としては以下になります。

ユニバーサルビデオプレーヤーであるTHEOplayerは、幅広いビデオエコシステムが事前統合された、機能が豊富なTHEOplayer SDKの成長するポートフォリオで構成されています。これにより、ビデオサービスプロバイダーは、幅広いプラットフォームとデバイスで一貫したビデオ再生エクスペリエンスをすばやく提供できます。

動画配信のサービス開発には、インフラ周り(配信サーバーやストレージなど)、フロント周り(プレイヤー)がありますが、 このサービスはフロントのプレイヤー開発の大きな手助けとなるものになります。

特徴

  • プラグイン不要で様々なデバイスでの再生が可能
    • Web、モバイルWeb、ネイティブアプリ、スマートTV、およびその他のストリーミングデバイス
    • HLS / MPEG-DASH 両方対応
  • ビデオエコシステムとの統合
    • 人気のあるストリーミング、DRM、分析、広告ソリューションと事前に統合されている
      • 広告: VAST や Google IMA、バナーや動画広告の挿入に対応
  • カスタマイズ性
    • HTML、CSS、Javascript、APIによる豊富なカスタマイズ

やってみる

HTML5でのチュートリアル的なものを行なっていきたいと思います。

前提

THEOPORTALサインアップページにサインアップする

1. THEOPORTALにログイン

THEOPORTALログインページからログインします。

ログイン後のページ

2. SDKの作成

SDKsのページでCREATEをクリックして新規のHTML5用のプレイヤーを作成します。

Choose a SDKでHTML5を選択し、Nameに任意の名前を記述します。 そのあと、NEXTをクリックします。

Select functionalitiesという設定画面に遷移するので、ここで様々なカスタマイズを行います。

もちろん、作成した後の編集も可能です。

設定項目

  • Player ratio
  • Version
  • Formats
    • MPEG-DASHおよびHLSストリームのサポートを有効にすることができます
  • User Interface
    • プレイヤーの配色の変更ができます
  • User experience
    • ビデオ再生に関するオプション(自動再生、プリロード、再生時のミュートなど)の選択、次のコンテンツへの誘導、SNSでの共有UIの表示などの設定ができます。
  • Casting
    • Chromecastアドオンを有効,airplayアドオンを有効の設定ができます
  • Playback
    • 360°動画とVRアドオンをプレーヤーに追加したり、THEO Caching APIを有効にしたりできます。
  • Text tracks
    • 言語の切り替えを行うかの設定ができます(THEOplayerは、ストリームにキャプションが埋め込まれていることを自動的に検出し、追加の構成なしでそれらを再生します)
  • Advertisement
    • 広告の設定ができます。VASTとVPAIDとGoogle-imaをサポートしています。
  • Analytics
    • 分析プロバイダーとの連携を追加できます(Conviva, Youbora, Mediamelon, Moat, Agama, StreamOne)
  • Content protection
    • コンテンツ保護の設定を行えます(AES-128, DRM)
  • More integrations
    • Verizon Mediaとの統合を有効にできます

今回は - User InterfaceのPrimary colorとPrimary backgroundのBackground colorを FFFFFF(白) - User experienceのGeneral optionsにMute on start

を追加してみました。

なお、規定値に一括リセットすることも可能です。

Nextをクリックし、Whitelist domainsの設定画面に遷移します。

ドメインをホワイトリストに登録することでプレーヤーを保護できます。

今回は https://dev.classmethod.jp/ で表示させてみるので、 dev.classmethod.jpをホワイトリストとして登録してみます。

全ての設定が終わったら PUBLISHをクリックします。

設定完了まで時間がかかるのでひたすら待ちます。Queued...がReady!に変われば完了です。

3. プレイヤーの埋め込み

How to embed my THEOplayer HTML5 SDK ?というところをクリックすると埋め込み方法が表示されます。

  • HTMLのheadに追加するscript, linkタグ
  • カスタマイズを行なった場合のcss
  • プレイヤーを表示するためのdivタグ
  • プレイヤーの構成を行うjavascript

が表示されるので、表示させたいページのHTMLに貼り付けるだけです。

貼り付けを行なった後、ページをブラウザで開いてプレイヤーから動画が再生されるか確認します。

※ 本記事で作成したものが冒頭のプレイヤーです

まとめ

HTML5の動画プレイヤーを作成し、表示させてみました。

自身で開発するよりも大幅に開発コストを短縮できると思います。

フリープランではHTML5の他に AndroidとIOSのプレイヤーも作成できるので、プレイヤーの実装に悩んでいる方がいればぜひ試してみてください。

*