- 公開日
video.js で m3u8 形式の動画ファイルをブラウザで再生する

video.jsを使ってm3u8形式の動画ファイルをSafari以外のブラウザでも再生する方法を紹介します。デモページは下のボタンから。
動作環境
下記環境で(現時点の最新版での)動作を確認しています。
- Chrome
- Safari
- Opera
- Safari
※要Flash
使うJSライブラリ
- videojs/video.js
- 基本素材。動画ファイルを様々なブラウザで再生できるようにする。
- videojs/videojs-contrib-media-sources
- videoタグに動画ソースを流し込めるようにするvideo.jsプラグイン。
- W3Cのドラフト仕様Media Source Extensionsが元のよう。
- videojs/videojs-contrib-hls
- HLS(
m3u8
)形式の動画ファイルを再生可能にするvideo.jsプラグイン。 - HLSに対応していないブラウザでもFlash技術を通すことで再生可能にしているよう。
- HLS(
Usage
全体HTMLファイルはこんな感じ。<!DOCTYPE html>
<html>
<head>
<title>Video.js m3u8</title>
<link href="css/video-js.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/4.12.5/video.js"></script>
<script src="js/videojs-media-sources.js"></script>
<script src="js/videojs.hls.min.js"></script>
</head>
<body>
<h1>Video.js m3u8 demo page</h1>
<video id="test" class="video-js vjs-default-skin" height="300" width="600" controls>
<source src="//solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('test');
player.play();
</script>
</body>
</html>
CSS/JS読み込み
video.js, videojs-media-sources.js, videojs.hls.js 以外にもCSSを読み込まないとエラーが出て再生できなかったのでCSSも読み込むこと。<link href="css/video-js.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/4.12.5/video.js"></script>
<script src="js/videojs-media-sources.js"></script>
<script src="js/videojs.hls.min.js"></script>
videoタグ
適当なクラスを持った<video>
をタグにheight
, width
を定義してやって、中にtype="application/x-mpegURL"
とsrc
を持った<source>
タグを入れてやる。<video id="test" class="video-js vjs-default-skin" height="300" width="600" controls>
<source src="//solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8" type="application/x-mpegURL" />
</video>
JavaScript
videojs()
内にvideoタグのIDでplayerを生成してplay。var player = videojs('test');
player.play();
最後に
クロスオリジンな動画リソースを読み込むときは CORS(Cross-Origin Resource Sharing) の設定を適切にしてやる必要があることに注意!
追記
本記事を参考に書かれた下記の記事も参考になるかもしれません。