BLOG

動画をJavaScriptで操作する方法

| JavaScript

もう、動画をコンテンツとして扱うのが当たり前になってきましたよね。
そんなときに自動で動画を再生させたい的なときに困ったりしたことないですか?
例でいうとapple.comのサイトとかはスクロールして表示されると動画を再生させるみたいな事よくやってますよね。
そんなときに使えるJavaScriptで動画を操作する方法です。

動画を設置する

htmlで動画の設置をまずします。

<video>
  <source src="./hige.mp4" type="video/mp4">
  <source src="./hige.webm" type="video/webm">
 <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

video要素で使える属性がこんな感じです。

属性 説明
controls 動画のコントローラーをつかう
autoplay 動画を読み込んだら再生させる
loop ループ再生
muted 音量をゼロにする なし
preload プリロードするかどうか “none”/”metadata”/”auto”
poster 再生されるまでの表示される画像を指定 画像のパス
width 690pxとか
height 高さ 480pxとか
<video autoplay muted>
  <source src="./hige.mp4" type="video/mp4">
 <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

動画の自動再生とミュートをする場合はこういう感じです。

動画をJavaScriptで操作する

htmlはidを設定しておく

<video id="video" autoplay muted>
  <source src="./hige.mp4" type="video/mp4">
 <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

再生・停止・リロード

var v = document.getElementById('video');
//再生
v.play();
//一時停止
v.pause();
//ロード
v.load();

再生位置を取得する

v.addEventListener('timeupdate', function() {
  console.log(v.currentTime);
}

// 動画の長さを取得
console.log(v.duration);

timeupdate で再生位置が変化したときのイベントを設定して currentTime で再生位置を取得する
duration は動画の長さを取得できます。

取得できるプロパティ
// 再生が完了した時間の長さを表す
v.played
// 再生が一時停止されているかどうかをBoolean値で表す
v.paused
// 再生が終了しているかどうかをBoolean値で表す
v.ended
// 直近で発生したメディアのダウンロード中のエラーをerrorオブジェクトで返す
v.error

再生に関するイベントハンドラ

イベントハンドラ 説明
play 再生が開始したとき
timeupdate 再生位置が変化したとき
pause 再生が停止のとき
playing 再生停止状態から、再生可能になったとき
waiting 次のフレームの読み込みを待っているとき
ended 再生が完了したとき
error 再生中にエラーが発生したとき
abort エラー以外の原因で再生が停止したとき

ざっくりと動画をJavaScriptでの操作を書きました。
これからも動画コンテンツ音声コンテンツは増えていくので、今のうちに簡単にでも頭に入れておくといいかもですね。
それでは。

PAGE TOP