フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Video要素をJavascriptで制御する

Html5のVideo要素はHTMLMediaElementオブジェクトとして取得できます。以下、Javascript側で操作するためのTips集です。

再生・停止
// HtmlMediaElementオブジェクトを取得
var video = document.getElementById('video');

// 再生
video.play();

// 停止
video.pause();
時間の取得
// 動画の長さを取得
var time = video.duration;

// 再生している場所の時間
var current = video.currentTime;

再生箇所を変えたい場合は、currentTimeプロパティに再生したい場所の時間(秒)を渡します。

// 10秒後にスキップさせる
video.crrentTime += 10;
動画の幅と高さを取得
// 幅
var width = video.width;

// 高さ
var height = video.width;
ただし、videoのsourceをJavascript側から追加した場合は、これらのプロパティが0になっているのでその場合はclientWidthなどで取得する
ダウンロード状態を取得する
ダウンロード済みのサイズはbuffered.endメソッドで取得できます。duretionプロパティをダウンロード済みサイズで割ることで、ダウンロードの進行状況をパーセントで取得できます。
また、また、ダウンロードされた部分が増えるとprogressイベントが発生するので、イベントリスナを設定してリアルタイムに進行状況をs表示することができます。
var progressDisplay = document.getElementById('progressDisplay);

// 進行状況を表示する
video.addEventListener('progress', function(){
    var loaded = this.buffered.end(0);
    var percent = loaded / this.duration * 100;
    progressDisplay.innerText = percent + '%ダウンロード完了';
}, false);
再生可能な状態になったら再生する
動画がある程度ダウンロードされ、再生可能な状態になったらcanplaythroughイベントが発生します。
// 再生可能な状態になったら自動で再生する
video.addEventListener('canplaythrough', function(){
		video.play();
}, false);
Canvasで動画を再生する
canvas自体には動画再生機能はないので、videoで再生したものをリアルタイムでcanvasにコピーするようにする
// ビデオを取得して非表示にする
var video = document.getElementById('videoTag');
video.style.display = 'none';

// canvasを取得
var canvas = document.getElementById('canvasTag');
var context = theCanvas.getContext('2d');

// 再生可能時のイベントリスナーを登録
video.addEventListener('canplaythrough', function(){
    // 33ミリ秒毎にcanvasに動画をコピーする
    setInterval(function(){
        context.drawImage(video, 0, 0);
    }, 33);
}, false);