JavaScriptによるvideo audio要素のコントロール入門

video要素とaudio要素
JavaScriptでvideoとaudioを
コントロール

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved.
2
映像ファイルの制御

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 3
映像の制御の方法
• HTML5の機能である「videoタグ」を利用
して、映像の再生が可能
• 制御は、JavaScriptで行うことが出来る

4
まずは
videoタグを確認

videoタグ
• 基本の記述
• 値が必要な属性
– width, height
• 値が不要な属性
– autoplay, controls, loop, muted
<video src=“ファイル名”属性></video>

ファイルフォーマットの問題
• 対応映像フォーマット（http://caniuse.com/#search=video）
– H.264（拡張子 mp4）
• IE、Safari、Chromeの最新版でサポート
– WebM（拡張子 wevm）
• Chrome、Firefox、Operaの最新版でサポート
• 問題点
– 両フォーマットに対応したブラウザは、
Chromeのみ

現実的な記述方法
• videoタグ内にsourceタグを記述
<video 属性たち・・・>
<source src=“ファイル名.mp4”>
<source src=“ファイル名.wevm”>
</video>

8
JSによる制御

コントローラを付けてみよう
• 映像の操作
– 映像ファイルの中には、再生ヘッド（のイ
メージ）が存在します。
– 再生ヘッドを制御することが、映像を制御す
ることになります。
• JSによる映像操作
– videoタグを「HTMLVideoElement」という
オブジェクトとして利用
– getElementByIdなどでオブジェクトを作成。

• 再生ヘッドの一時停止と再開
– オブジェクト.pause();
• 再生ヘッド移動を一時停止
– オブジェクト. play();
• 再生ヘッド移動を再開

11
一時停止と再生を
一つのボタンに
まとめる

12
If文と変数で
実現できます

13
この変数を
フラグと言います

• 戻る・進むなどの機能を追加する
– オブジェクト.currentTime
• 再生ヘッドの場所を知る
– オブジェクト.currentTime ＝秒
• 再生ヘッドを移動する

15
音量ON/OFF

音量設定
• 音量ON/OFF設定
– オブジェクト.muted = true もしくは false
• trueで音量OFF
• 音量の設定
– video.volume = ０～１
• ０が音量OFF、１が音量最大

17
音楽ファイルの制御

音楽の制御の方法
• HTML5の機能である「audioタグ」を利用
して、音楽ファイルの再生が可能
• 制御は、JavaScriptで行うことが出来る
• テキストのようにAudioという命令でも同
様の制御が行える

19
まずは
audioタグを確認

videoタグ
• 基本の記述
• 値の必要な属性
– src ：ファイル名指定
– preload ： none(ファイルを事前に読み込まない)
auto (ファイルを事前に読み込み)
• 値が不必要な属性
– autoplay ：自動再生
– controls ：コントローラー
– loop ：繰り返し
<auido src=“ファイル名”属性></video>

スマホの問題
• 対応フォーマット（http://caniuse.com/#search=video）
– iOS
• wav,aif,mp3,aac
– Android
• wav,mp3,ogg,aac
• 問題点
– 複数の音を同時に鳴らせない
– Androidではバージョンにより対応していない
場合がある

現実的な記述方法
• audioタグ内にsourceタグを記述
<audio 属性たち・・・>
<source src=“ファイル名.mp3”>
<source src=“ファイル名.ogg”>
</audio>

23
JSによる制御

• JSによる音楽操作
– いつものように、audioタグをオブジェクト
として利用
– getElementById などでオブジェクトを作成

音を鳴らしてみよう
• オブジェクト.pause();
– 一時停止
• オブジェクト. play();
– 再生

JavaScriptによるvideo audio要素のコントロール入門

More Related Content

Viewers also liked

More from Yossy Taka

JavaScriptによるvideo audio要素のコントロール入門