[67]「mediagroup属性」でメディア要素を同期させよう
最終更新日:2019年01月30日 (初回投稿日:2014年01月17日)
mediagroup属性は、HTML5.1で削除されました。
現在どのブラウザも実装していませんのでご注意ください。
この記事とサンプルファイルでは、今でも一応使える「mediagroup.js」を併用していますので、その部分を中心に残しておきます。(2019年1月記)
メディア要素(<video> と <audio>)の共通の属性 mediagroup属性は、「メディア要素どうしを同期」ができる属性です。
「mediagroup.js」を併用したほうがいいみたい
「mediagroup属性」は、Chrome が対応しています。(2014年1月)
ただし、「mediagroup.js」という JavaScript を併用すると、Firefox, Safari, Opera でも「動画と動画」の同期だけは可能になりました。
動画どうしを同期させてみる(mediagroup.js 併用)
「動画と動画」を同期させてみます。
これは、例えばメイン動画に対して、手話などの解説動画を組み合わせるとかが目的だそうです。
このサンプルでは「mediagroup.js」を併用して、Chrome 以外のブラウザにも対応させています。
サンプルはクリックで別ウィンドウで開きます。
まずは、GitHub サイトから「mediagroup.js」をダウンロードします。
このサイトの右カラムの Download ZIP からダウンロードすると、テストファイル一式があります。
jsファイルはいろいろ入っていますが、その中の「mediagroup.js」だけ使いました。
HTMLはこちら
<!--まず「mediagroup.js」を読み込んでおく-->
<script src="js/mediagroup.js"></script>
<!--↓以下 body内。mediagroupの値を同じにすればグループ-->
<video width="320" height="180" preload="auto" controls mediagroup="videogroup">
<source src="uchiage.webm" type="video/webm">
<source src="uchiage.mp4" type="video/mp4">
</video>
<video width="320" height="180" preload="auto" mediagroup="videogroup">
<source src="uchiage.webm" type="video/webm">
<source src="uchiage.mp4" type="video/mp4">
</video>
「動画 in 動画」にしてみた(CSS使用)
上のサンプルは動画をただ横に並べただけですが、 CSSを使って「動画 in 動画」にすることもできます。こっちのほうが、メインとサブがはっきりして分かりやすいですね。
CSSに関しては、サンプルファイルで詳細を書いてます。
サンプルはクリックで別ウィンドウで開きます。
音声どうしを同期させてみる
<audio>要素も同期させられるはずですが、今のところ Chrome のみ対応でした。
(2014年1月)
(これは先ほどの「mediagroup.js」は無関係です)
サンプルはクリックで別ウィンドウで開きます。
HTMLはこちら
<audio controls preload="auto" mediagroup="audiogroup">
<source src="audio/sample.mp3" type="audio/mp3">
<source src="audio/sample.wav" type="audio/wav">
</audio>
<audio controls preload="auto" mediagroup="audiogroup">
<source src="audio/sample2.mp3" type="audio/mp3">
<source src="audio/sample2.wav" type="audio/wav">
</audio>
動画と音声を同期させてみる
<audio>と<video>要素の組み合わせでも同期させられるはずですが、今のところ Chrome のみ対応でした。(2014年1月)
(これも「mediagroup.js」は無関係)
サンプルはクリックで別ウィンドウで開きます。
HTMLはこちら
<video controls preload="auto" mediagroup="vagroup" width="640" height="360">
<source src="uchiage.webm" type="video/webm">
<source src="uchiage.mp4" type="video/mp4">
<audio controls preload="auto" mediagroup="vagroup">
<source src="audio/sample.mp3" type="audio/mp3">
<source src="audio/sample.wav" type="audio/wav">
</audio>
次回予告
次回は、メディア要素の子要素になる<track>を使ってみましょう。
<track>はテキストトラックを埋め込む要素で、字幕などに使います。
- 関連記事
-
- [69-6] Canvasにマウスの動きに合わせて描画しよう (クリックやマウスムーブとの組み合わせと Math.random)
- [69-5] Canvasにグラデーションやパターン、シャドウを指定しよう
- [69-4] Canvasに画像を描画しよう(トリミングやクリッピングも)
- [69-3] Canvasに曲線を描こう(線のスタイルも)
- [69-2] Canvasに基本的な図形を描こう
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク