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

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

確認環境
・Windows10
・Google Chrome

目次

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とmutedと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 muted 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>

代替のファイル/文言を指定するサンプル

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 現在位置を取得するサンプル(getCurrentPosition)
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)

 

△上に戻る