HAKUHIN's home page
更新履歴
　
　


HTMLVideoElement について


・ビデオエレメントを作成する
・動画ファイルを読み込む
・動画を再生する

前のページに戻る



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


■HTMLVideoElement について

動画ファイルを再生するには、 VIDEO タグを使用します。
　
　
safari で動作しない場合、QuickTime のインストールが必要となるようです。(windows7 safari5 で確認)
　
VIDEO タグを使用して動画を再生する

<html>
  <body>

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

  </body>
</html>
　
VIDEO タグは、DOM オブジェクト上では HTMLVideoElement となります。
　
■ブラウザが HTMLVideoElement をサポートしているか調べる
　
ブラウザが、ビデオをサポートしているか調べるには、window.HTMLVideoElement が真であるか比較します。真であれば対応しています。
　
　
■HTMLVideoElement オブジェクトを作成する
　
HTMLVideoElement オブジェクトを動的に作成するには、
　
「document.createElement()」メソッドを使用します。
　
作成例です。
　
createElement メソッドを使用して HTMLVideoElement を作成

var video = document.createElement("video");
　
■ビデオを表示する
　
HTMLVideoElement オブジェクトを DOM ノードに登録すると、HTMLVideoElement がブラウザ上に表示されるようになります。
　
ビデオを表示する

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

// body の最後尾に登録する
document.body.appendChild(video);
　
■コントロールを表示する
　
controls プロパティを true に変更するとコントロールが表示されます。
　
ビデオコントロールを表示する

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

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

// body の最後尾に登録する
document.body.appendChild(video);
　
■サムネイル画像を表示する
　
動画の再生を開始する前に、サムネイルを表示したい場合は、poster プロパティに画像までの URL アドレスを指定します。
　
ビデオコントロールを表示する

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

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

// body の最後尾に登録する
document.body.appendChild(video);
　

上に戻る



動画ファイルを読み込む
　
　


■プリロードを設定する

プリロードを設定するには、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 = "http://hakuhin.jp/download/js/video/sample_00.webm";
　
load() メソッドを呼び出すと、明示的に動画ファイルの読み込みを開始します。
　
明示的にロードを開始する

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

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

// 動画ファイルまでの URL アドレスを指定
video.src = "http://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:"http://hakuhin.jp/download/js/video/sample_00.webm" , type:"video/webm"},
	{url:"http://hakuhin.jp/download/js/video/sample_00.mp4"  , type:"video/mp4"},
	{url:"http://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 = "http://hakuhin.jp/download/js/video/sample_00.webm";

// 再生を開始する
video.play();
　
■ビデオを一時停止する

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

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

// 動画ファイルまでの URL アドレスを指定
video.src = "http://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 = "http://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 = "http://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");

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

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

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

},false);
　
■読み込み時に自動再生する

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

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

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

// 動画ファイルまでの URL アドレスを指定
video.src = "http://hakuhin.jp/download/js/video/sample_00.webm";
　
■ループ再生する

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

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

// 動画ファイルまでの URL アドレスを指定
video.src = "http://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 = "http://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 = "http://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 = "http://hakuhin.jp/download/js/video/sample_00.webm";

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

// ミュートを有効
video.muted = true;
　
■動画のサイズを取得する

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

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

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

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

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

},false);
　

上に戻る


前のページに戻る
コンテンツ
　
問答収集
NEW
　
PR
　
広告

HAKUHIN's home page バナー http://hakuhin.jp/
(c) Hakuhin & 日新礼符 2002-2011 解像度1024×768以上 IE8.0以上推奨		 / 閲覧中:人