Slide 1
Slide 1 text
THEOplayerで
快適な動画作成を
きだぱん
2023.01.11
クラスメソッド株式会社 アライアンス統括部
Slide 2
Slide 2 text
本日のお品書き
1. 自己紹介
2. THEOplayerとは
3. THEOplayerの特徴
4. デモ
5. まとめ
Slide 3
Slide 3 text
自己紹介 3
https://dev.classmethod.jp/author/kidapan/
きだ まいこ ／きだぱん
● クラスメソッド株式会社
アライアンス統括部
テクニカルグループ
● 担当：DevOps製品
● 特性：ジャニーズ大好き
おまめ
1歳
(人間で約36歳)
Slide 4
Slide 4 text
最初に
YouTuberになってみたい。。。
そう思ったことは、ありませんか？
Slide 5
Slide 5 text
THEOplayer
Slide 6
Slide 6 text
THEOplayerとは
THEOplayerって、なんだろう
Slide 7
Slide 7 text
THEOplayerとは
THEO Technologies
https://www.theoplayer.com/about-us
live
“ MAKING STREAMING BETTER
THAN BROADCAST “
Slide 8
Slide 8 text
THEOlive
大規模配信対応のリアルタイム動画 API
● 1 秒以内の低遅延
● API ファーストな設計
● 高いスケーラブル性能
Slide 9
Slide 9 text
ゲームのストリーミング、YouTube を観る、動画を見る機会が増えている昨今。。。
視聴者は最高のコンテンツ(品質、内容)
○ スマートフォンやパソコンなどの身近にあるスマートデバイスを含めた
様々なデバイスにも対応可能な性能を求める
動画ファイルを視聴者へ再生、見せるための機能が必要
○ スライド連携、視聴ログ、カスタマイズ機能、広告、配信方法
サービスに合わせたオリジナル動画プレイヤー
Slide 10
Slide 10 text
THEOplayer
Slide 11
Slide 11 text
THEOplayerとは
● 最先端のビデオを効率的にかつあらゆるデバイスで配
信できるよう支援
● ビデオプレイヤーの実装に必要な要素を SDK として提
供
(SDK:Software Development Kit)
“ THEOplayer, is the Universal Video Player that enables hundreds of leading payTV
and OTT service providers, broadcasters, and publishers worldwide. Through its
feature-rich SDKs and wide video ecosystem pre-integrations, THEO enables video
service providers to quickly bring a consistent video playback experience across any
device or platform. “
Slide 12
Slide 12 text
THEOplayerの特徴
THEOplayerで何ができるの？
Slide 13
Slide 13 text
特徴
● GUI ベースでの SDK の生成
● 豊富な環境
● 様々なカスタマイズが可能
Slide 14
Slide 14 text
豊富なバリエーション
https://www.theoplayer.com/product/theoplayer
Slide 15
Slide 15 text
実際に見ていきましょう
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
コントロールバーの追加
// Create player and setup source
var containerElement = document.querySelector('.player');
var player = new THEOplayer.Player(containerElement,
{libraryLocation :
'https://cdn.theoplayer.com/dash/theoplayer/'});
player.source = {
sources:
'//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8'
};
// THEOplayer videojs object
var videojs = THEOplayer.videojs;
// Create center controlbar
var ControlBar = videojs.getComponent('ControlBar');
var CustomCenterControlBar = videojs.extend(ControlBar, {
constructor: function (player, options) {
options.children = [];
ControlBar.call(this, player, options);
this.addClass('custom-center-controlbar');
}
});
…
// Add custom big play pause toggle to center controlbar
customCenterControlBar.addChild('CustomBigPlayToggle');
Slide 18
Slide 18 text
エラーメッセージ
var player = new THEOplayer.Player(videoContainer, {
libraryLocation:
'https://cdn.theoplayer.com/dash/theoplayer/',
ui: {
language: 'langCode',
languages: { 'langCode':
{
"Could not load the manifest file.
Make sure the source is set correctly and that CORS support is
enabled.": "Your stream is currently unavailable. Please try
again.",
"Play": "Reproducir",
"Pause": "Pausa",
...
}
}
}
});
Slide 19
Slide 19 text
Advertising
https://www.theoplayer.com/theoplayer-demo-advertisement-vast-vmap-vp
aid-and-google-ima
Slide 20
Slide 20 text
UI skinning
https://www.theoplayer.com/theoplayer-demo-ui-skinning
Slide 21
Slide 21 text
Keeping track of time
https://www.theoplayer.com/theoplayer-demo-keepi
ng-track-of-time
Slide 22
Slide 22 text
Picture in Picture
https://www.theoplayer.com/theoplayer-demo-picture-in-picture
Slide 23
Slide 23 text
Advertising
https://www.theoplayer.com/theoplayer-demo-advertisement-tester-vpaid-vast-vmap
Slide 24
Slide 24 text
Attaching custom logic to this button
https://www.theoplayer.com/theoplayer-demo-time-jump-buttons
Slide 25
Slide 25 text
他にも
Slide 26
Slide 26 text
まとめ
● 最先端のビデオを効率的にかつあらゆるデバイスで配信でき
るよう支援
● ビデオプレイヤーの実装に必要な要素を SDK として提供
● 豊富な環境、カスタマイズが可能
Slide 27
Slide 27 text
No content