MediaElement – Mach3.laBlog https://blog.mach3.jp Sat, 21 Dec 2013 01:10:28 +0000 ja hourly 1 https://wordpress.org/?v=6.9 "Video" – Alphabetical Advent Calendar 2013 https://blog.mach3.jp/2013/12/21/jaac2013-v-video.html Sat, 21 Dec 2013 01:10:28 +0000 http://blog.mach3.jp/?p=3778 “V” は video の “V”。

V

Video

古くは Flash だったり wmv だったりしたWeb上での動画ファイルの再生も、 最近では HTML5 で追加された video 要素のおかげで統一化が図られています。 勿論IE8以下ではサポートしていないので Flash 等で対応してあげる必要がありますが、 その辺の面倒をしっかり見てくれるライブラリも公開されています。

video 要素

まずは video 要素を簡単におさらいします。

<video poster="img/poster.jpg" id="my-video" controls>
    <source src="movies/movie.mp4" type="video/mp4">
    <source src="movies/movie.webm" type="video/webm">
</video>

video 要素は source 要素をぶらさげ、形式ごとに動画ファイルを列挙していきます。 video の src 属性で指定する事もできますが、ブラウザ環境ごとに再生が出来る形式が限定されているので、 複数の形式を連ねて再生可能な形式で再生する方法が広く使われます。 どの環境でどの形式がサポートされているかは下記URLにて詳細がまとめられています。

ムービーのコントロール

video 要素の元となる HTMLMediaElement には動画の再生をコントロールするメソッドがぶら下がっているので、 それを利用して操作する事ができます。ブラウザによっては他にもメソッドも独自に実装されている事があります。

var video = document.getElementById("#my-video");
...
video.load(); // ビデオのロード
video.play(); // 再生
video.pause(); // 停止

ムービーのシーク

動画の指定した時間へのジャンプは currentTime プロパティの値を変更する事で可能です。 currentTime プロパティは通常の呼び出しでは現在の再生位置を返しますが、 値を指定する事でその再生位置にジャンプする事が出来ます。

video.currentTime; // 12.345 など（再生位置を秒で返す）
video.currentTime = 30; // 30秒の位置に移動する

しかし、currentTime に代入してシークを行おうとした場合にエラーが発生する場合があります。

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

これは動画ファイルの情報がまだ利用可能でない為起こる様です。 他の外部リソース同様にメタ情報のロードを待つ必要がありますね。

video.addEventListener("loadedmetadata", function(e){
    e.target.currentTime = 30;
}, false);

この他にも多くのプロパティが実装されているので、 JavaScript でさらに進んだ処理をしたい時は W3Cのページ を訪れてみましょう。

ビデオプレイヤーライブラリ

限られた環境で動画を再生するだけならば素のまま使えば良いのですが、 やはりどうしてもレガシーな環境に対応しなければならない時があります。 面倒な部分は優秀なライブラリにお願いしてしまいましょう。

Video.js

http://www.videojs.com/

Video.js は Flash をフォールバックに使用しているプレイヤーライブラリです。 スタイルシートとJavaScriptファイルを読み込み、video 属性に専用のクラスを指定して使用します。

<video id="my-video" class="video-js vjs-default-skin"> ... </video>
<script>
var player = videojs("my-video", { /* options */ });
</script>

プレイヤーに好みのスキンを着せる事が出来るのが特徴で、 ブラウザ上でプレビューを確認しながらスキンを編集出来るツールも公開しています。 スタイルの編集は Less で行う事ができます。

Video.js の API は、 イベント・メソッドの名前や仕様などが MediaElement API に倣った形になっています。

player.on("loadedmetadata", function(){ ... }); // on メソッドでイベントの設定
player.play(); // 再生

MediaElement.js

http://mediaelementjs.com/

MediaElement.js は、Flash や Silverlight のプレイヤーを使い、 古いブラウザでも HTML5 の MediaElement の API を使用出来るように振る舞ってくれます。 多くのCMS向けのプラグインが公開されており、WordPress はコアにバンドルされているそうです。 動作には jQuery が必要です。

<video id="my-video"> ... </video>
<script>
    var player = new MediaElementPlayer("#my-video", /* options */);
    // あるいは
    var $media = $("#my-video").mediaelementplayer({ /* options */ });
</script>

プレイヤーの初期化は MediaElementPlayer から生成するか、 $.fn.mediaelementplayer を使用して行います。 それぞれ返り値が違うので注意しましょう。

ライブラリ使用上の共通の注意

video 要素に対応していないブラウザで使用する場合は、 html5shiv や Modernizr 等で video 要素へのCSSの適用を有効化しておかなければなりません。 あるいは手作業で対応しておきましょう。

document.createElement("video");
document.createElement("audio");

また、古い環境でエミュレートしてくれるといっても、 コールするタイミングによっては使えなかったり、細かい点で本来の物と挙動が異なってしまったりします。 結局中でIE用の処理を分けざるをえない、といった状況は結構ありますので、がんばりましょう。

参考資料

]]>