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

HTML

2018.08.142018.11.16

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="再生" onClick="video.play();"></p>
		<p><input type="button" value="停止" onClick="video.pause();"></p>
	</body>
</html>