comfortable_video_creation_THEOplayer.pdf

Transcript

1. THEOplayerで 快適な動画作成を きだぱん 2023.01.11 クラスメソッド株式会社 アライアンス統括部
2. 本日のお品書き 1.　自己紹介 2.　THEOplayerとは 3.　THEOplayerの特徴 4.　デモ 5.　まとめ
3. 自己紹介 3 https://dev.classmethod.jp/author/kidapan/ きだ まいこ ／きだぱん • クラスメソッド株式会社 アライアンス統括部 テクニカルグループ • 担当：DevOps製品 • 特性：ジャニーズ大好き おまめ 1歳 (人間で約36歳)
4. 最初に YouTuberになってみたい。。。 そう思ったことは、ありませんか？
5. THEOplayer
6. THEOplayerとは THEOplayerって、なんだろう
7. THEOplayerとは THEO Technologies https://www.theoplayer.com/about-us live “ MAKING STREAMING BETTER THAN BROADCAST “
8. THEOlive 大規模配信対応のリアルタイム動画 API • 1 秒以内の低遅延 • API ファーストな設計 • 高いスケーラブル性能
9. ゲームのストリーミング、YouTube を観る、動画を見る機会が増えている昨今。。。 視聴者は最高のコンテンツ(品質、内容) ◦ スマートフォンやパソコンなどの身近にあるスマートデバイスを含めた 様々なデバイスにも対応可能な性能を求める 動画ファイルを視聴者へ再生、見せるための機能が必要 ◦ スライド連携、視聴ログ、カスタマイズ機能、広告、配信方法 サービスに合わせたオリジナル動画プレイヤー
10. THEOplayer
11. 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. “
12. THEOplayerの特徴 THEOplayerで何ができるの？
13. 特徴 • GUI ベースでの SDK の生成 • 豊富な環境 • 様々なカスタマイズが可能
14. 豊富なバリエーション https://www.theoplayer.com/product/theoplayer
15. 実際に見ていきましょう
17. コントロールバーの追加 // 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');
18. エラーメッセージ 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", ... } } } });
19. Advertising https://www.theoplayer.com/theoplayer-demo-advertisement-vast-vmap-vp aid-and-google-ima
20. UI skinning https://www.theoplayer.com/theoplayer-demo-ui-skinning
21. Keeping track of time https://www.theoplayer.com/theoplayer-demo-keepi ng-track-of-time
22. Picture in Picture https://www.theoplayer.com/theoplayer-demo-picture-in-picture
23. Advertising https://www.theoplayer.com/theoplayer-demo-advertisement-tester-vpaid-vast-vmap
24. Attaching custom logic to this button https://www.theoplayer.com/theoplayer-demo-time-jump-buttons
25. 他にも
26. まとめ • 最先端のビデオを効率的にかつあらゆるデバイスで配信でき るよう支援 • ビデオプレイヤーの実装に必要な要素を SDK として提供 • 豊富な環境、カスタマイズが可能