JavaScript プログラミング講座


ビデオについて（HTMLVideoElement）



・ビデオについて
・ビデオを作成する
・動画ファイルを読み込む
・動画を再生する
・動画を制御する

前のページに戻る

　

ビデオについて

　


■ビデオについて


<VIDEO> タグを使用すると、動画ファイルを読み込んで再生することができます。
　
<VIDEO> タグは、HTML5 で追加された要素です。
　
Safari の場合、QuickTime のインストールが必要です。
　
VIDEO タグを使用して動画を再生する

<html>
  <body>

    <video controls preload="auto" poster="https://hakuhin.jp/download/js/video/sample_00.png">
      <source src="https://hakuhin.jp/download/js/video/sample_00.webm" type="video/webm">
      <source src="https://hakuhin.jp/download/js/video/sample_00.mp4"  type="video/mp4">
      <source src="https://hakuhin.jp/download/js/video/sample_00.ogv"  type="video/ogg">
      未対応時に表示される文字 
    </video>

  </body>
</html>
　
サンプル表示
　

■ HTMLMediaElement インターフェースについて

　
HTMLMediaElement インターフェースは、メディアを制御するための機能がまとまっています。
　

■ HTMLVideoElement インターフェースについて

　
HTMLVideoElement インターフェースは、動画ファイルを再生するための機能がまとまっています。
　
HTMLVideoElement インターフェースは、<VIDEO> タグに相当します。
　
エレメントの一種です。
　
このページでは、HTMLMediaElement と HTMLVideoElement インターフェースで供給される機能について解説しています。
　
■ HTMLVideoElement インターフェースの派生について

HTMLVideoElement インターフェースは、以下の様に派生しています。
　
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
　
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLMediaElement
↓派生
HTMLVideoElement
　

■ブラウザがビデオをサポートしているか調べる

　
window.HTMLVideoElement が真であるか比較します。
　
　

上に戻る

　

ビデオエレメントを作成する

　


■HTMLVideoElement オブジェクトを作成する

　
VIDEO 要素を動的に作成する
　
HTMLVideoElement オブジェクトを作成するには、document.createElement() メソッドを使用します。
　
引数に、"video" を指定します。
　
動的に HTMLVideoElement オブジェクトを作成する

// HTMLVideoElement オブジェクトを作成する
var video = document.createElement("video");

// 出力テスト
console.log(video);
　

■ビデオプレイヤーをブラウザに表示する


ビデオプレイヤーのコントロール部分の可視表示を設定するには、controls プロパティを使用します。
　
デフォルトは、false です。
　
HTMLVideoElement オブジェクトを、ブラウザに表示するには、任意のノードリストに登録する必要があります。
　
ノードリストに登録していない場合でも、音だけは出力されます。
　
ビデオを動的に作成して、ブラウザに表示する

// HTMLVideoElement オブジェクトを作成する
var video = document.createElement("video");

// コントロールの表示を有効
video.controls = true;

// BODY のノードリストに登録する
document.body.appendChild(video);
　

■サムネイル画像を表示する


ビデオプレイヤーに、サムネイル画像を表示するには、poster プロパティを使用します。
　
画像ファイルの URL アドレスを指定します。
　
ビデオプレイヤーに、サムネイル画像を表示する

// HTMLVideoElement オブジェクトを作成する
var video = document.createElement("video");

// コントロールの表示を有効
video.controls = true;

// サムネイル画像を設定
video.poster = "https://hakuhin.jp/download/js/video/sample_00.png";

// BODY のノードリストに登録する
document.body.appendChild(video);
　

■静的な <VIDEO> タグから、HTMLVideoElement オブジェクトを取得する


静的に用意した <VIDEO> タグから、エレメントを取得する方法は、こちらで解説しています。
　
静的な <VIDEO> タグから、HTMLVideoElement オブジェクトを取得する

<html>
  <body>

    <video id="aaa" controls preload="auto" poster="https://hakuhin.jp/download/js/video/sample_00.png">
      <source src="https://hakuhin.jp/download/js/video/sample_00.webm" type="video/webm">
      <source src="https://hakuhin.jp/download/js/video/sample_00.mp4"  type="video/mp4">
      <source src="https://hakuhin.jp/download/js/video/sample_00.ogv"  type="video/ogg">
    </video>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var video = document.getElementById("aaa");

	// 出力テスト
	console.log(video);

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

動画ファイルを読み込む

　
　


■プリロードを設定する


プリロードを設定するには、preload プロパティを使用します。
　
以下のプリロード設定があります。デフォルトでは "auto" となります。
　
autoplay 属性が有効の場合、設定は無視され "auto" となります。
　
文字列 解説
"auto" すべてのデータを事前に読み込む
"metadata" メタデータのみを事前に読み込む
"none" 事前に読み込みを行わない
　
プリロードを設定する

// VideoElement を作成
var video = document.createElement("video");

// プリロードを設定する
video.preload = "metadata";
　

■動画ファイルを外部から読み込む


src プロパティに、「動画ファイルまでの URL アドレス」を文字列で指定します。
　
src プロパティに値をセットした時点で、プリロードの設定通りの読み込みが開始されます。
　
動画ファイルまでの URL アドレスを指定する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";
　
load() メソッドを呼び出すと、明示的に動画ファイルの読み込みを開始します。
　
明示的にロードを開始する

// VideoElement を作成
var video = document.createElement("video");

// プリロードを設定する
video.preload = "none";

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 読み込みを開始する
video.load();
　

■ブラウザが対応しているビデオフォーマットを調べる

　
ブラウザが、指定した動画ファイルのフォーマットに対応しているか調べるには、canPlayType() メソッドを使用します。
　
引数にコンテンツタイプを文字列で指定します。
　
戻り値から "" が得られればフォーマットに対応していません。
　
コンテンツタイプの一覧です。
　
フォーマット コンテンツタイプ
WebM(VP8 + Vorbis) video/webm
MP4(H.264 + AAC) video/mp4
Ogg(Theora + Vorbis) video/ogg
　
サポートする動画ファイルの URL を調べる

// VideoElement を作成
var video = document.createElement("video");

// サーバ側で用意している動画ファイルのリスト
var video_file_list = [
	{url:"https://hakuhin.jp/download/js/video/sample_00.webm" , type:"video/webm"},
	{url:"https://hakuhin.jp/download/js/video/sample_00.mp4"  , type:"video/mp4"},
	{url:"https://hakuhin.jp/download/js/video/sample_00.ogv"  , type:"video/ogg"}
];

// サポートしているコンテンツタイプを調べて URL を設定する
var i;
var num = video_file_list.length;
for(i=0;i < num;i++){
	if(video.canPlayType(video_file_list[i].type) !== ""){
		video.src = video_file_list[i].url;
		break;
	}
}
　

■フォーマット対応チェッカー

　
どのフォーマットに対応しているかチェックできます。
　
様々なブラウザからアクセスしてみて下さい。
　
　
　

■サーバ側に動画ファイルのコンテンツタイプを設定する

　
ブラウザによっては、サーバから正しいコンテンツタイプを得られないとビデオが動作しません。
　
.htaccess でコンテンツタイプを追加する例です。
　
.htaccess にビデオ関連のコンテンツタイプを追加する

AddType video/webm .webm
AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/ogg .ogg
　

上に戻る

　

動画を再生する

　
　
■動画を再生する
■ビデオを一時停止する
■ビデオを停止する
　


■動画を再生する


ビデオを再生するには、play() メソッドを使用します。
　
ビデオの再生を開始する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();
　

■ビデオを一時停止する


再生中のビデオを一時停止するには、pause() メソッドを使用します。
　
ビデオの再生を開始する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();

// 再生を一時停止する
video.pause();
　
ビデオが、一時停止中であるか調べるには、paused プロパティを使用します。
　
true であれば一時停止中です。
　

■ビデオを停止する


再生中のビデオを停止するには、pause() メソッドを呼び出した後、currentTime プロパティに 0 をセットします。
　
ビデオの再生を停止する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();

// 再生を停止する
video.pause();
video.currentTime = 0;
　

上に戻る

　

動画を制御する

　
■ビデオの再生位置を制御する
■ビデオの総時間を取得する
■読み込み時に自動再生する
■ループ再生する
■再生速度を変更する
■ビデオのボリュームを制御する
■ビデオのミュートを制御する
■動画のサイズを取得する
　


■ビデオの再生位置を制御する


ビデオの再生位置を制御するには、currentTime プロパティを使用します。
　
単位は秒（小数あり）です。
　
ビデオの再生位置を取得する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();

// 60 fps 間隔で実行する
setInterval(function (){

	// 再生位置を取得する
	console.log(video.currentTime);

},1000/60);
　

■ビデオの総時間を取得する


ビデオの総時間を取得するには、duration プロパティを使用します。
　
単位は秒（小数あり）です。
　
ビデオの総時間を取得する

// VideoElement を作成
var video = document.createElement("video");

// メタデータ読み込み完了時に実行されるイベント
video.addEventListener("loadedmetadata",function (e){

	// 再生総時間を取得する
	console.log(video.duration);

});

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";
　

■読み込み時に自動再生する


ビデオの読み込み時に、ビデオを自動再生するには、autoplay プロパティに true をセットします。
　
ビデオの読み込み時に、自動的に再生する

// VideoElement を作成
var video = document.createElement("video");

// 自動再生を有効
video.autoplay = true;

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";
　

■ループ再生する


ビデオをループ再生するには、loop プロパティに true をセットします。
　
ビデオをループ再生する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// ループ再生を有効
video.loop = true;

// 再生を開始する
video.play();
　

■再生速度を変更する


ビデオの再生速度を変更するには、playbackRate プロパティを使用します。
　
単位は倍率です。（デフォルトは 1.0）
　
ビデオを 1.5 倍速で再生する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生速度を変更する
video.playbackRate = 1.5;

// 再生を開始する
video.play();
　

■ビデオのボリュームを制御する


ビデオの音量を制御するには、volume プロパティを使用します。
　
単位は 0.0（無音）～ 1.0（最大）までの間の小数値です。
　
ビデオのボリュームを変更する

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();

// 音量を 0.5 に設定する
video.volume = 0.5;
　

■ビデオのミュートを制御する


ビデオのミュートを制御するには、muted プロパティを使用します。
　
true をセットするとミュート（無音）が有効になります。
　
false をセットすると volume プロパティで設定した通りの音量となります。
　
ビデオを無音状態にする

// VideoElement を作成
var video = document.createElement("video");

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();

// ミュートを有効
video.muted = true;
　

■動画のサイズを取得する


動画のサイズを取得するには、以下のプロパティを使用します。
　
videoWidth プロパティで、動画の幅
　
videoHeight プロパティで、動画の高さ
　
を取得できます。
　
動画のサイズを取得する

// VideoElement を作成
var video = document.createElement("video");

// メタデータ読み込み完了時に実行されるイベント
video.addEventListener("loadedmetadata",function (e){

	// 動画の幅を取得する
	console.log(video.videoWidth);
	// 動画の高さを取得する
	console.log(video.videoHeight);

});

// 動画ファイルまでの URL アドレスを指定
video.src = "https://hakuhin.jp/download/js/video/sample_00.webm";
　

上に戻る

　
前のページに戻る