[67]「mediagroup属性」でメディア要素を同期させよう

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>はテキストトラックを埋め込む要素で、字幕などに使います。