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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2019/09 | 10
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.