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

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

目次

  • Video要素
  • Source要素
  • コード
  • 画面イメージ
  • JavaScriptで制御する場合

Video要素

  • Video要素は、HTML文書へ動画等を埋め込むことができます。
  • Video要素の属性です。
    属性 説明
    src 映像ファイルの場所を指定します。
    ※複数のファイルを指定する場合は、この属性ではなくsource要素を使用します。(ページ下にsource要素の欄があります)
    例:webmファイルが再生できなかったらmp4ファイルで再生したい場合はsource要素を使用する。
    controls コントロラーを表示します
    autoplay 自動再生します。スマホでは不可。
    loop 繰り返し再生を行います。
    width video要素の幅
    height video要素の高さ
  • 以下はMDNのvideo 要素について書かれた記事のリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Using_HTML5_audio_and_video

Source要素

  • Source要素は複数のメディアリソースを指定できます。
  • Source要素の属性です。
    属性 説明
    src 映像ファイルの場所を指定します。
    type ファイルのMIMEタイプを指定する

コード

サンプルのコードです。
25行目にVideo要素があります。controlsはコントロールバーを表示します。
26・27行目は、ブラウザは上の行から再生できるかどうかチェックしていき、再生できる場合、そのファイルを再生します。再生できるファイルがあった場合は、それより下の行にはいきません。
28行目の文言は26・27行目のファイルが再生できなかった場合に表示されます。
11,15,16行目のjsと31,32,33行目のボタンは、なくても動画再生できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Video要素のサンプル</title>
<style>
</style>
<script>
//再生
function Play1(){
	document.getElementById("test1").play();
}
//最初から再生
function PlayFromFirst1(){
	document.getElementById("test1").currentTime=0;
	document.getElementById("test1").play();
}
//一時停止
function Pause1(){
	document.getElementById("test1").pause();
}
</script>
</head>
<body>
	<video id="test1" width="400" height="200" controls>
		<source src="./test1.webm" type="video/webm">
		<source src="./test1.mp4" type="video/mp4">
		<p>※ご利用のブラウザでは再生できません</p>
	</video>
<br>
<button onclick="Play1()">再生</button>
<button onclick="PlayFromFirst1()">最初から再生</button>
<button onclick="Pause1()">一時停止</button>
</body>
</html>

画面イメージ

上記コードを実行したときの画面イメージです。(ブラウザはchrome)

JavaScriptで制御する場合

  • JavaScriptで制御する場合のメソッド
    メソッド 説明
    play() 再生します。
    pause() 一時停止します。
  • JavaScriptで制御する場合のプロパティ
    プロパティ 説明
    currentTime 現時点の再生時間
    duration 映像データの長さ

関連の記事

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




△上に戻る