Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び

フロントエンドカンファレンス北海道2025（https://www.frontend-conf.jp/） のLT登壇資料です。

Transcript

1. フロントエンドカンファレンス北海道2025 2025/09/06(Sat) Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
2. 0yu（おゆ） 合同会社DMM.com Webフロントエンドエンジニア（新卒3年 目） 好きなもの ☞ 推理小説、映画、アニメ、 マーダーミステリー、洋酒 自己紹介 @yud0uhu @yud0uhu
3. 動画再生を支える基盤技術
4. 動画再生を支える基盤技術（ABR/MSE/EME） 動画再生を支える基盤技術 ABR（Adaptive Bit Rate） MSE（Media Source Extensions） EME（Encrypted Media Extensions）
5. 動画再生を支える基盤技術（ABR/MSE/EME） 動画再生を支える基盤技術（ABR ） /MSE/EME ABR（Adaptive Bit Rate） ユーザーの回線環境に最適化したビットレート（=ストリーム）を提供する
6. 動画再生を支える基盤技術（ABR/MSE/EME） 動画再生を支える基盤技術（ MSE ） ABR/ /EME MSE（Media Source Extensions） W3Cによって標準化されているWeb API。 動画データを短いセグメントに分割して読み込み、それをHTMLの<video>要 素に渡すことで、ストリーミング再生を実現する ABRをサポートする
7. 動画再生を支える基盤技術（ABR/MSE/EME） 動画再生を支える基盤技術（ MSE ） ABR/ /EME 動画データを分割したセグメント（バイナ リデータ）を、ブラウザ内のMediaSource オブジェクトのSourceBufferと呼ばれる領 域にappendBuffer()する これがHTMLの<video>要素に渡される
8. 動画再生を支える基盤技術（ABR/MSE/EME） 動画再生を支える基盤技術（ EME） ABR/MSE/ EME（Encrypted Media Extensions） W3Cによって標準化されているWeb API。 保護されたコンテンツ（DRM：デジタル著作権管理）の再生を制御する
9. 動画再生を支える技術（ABR/MSE/EME） 動画再生を支える基盤技術（ EME） ABR/MSE/ EME（Encrypted Media Extensions） W3Cによって標準化されているWeb API。 保護されたコンテンツ（DRM：デジタル著作権管理）の再生を制御する DMM TVでは、配信コンテンツに対する保護要件が指定されている場合があり 暗号化された音声や動画を安全に取り扱う技術が不可欠となる
10. 動画再生を支える基盤技術（Shaka Player） Shaka Playerとは？ Google謹製のHTML5ベースのWebプレイヤーライブラリ（OSS） https://github.com/shaka-project/shaka-playerhttps:// github.com/shaka-project/shaka-player
11. 動画再生を支える基盤技術（Shaka Player） Shaka Playerとは？
12. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで
13. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 2 3 4 5 6 7 8 9 function if else () { shaka.polyfill. (); (shaka.Player. ()) { (); } { . ( ); } } initApp installAll isBrowserSupported initPlayer error console 'Browser not supported!'
14. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 2 3 4 5 6 7 8 9 function if else () { shaka.polyfill. (); (shaka.Player. ()) { (); } { . ( ); } } initApp installAll isBrowserSupported initPlayer error console 'Browser not supported!'
15. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 2 3 4 5 6 7 8 9 function if else () { shaka.polyfill. (); (shaka.Player. ()) { (); } { . ( ); } } initApp installAll isBrowserSupported initPlayer error console 'Browser not supported!'
16. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 2 3 4 5 6 7 8 9 function if else () { shaka.polyfill. (); (shaka.Player. ()) { (); } { . ( ); } } initApp installAll isBrowserSupported initPlayer error console 'Browser not supported!'
17. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 2 3 4 5 6 7 8 9 async function const const new await () { video document. ( ); player shaka. (); player. (video); initPlayer getElementById Player attach = = 'video' // v4.6 からコンストラクタ引数が非推奨になった。 // new shaka.Player(video)  // player = new shaka.Player();
18. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 2 3 4 5 6 7 8 9 10 window.player player; player. ( , onErrorEvent); { player. (manifestUri); . ( ); } (e) { (e); } = console addEventListener load log onError 'error' 'The video has now been loaded!' try await catch
19. 動画再生を支える基盤技術（Shaka Player） Shaka Playerを用いて動画を再生するまで 1 document. ( , initApp); addEventListener 'DOMContentLoaded'
20. 動画再生を支える基盤技術 DMM TVとShaka Player DMM TVには、オンデマンド、ライブ、コメント付きライブの三種類の再 生形式を提供している これらを再生するために、Shaka Playerを基盤として独自の再生プレイ ヤーを開発・運用している
21. 動画再生を支える基盤技術 ここまでのまとめ ブラウザで動画を安全に、遅延なく再生する技術がABR/MSE/EME これらを抽象化して扱えるようにしたライブラリがShaka Player DMM TVはプロダクトの持つ多様なニーズに対応するため、Shaka Player を基盤とした独自の動画配信プレイヤーを運用している
22. 動画再生を支える基盤技術 ここまでのまとめ ブラウザで動画を安全に、遅延なく再生する技術がABR/MSE/EME これらを抽象化して扱えるようにしたライブラリがShaka Player DMM TVはプロダクトの持つ多様なニーズに対応するため、Shaka Player を基盤とした独自の動画配信プレイヤーを運用している <<ここまでのお話が気になる方へ>> 今日からできる！ 動画配信基盤システム構築（CodeZine） https://codezine.jp/article/corner/1002
23. プレイヤーリプレイスで行ったこと
24. プレイヤーリプレイスで行ったこと （そもそも）プレイヤーリプレイスのモチベーション “動画配信”サービスにおける”再生プレイヤー”の性能 ユーザーの体験に直結
25. プレイヤーリプレイスで行ったこと プレイヤーリプレイスで行ったこと Shaka Playerのメジャーバージョンアップ 3系→4系へ グローバル状態ライブラリの移行 Apollo Client→Reduxへ Emotion（CSS in JS）→ Tailwind CSS への移行 詳細はDMM TV Web速度改善の道 〜Tailwind CSS移行編〜 next/dynamic→ dynamic import（JSの標準動的インポート）へ移行 複数のhooksに分散したuseEffectの共通化→一つのカスタムフックとして まとめて分離・統一
26. プレイヤーリプレイスで行ったこと プレイヤーリプレイスで行ったこと Shaka Playerのメジャーバージョンアップ 3系→4系へ グローバル状態ライブラリの移行 Apollo Client→Reduxへ Emotion（CSS in JS）→ Tailwind CSS への移行 詳細はDMM TV Web速度改善の道 〜Tailwind CSS移行編〜 next/dynamic→ dynamic import（JSの標準動的インポート）へ移行 複数のhooksに分散したuseEffectの共通化→一つのカスタムフックとして まとめて分離・統一
27. 　 ライブラリバージョンアップで 発生した課題
28. ライブラリバージョンアップで発生した課題 ライブラリバージョンアップで発生した課題 発生した事象① 特定の再生環境・デバイスで著作権保護コンテンツが再生できない Windows/Edgeのみで発生 Shaka Player 4.13系のバグ https://github.com/shaka-project/shaka-player/issues/8066 https://github.com/shaka-project/shaka-player/pull/8067
29. ライブラリバージョンアップで発生した課題 ライブラリバージョンアップで発生した課題 発生した事象② 特定の再生環境・デバイスで最大画質が1080p→720pに落ちてしまう Windows/Edgeのみで発生 Shaka Player 4.14系のバグ https://github.com/shaka-project/shaka-player/issues/8478 https://github.com/shaka-project/shaka-player/pull/8585
30. グローバルの状態管理が抱える課題
31. グローバルの状態管理が抱える課題 プレイヤーリプレイスで行ったこと Shaka Playerのメジャーバージョンアップ 3系→4系へ Emotion（CSS in JS）→ Tailwind CSS への移行 詳細はDMM TV Web速度改善の道 〜Tailwind CSS移行編〜 next/dynamic→ dynamic import（JSの標準動的インポート）へ移行 複数のhooksに分散したuseEffectの共通化→一つのカスタムフックとして まとめて分離・統一 グローバル状態ライブラリの移行 Apollo Client→Reduxへ
32. グローバルの状態管理が抱える課題 Apollo Clientとは？ https://www.apollographql.com/docs/react GraphQLを使用してデータをフェッチする仕組みと、取得したデータの状 態を管理するキャッシュ機構が一体化したライブラリ
33. グローバルの状態管理が抱える課題 Apollo Clientとは？ GraphQL からフェッチしたデータは InMemoryCache に保存される Apollo Client の提供するフック（useQueryなど）を使うことで、Reactコ ンポーネントは InMemoryCache 内のデータにリアクティブにアクセスで きる InMemoryCache 内のデータが Mutation によって変更されると、Apollo Client はそのデータを使用しているすべてのコンポーネントを自動的に再 レンダリングする InMemoryCache は、ローカルのアプリケーションの状態（UIの状態な ど）も管理できる
34. グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか DMM TVは前提として、 求められる仕様が多く、複雑性が高いサービス
35. グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか どこからでも使える どこからでも呼び出せる どこからでも値の状態の変更ができる
36. グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか どこからでも使える どこからでも呼び出せる どこからでも値の状態の変更ができる
37. グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか どこからでも使える どこからでも呼び出せる どこからでも値の状態の変更ができる の逆が好ましい かつ、再レンダリングを抑えられて ナレッジが潤沢にあり、ベストプラクティスがある
38. Reduxを使うモチベーション
39. Reduxを使うモチベーション Reduxを使うモチベーション アプリケーションの状態がいつ、どこで、なぜ、どのように更新される かがわかりやすい 再レンダリングを抑えられる ナレッジが潤沢 ベストプラクティス（Redux Style Guide）がある
40. Reduxを使うモチベーション Reduxを使うモチベーション
41. リプレイス前後のパフォーマンス
42. リプレイス前後のパフォーマンス リプレイス前後のパフォーマンス リプレイス前後で平均再生速度が体感20〜30%程度高速化 通常再生時：2.6s→ 再読み込み時：4.0s→ 2.0s 3.0s
43. リプレイス前後のパフォーマンス リプレイス前後のパフォーマンス 計測環境 使用OS：Windows 10 Pro ブラウザ：Google chrome(バージョン: 121.0.6167.185（Official Build） （64 ビット）) 計測回数は5回操作を行った平均値
44. まとめ
45. まとめ まとめ 動画配信サービスには、ABR／MSE／EMEという基盤技術が存在する Shaka Playerは、これらを包括的に利用できるライブラリ DMM TVでは、Shaka Playerを基盤とした独自の動画配信プレイヤーを運 用している 「動画配信サービスの再生プレイヤー」の性能=ユーザー体験に直結する そのため、堅牢化とパフォーマンス改善を目的としたリプレイスを行った グローバル状態管理ライブラリの刷新 Shaka Playerのアップデート リプレイスの結果、体感20〜30%程度の高速化が実現できた
46. Thank you!