HTML5 video要素で動画ファイルを再生するサンプル

HTML5のvideo要素で動画ファイル(mp4等)を再生するコードのサンプルです。

目次

video要素で動画を動かすサンプル

video要素で動画を動かすサンプルです。

コード

上記サンプルのコードです。
8行目がvideo要素です。
srcは、mp4のパス(ファイル名)を指定しています。
widthとheightは動画の幅と高さです。
controlsは、動画の下にある再生ボタン等のコントロールバーを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
	<video src="./test1.mp4" width="500" height="300" controls />
</body>
</html>

動画を自動再生+ループするサンプル

動画が自動再生かつループで再生するサンプルです。
但し、スマホでは自動再生はされません。

コード

上記サンプルのコードです。
8行目のcontrolsの後に、autoplayとloopを追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<video src="./test1.mp4" width="500" height="300" controls autoplay loop />
</body>
</html>

動画を再生する前に画像ファイルを表示するサンプル

動画を再生する前に画像ファイルを表示するサンプルです。
再生ボタンを押すと画像ファイルは消えます。

コード

上記サンプルのコードです。
8行目に、poster=画像ファイルを追加することで動画再生前に指定した画像ファイルを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<video src="./test1.mp4" width="500" height="300" controls poster="test1.png"/>
</body>
</html>

video要素+source要素を使用したサンプル

source要素を使用したコードのサンプルです。
mp4ファイルが再生できなかったらwebmファイルで再生したい時やブラウザが対応していない時のメッセージ表示などで使用します。
9・10行目は、ブラウザは上の行から再生できるかどうかチェックしていき、再生できる場合、そのファイルを再生し、それより下の行にはいきません。
11行目の文言は9・10行目のファイルが再生できなかった場合に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
	<video width="500" height="300" controls>
		<source src="./test1.mp4" type="video/mp4">
		<source src="./test1.webm" type="video/webm">
		<p>※ご利用のブラウザでは再生できません</p>
	</video>
</body>
</html>

JavaScriptで制御するサンプル

video要素をJavaScriptで制御するサンプルです。


コード

上記サンプルのコードです。
JavaScriptで再生、一時停止、最初から再生ボタンを制御しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<script>
//再生
function Play1(){
	document.getElementById("test1").play();
}
//一時停止
function Pause1(){
	document.getElementById("test1").pause();
}
//最初から再生
function PlayFromFirst1(){
	document.getElementById("test1").currentTime=0;
	document.getElementById("test1").play();
}
</script>
</head>
<body>
	<video id="test1" width="500" height="300" >
		<source src="./test1.mp4" type="video/mp4">
	</video>
<br />
<button onclick="Play1()">再生</button>
<button onclick="Pause1()">一時停止</button>
<button onclick="PlayFromFirst1()">最初から再生</button>
</body>
</html>

video要素

video要素の属性です。

属性 説明
src 映像ファイルのURLを指定します。
※複数のファイルを指定する場合は、この属性ではなくsource要素のsrcを使用します。
controls 再生、シーク等を制御するコントロールを表示します
autoplay 自動再生します。スマホでは不可です。
loop 繰り返し再生を行います。
muted 初期状態が消音になります。
poster 動画を再生する前に画像を表示します。
preload 動画の読み込みの設定
none: 映像を事前に読み込みません。
metadata: 映像のメタデータ (例:長さ) を読み込みます。
auto: 映像を事前に読み込みます。
空文字列: auto 値と同義です。
width video要素の幅
height video要素の高さ

以下はMDNのvideo 要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

source要素

source要素の属性です。

属性 説明
src 映像ファイルのURLを指定します。
type ファイルのMIMEタイプを指定する

以下はMDNのsource要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/source

video要素のメソッドとプロパティ

video要素のメソッドです。JavaScriptで制御します。

メソッド 説明
play() 再生します。
pause() 一時停止します。

video要素のプロパティです。JavaScriptで制御します。

プロパティ 説明
currentTime 現時点の再生時間
duration 映像データの長さ

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)

 



△上に戻る