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

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2023/06 | 07
- - - - 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
Profile

yuki★hata

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

メールフォームはこちら

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