HTML video要素で動画ファイルを再生する

サンプル	video要素で動画を動かす
	動画を自動再生する
	動画を再生する前に画像ファイルを表示する
	代替の動画ファイル/文言を指定する
	JavaScriptで制御する
仕様	video要素
	source要素
	video要素のメソッドとプロパティ

video要素で動画を動かす

video要素で動画を動かすサンプルです。
画面中央の三角をクリックすると動き始めます。

上記サンプルのコードです。

<!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行目が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 autoplay muted loop />
</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 poster="test1.png"/>
</body>
</html>

8行目に、poster=画像ファイルを追加することで動画再生前に指定した画像ファイルを表示します。

代替の動画ファイル/文言を指定する

mp4ファイルが再生できないときに、代わりにwebmファイルで再生する、またはメッセージを表示する場合のサンプルです。

<!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>

9・10行目は、ブラウザは上の行から再生できるかどうかチェックしていき、再生できる場合、そのファイルを再生し、それより下の行にはいきません。
11行目の文言は9・10行目のファイルが再生できなかった場合に表示されます。

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	映像データの長さ