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

関連の記事

HTML 進捗状況を表示するプログレスバー
HTML 入力欄に入力候補を表示する(datalist)

△上に戻る