BLOG

動画をJavaScriptで操作する方法

2021.04.29 | HTML/CSS/PHP、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	エラー以外の原因で再生が停止したとき