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

今回は、メディア要素(<video><audio>)の共通の属性 「mediagroup属性」で、
メディア要素どうしを同期させてみます。

「mediagroup.js」を併用したほうがいいみたい

「mediagroup属性」は、今のところ Chrome が対応しています。
(IE10は未確認です。IE10のかたはサンプルで確認してみてください)

ただし、「mediagroup.js」という JavaScript を併用すると、Firefox, Safari, Opera でもいけました。「動画と動画」だけですが。
Chrome は「mediagroup属性」対応しているので、「mediagroup.js」が無くても問題なく
「動画と動画」「音声と音声」「動画と音声」の同期にちゃんと反応します。ステキです。
他のブラウザは、「mediagroup.js」によって「動画と動画」の同期だけは可能になりました。

この「mediagroup.js」は 2011年に公開されていて、あれからブラウザもかなりバージョンアップしたので、どーかなーと思ったけど普通に使えました。(こんなに経っても各ブラウザが mediagroup属性に対応していないのが、なんかアレですね…。消え行く属性なのかな? オモシロイのに。)

動画どうしを同期させてみる(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に関しては、サンプルファイルで詳細を書いてます。

サンプルはクリックで別ウィンドウで開きます。

音声どうしを同期させてみる

パーカッションだけの音声と、ボーカルだけの音声を同期再生させるなどの使い方ができそうです。
(これは先ほどの「mediagroup.js」は無関係。なので今のところ Chrome のみ対応です)

サンプルはクリックで別ウィンドウで開きます。

HTMLソースはこちら

<audio controls preload="auto" mediagroup="audiogroup">
  <source src="audio/sample.mp3" type="audio/mpeg">
  <source src="audio/sample.wav" type="audio/wav">
</audio>
<audio controls preload="auto" mediagroup="audiogroup">
  <source src="audio/sample2.mp3" type="audio/mpeg">
  <source src="audio/sample2.wav" type="audio/wav">
</audio>

動画と音声を同期させてみる

動画と音声を組み合わせられるので、これも使い方はいろいろ面白そう。
(これも「mediagroup.js」は無関係。今のところ Chrome のみ対応です)

サンプルはクリックで別ウィンドウで開きます。

サンプルでは、わかりやすいように<audio>にも controls属性を指定してコントローラを出していますが、必要ない用に思います。

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/mpeg">
  <source src="audio/sample.wav" type="audio/wav">
</audio>

次回予告

というわけで、使えればオモシロそうな「mediagroup属性」ですが、
ブラウザの対応状況が今ひとつでした。

次回は、メディア要素の子要素になる<track>を使ってみましょう。
<track>はテキストトラックを埋め込む要素で、字幕などに使います。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 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 31 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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