HTML5のVideoタグでオーディオファイルを再生する方法

videoタグでは動画ファイルを簡単に扱うことができます。

基本的なメソッドは「Audioタグでオーディオファイルを再生する方法」と同様で再生や停止、巻き戻しなども行うことができます。また現在の再生時間や全体の時間などのプロパティも用意されています。

Videoタグの利用方法

Videoを実際に利用するには以下の手順でプログラミング及びマークアップを行います。

① ビデオオブジェクトを生成する。
② ビデオオブジェクトのメソッドをコールすることにより、動画ファイルをコントールする。
③ ビデオオブジェクトのプロパティにより動画ファイルに関する属性を取得することが可能。

Audioタグでオーディオファイルを再生する

さっそく、実際にvideoタグを使用してオーディオファイルを再生できるコードを見てみましょう！

※mp4ファイルの用意、CSSファイルなどはご自身でご用意願います。

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Videoタグのサンプルコード</title>
		<script type="text/javascript">
			window.onload = function(){
				video = document.getElementById("videoPlayer");
			}
		</script>
	</head>
	<body>
		<video id="videoPlayer" src="mp4/sample.mp4" width="100%"></video>
		<p><input type="button" value="再生"></p>
		<p><input type="button" value="停止"></p>
	</body>
</html>

実行結果

13行目のvideoタグで動画ファイルを指定します。8行目でビデオオブジェクトを生成します。

再生ボタンでplayメソッド、停止ボタンでpause()メソッドをコールすることでビデオの再生・停止のコントールが可能です。

なお、iPhoneやAndroid端末ではビデオプレイヤーアプリが起動して、アプリ内で動画が再生されます。