HTML5 Audio and Video
カテゴリー： PC一般
20Nov2014
<audio> および <video> を用いたマルチメディアコンテンツの埋め込み
HTML5 では <audio> 要素および <video> 要素を使用して、HTML スクリプトへ簡単にマルチメディアコンテンツを埋め込むことが可能です。プラグインを必要とせず、画像の埋め込みのようにファイル・ソースを指定するだけで済みます。下記 HTML スクリプト参照。
<!DOCTYPE html>
<html>
<head>
<title>html5 test</title>
</head>
<body>
<audio src="audio-source.mp3" controls>
</audio>
<br><br>
<video src="video-source.mp4" controls>
</video>
</body>
</html>
上記 HTML スクリプトは HTML5 の doctype 宣言になっていますが、HTML4.01 の doctype 宣言でも XHTML1.0 の doctype 宣言でも同じ結果が得られます。
HTML5 Audio and Video の制約
上記のようにシンプルな方法ですが、実際に試行してみると大きな制約に行き当たります。
- まだ全てのブラウザが HTML5 に対応している訳ではない事。IE（インターネット・エクスプローラー）を例にとると、IE9 以降は対応しているがそれ以前は対応していない。また対応している場合でも全てのマルチメディア形式に対応している訳ではない。
- コントローラのデザインはブラウザが備えているものに限定される。かつブラウザによってまちまち。中には見るに耐えないデザインもある。
ということで HTML5 Audio and Video のコンセプトは優れていますが、実用上はまだ時期尚早ということになりそうです。そのように結論しようとしていた時に見つけたのが MediaElement.js という API です。
MediaElement.js
MediaElement.js のうたい文句は HTML5 に対応していないブラウザやマルチメディア形式を従来の Flash や Silverlight で補って HTML5 Audio and Video のコンセプトを実現しようとするものです。かつ UI（コントローラ）も統一されていて、スタイルシートで変更できます。実際に使用してみて優れものと思いました。以下その紹介です。
ダウンロード
mediaelement.js サイト http://mediaelementjs.com/ からダウンロードします。20Nov2014 現在 2.16.2 が最新バージョン。解凍すると johndyer-mediaelement-c4dae2f というフォールダが出来ますが、フォールダ名を mediaelement に変えてフォールダごとアップロードします。
mediaelement ⇒ demo の中にサンプル（html ファイル）が収録されているので、それを参考にし、また mediaelement.js サイトの解説を参考にして実装してみました。
<audio>の実装
これはサンプルの中にある mediaelementplayer-audio.html がそのまま使えました。
audio.html スクリプト audio.html デモ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>
<script src="mediaelement/build/jquery.js"></script>
<script src="mediaelement/build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelement/build/mediaelementplayer.min.css" />
</head>
<body>
<h1>MediaElementPlayer.js</h1>
<p>Audio player</p>
<h2>MP3</h2>
<!-- audio tag -->
<audio id="player2" src="mediaelement/media/furusato.mp3" type="audio/mp3" controls="controls">
</audio>
<!-- script tag -->
<script>
$('audio,video').mediaelementplayer();
</script>
</body>
</html>
<video>の実装
これはサンプルの中にある mediaelementplayer.html を参考にしました。このサンプルは default と称されていて 1. Single MP4 File と 2. Multi-Codec with no JavaScript fallback player が入っています。JavaScript を前提にした 1. が基本になると思われます。それを抽出し多少変更を加えました。
video.html スクリプト video.html デモ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>
<script src="mediaelement/build/jquery.js"></script>
<script src="mediaelement/build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelement/build/mediaelementplayer.min.css" />
</head>
<body>
<h1>MediaElementPlayer.js</h1>
<h2>Single MP4 File</h2>
<!-- video tag -->
<video width="640" height="360" style="vertical-align:top" src="mediaelement/media/big_buck_bunny.mp4" type="video/mp4"
poster="mediaelement/media/big_buck_bunny.jpg"
controls="controls" preload="none"></video>
<!-- script tag -->
<script>
$('audio,video').mediaelementplayer({
alwaysShowControls: true,
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
</body>
</html>
元のスクリプト（mediaelementplayer.html）は mode の表示がありますが、それを省きました。また alwaysShowControls: true, のところは mediaelement.js サイトにある Player Options メニューからピックアップしました。true を false に変えればマウスがプレーヤーに触れた時だけコントロールバーが表示されます。
その他の実装例
mediaelement ⇒ demo には色々な実装例があり、目的に応じて参考にすることが出来ます。ただダウンロードから得られたままの demo は少し雑なところがあり media ファイルも折角魅力的なサンプルを用意していながらそれを使っていません。そこで少し整備してみました。その他の実装例を検討する時は こちら を参照されることをおすすめします。
CSS の編集
MediaElement.js では UI（コントローラ）が統一されていて、スタイルシートを編集して変更できます。ただし編集用のツールが用意されている訳ではなく、デフォルトのスタイルシートを解読して編集することになります。
些細な変更ですが試してみました（進捗を示すインディケーターの背景色をブルーからグレーに変えたただけ）。比較してみて下さい。
オリジナルのコントロールバー
変更したコントロールバー
以上で MediaElement.js の紹介は終わりです。
|