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

#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との統合を有効にできます