スマホのHTML5で動画、音声を再生する方法

2013年05月09 01時45分

スマホのHTML5で動画、音声を再生する方法

スマホのHTML5で動画、音声を再生する方法メモ。

HTML5とJavaScriptだけで動画を再生する方法

Flashを使わずに、HTML5とJavaScriptだけで動画を再生する方法。iOS、Androidの実装の違いにはなるべく影響されない基本的な方法のみを紹介しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>

<!-- 文字のリンクにする場合 -->
<a href="movie.mp4'>動画リンク</a>
<a href="htp://www.youtube.com/watch?v=aaabbbccc">Youtube動画リンク</a>

<!-- ページ内に直接映像を埋め込む場合 -->
<video width="320" height="240" controls poster="xxx.jpg">
	<source src="movie.mp4">
	<source src="movie.ovg">
	<p>HTML5 Videoに対応したブラウザを利用してください</p>
</video>


<!-- コントロールバーなしで、映像をタップすると再生 -->
<video src="movie.mp4" width="320" height="240" onclick="this.play()"></video>

</body>
</html>

JavaScriptから基本的なイベントを利用する方法。

<script>
var video = document.getElementById("myVideo");
// 映像に再生終了時のイベントハンドラを設定
video.addEventListener("ended", function(){
	alert("再生が終了しました");
}, false);

// 映像にtimeupdateのイベントハンドラを設定
video.addEventListener("timeupdate", function(){
	document.getElementById("cTime").innerHTML = video.currentTime;
}, false);

// 再生ボタンにイベントを割り当て
video.addEventListener("click", function(){
	video.play();
}, false);
</script>

HTML5とJavaScriptだけで音声を再生する方法

Flashを使わずに、HTML5とJavaScriptだけで音声を再生する方法。iOS、Androidの実装の違いにはなるべく影響されない基本的な方法のみを紹介しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>

<!-- 一番シンプルな方法 -->
<audio controls>
	<source src="music.mp3">
	<source src="music.ogg">
	<p>HTML5 Audioを再生できません</p>
</audio>


<!-- コントロールバーなしで、映像をタップすると再生 -->
<img src="xxx.jpg" width="256" height="64" onclick="(new Audio('music.mp3')).play()" alt="オープニング・テーマ">

</body>
</html>

再生時間を表示する方法。durationプロパティは音声データが読み込まれた後でないと取得できず、長さは未定(NaN)になることに注意。

<audio src="music.mp3" controls></audio><br>
長さ：<output id="totalTime">/output><br>
再生時間：<output id="cTime"></output>
<script>
	var ad = document.getElementsByTagName("audio")[0];
	ad.addEventListener("timeupdate", function(){
		document.getElementById("cTime").innerHTML = this.currentTime;
		document.getElementById("totalTime").innerHTML = this.duration;
	}, false);
</script>

再生・停止イベントを扱う方法。

<script>
img[i].addEventListener("click", function(){
	if(this.src.indexOf("_off") > -1){
		var audioURL = this.title;
		(myAudio = new Audio(audioURL)).play();
		this.src = this.src.replace(/_off/, "_on");
	}else{
		myAudio.pause();
		this.src = this.src.replace(/_on/, "_off");
	}
}, false);
</script>

再生可能を通知するイベントを扱う方法。

canplayに似たイベントとしてcanplaythroughがあって、こっちは「スムーズに再生できるまでデータが読み込まれた場合に呼ばれるイベント」のようです。

Androidでは、endedイベントが発生した後でcurrentTimeプロパティに秒数を設定してplay()メソッドで再生しても、設定した秒数ではなく最初から再生されてしまうそうです。

<script>
var ele = document.getElementsByTagName("output")[0];
var ad = document.getElementsByTagName("audio")[0];

ad.addEventListener("loadedmetadata", function(){
	ele.innerHTML += "メタデータの読み込みが完了しました<br>";
}, false);

ad.addEventListener("canplay", function(){
	ele.innerHTML += "再生可能になりました<br>";
}, false);

ad.addEventListener("ended", function(){
	this.currentTime = 10.0; // 10秒から再度演奏
	this.play();
}, false);
</script>