Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
Search
yud0uhu
September 05, 2025
Technology
0
270
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
フロントエンドカンファレンス北海道2025(
https://www.frontend-conf.jp/
) のLT登壇資料です。
yud0uhu
September 05, 2025
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
680
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
330
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.6k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.9k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.9k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
1k
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
200
ブログを自作した話
yud0uhu
1
33
Other Decks in Technology
See All in Technology
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.2k
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
550
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
530
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
280
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
110
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
130
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
170
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Documentation Writing (for coders)
carmenintech
75
5.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Scaling GitHub
holman
463
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Music & Morning Musume
bryan
46
6.8k
Transcript
フロントエンドカンファレンス北海道2025 2025/09/06(Sat) Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
0yu(おゆ) 合同会社DMM.com Webフロントエンドエンジニア(新卒3年 目) 好きなもの ☞ 推理小説、映画、アニメ、 マーダーミステリー、洋酒 自己紹介 @yud0uhu
@yud0uhu
動画再生を支える基盤技術
動画再生を支える基盤技術(ABR/MSE/EME) 動画再生を支える基盤技術 ABR(Adaptive Bit Rate) MSE(Media Source Extensions) EME(Encrypted Media
Extensions)
動画再生を支える基盤技術(ABR/MSE/EME) 動画再生を支える基盤技術(ABR ) /MSE/EME ABR(Adaptive Bit Rate) ユーザーの回線環境に最適化したビットレート(=ストリーム)を提供する
動画再生を支える基盤技術(ABR/MSE/EME) 動画再生を支える基盤技術( MSE ) ABR/ /EME MSE(Media Source Extensions) W3Cによって標準化されているWeb
API。 動画データを短いセグメントに分割して読み込み、それをHTMLの<video>要 素に渡すことで、ストリーミング再生を実現する ABRをサポートする
動画再生を支える基盤技術(ABR/MSE/EME) 動画再生を支える基盤技術( MSE ) ABR/ /EME 動画データを分割したセグメント(バイナ リデータ)を、ブラウザ内のMediaSource オブジェクトのSourceBufferと呼ばれる領 域にappendBuffer()する
これがHTMLの<video>要素に渡される
動画再生を支える基盤技術(ABR/MSE/EME) 動画再生を支える基盤技術( EME) ABR/MSE/ EME(Encrypted Media Extensions) W3Cによって標準化されているWeb API。 保護されたコンテンツ(DRM:デジタル著作権管理)の再生を制御する
動画再生を支える技術(ABR/MSE/EME) 動画再生を支える基盤技術( EME) ABR/MSE/ EME(Encrypted Media Extensions) W3Cによって標準化されているWeb API。 保護されたコンテンツ(DRM:デジタル著作権管理)の再生を制御する
DMM TVでは、配信コンテンツに対する保護要件が指定されている場合があり 暗号化された音声や動画を安全に取り扱う技術が不可欠となる
動画再生を支える基盤技術(Shaka Player) Shaka Playerとは? Google謹製のHTML5ベースのWebプレイヤーライブラリ(OSS) https://github.com/shaka-project/shaka-playerhttps:// github.com/shaka-project/shaka-player
動画再生を支える基盤技術(Shaka Player) Shaka Playerとは?
動画再生を支える基盤技術(Shaka Player) Shaka Playerを用いて動画を再生するまで
動画再生を支える基盤技術(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!'
動画再生を支える基盤技術(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!'
動画再生を支える基盤技術(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!'
動画再生を支える基盤技術(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!'
動画再生を支える基盤技術(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();
動画再生を支える基盤技術(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
動画再生を支える基盤技術(Shaka Player) Shaka Playerを用いて動画を再生するまで 1 document. ( , initApp); addEventListener
'DOMContentLoaded'
動画再生を支える基盤技術 DMM TVとShaka Player DMM TVには、オンデマンド、ライブ、コメント付きライブの三種類の再 生形式を提供している これらを再生するために、Shaka Playerを基盤として独自の再生プレイ ヤーを開発・運用している
動画再生を支える基盤技術 ここまでのまとめ ブラウザで動画を安全に、遅延なく再生する技術がABR/MSE/EME これらを抽象化して扱えるようにしたライブラリがShaka Player DMM TVはプロダクトの持つ多様なニーズに対応するため、Shaka Player を基盤とした独自の動画配信プレイヤーを運用している
動画再生を支える基盤技術 ここまでのまとめ ブラウザで動画を安全に、遅延なく再生する技術がABR/MSE/EME これらを抽象化して扱えるようにしたライブラリがShaka Player DMM TVはプロダクトの持つ多様なニーズに対応するため、Shaka Player を基盤とした独自の動画配信プレイヤーを運用している <<ここまでのお話が気になる方へ>>
今日からできる! 動画配信基盤システム構築(CodeZine) https://codezine.jp/article/corner/1002
プレイヤーリプレイスで行ったこと
プレイヤーリプレイスで行ったこと (そもそも)プレイヤーリプレイスのモチベーション “動画配信”サービスにおける”再生プレイヤー”の性能 ユーザーの体験に直結
プレイヤーリプレイスで行ったこと プレイヤーリプレイスで行ったこと 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の共通化→一つのカスタムフックとして まとめて分離・統一
プレイヤーリプレイスで行ったこと プレイヤーリプレイスで行ったこと 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の共通化→一つのカスタムフックとして まとめて分離・統一
ライブラリバージョンアップで 発生した課題
ライブラリバージョンアップで発生した課題 ライブラリバージョンアップで発生した課題 発生した事象① 特定の再生環境・デバイスで著作権保護コンテンツが再生できない Windows/Edgeのみで発生 Shaka Player 4.13系のバグ https://github.com/shaka-project/shaka-player/issues/8066 https://github.com/shaka-project/shaka-player/pull/8067
ライブラリバージョンアップで発生した課題 ライブラリバージョンアップで発生した課題 発生した事象② 特定の再生環境・デバイスで最大画質が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
グローバルの状態管理が抱える課題
グローバルの状態管理が抱える課題 プレイヤーリプレイスで行ったこと 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へ
グローバルの状態管理が抱える課題 Apollo Clientとは? https://www.apollographql.com/docs/react GraphQLを使用してデータをフェッチする仕組みと、取得したデータの状 態を管理するキャッシュ機構が一体化したライブラリ
グローバルの状態管理が抱える課題 Apollo Clientとは? GraphQL からフェッチしたデータは InMemoryCache に保存される Apollo Client の提供するフック(useQueryなど)を使うことで、Reactコ
ンポーネントは InMemoryCache 内のデータにリアクティブにアクセスで きる InMemoryCache 内のデータが Mutation によって変更されると、Apollo Client はそのデータを使用しているすべてのコンポーネントを自動的に再 レンダリングする InMemoryCache は、ローカルのアプリケーションの状態(UIの状態な ど)も管理できる
グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか DMM TVは前提として、 求められる仕様が多く、複雑性が高いサービス
グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか どこからでも使える どこからでも呼び出せる どこからでも値の状態の変更ができる
グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか どこからでも使える どこからでも呼び出せる どこからでも値の状態の変更ができる
グローバルの状態管理が抱える課題 どのような状態管理ライブラリが好ましいのか どこからでも使える どこからでも呼び出せる どこからでも値の状態の変更ができる の逆が好ましい かつ、再レンダリングを抑えられて ナレッジが潤沢にあり、ベストプラクティスがある
Reduxを使うモチベーション
Reduxを使うモチベーション Reduxを使うモチベーション アプリケーションの状態がいつ、どこで、なぜ、どのように更新される かがわかりやすい 再レンダリングを抑えられる ナレッジが潤沢 ベストプラクティス(Redux Style Guide)がある
Reduxを使うモチベーション Reduxを使うモチベーション
リプレイス前後のパフォーマンス
リプレイス前後のパフォーマンス リプレイス前後のパフォーマンス リプレイス前後で平均再生速度が体感20〜30%程度高速化 通常再生時:2.6s→ 再読み込み時:4.0s→ 2.0s 3.0s
リプレイス前後のパフォーマンス リプレイス前後のパフォーマンス 計測環境 使用OS:Windows 10 Pro ブラウザ:Google chrome(バージョン: 121.0.6167.185(Official Build)
(64 ビット)) 計測回数は5回操作を行った平均値
まとめ
まとめ まとめ 動画配信サービスには、ABR/MSE/EMEという基盤技術が存在する Shaka Playerは、これらを包括的に利用できるライブラリ DMM TVでは、Shaka Playerを基盤とした独自の動画配信プレイヤーを運 用している 「動画配信サービスの再生プレイヤー」の性能=ユーザー体験に直結する
そのため、堅牢化とパフォーマンス改善を目的としたリプレイスを行った グローバル状態管理ライブラリの刷新 Shaka Playerのアップデート リプレイスの結果、体感20〜30%程度の高速化が実現できた
Thank you!