Media source
MSE (Media Source Extensions) は JavaScript からメディアデータを動的にバッファリングし、<video> や <audio> に提供するAPIです。適応ストリーミングに使用します。
概要
MSE (Media Source Extensions) は JavaScript からメディアデータを動的にバッファリングし、<video> や <audio> に提供するAPIです。適応ストリーミングに使用します。
対応ブラウザ
デスクトップ
Chrome 31+
Edge 12+
Safari 8+
Firefox 42+
モバイル
Chrome Android 31+
Safari iOS 未対応
Firefox Android 41+
基本構文
JAVASCRIPT
const video = document.querySelector('video');
const ms = new MediaSource();
video.src = URL.createObjectURL(ms);
ms.addEventListener('sourceopen', () => {
const sb = ms.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
fetch('segment.mp4').then(r => r.arrayBuffer()).then(buf => sb.appendBuffer(buf));
});実務での使いどころ
-
Media source の活用
Media Source Extensions。JavaScriptでメディアストリームを動的に構築するAPI。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。