テックブログ

  1. HTML
  2. 15 view

【HTML5】videoタグで動画埋め込み〜JavaScriptによる操作

videoタグを実務で使おうとしている方向け。

本記事では、一般的なvideoタグの使い方から、プロパティー、JavaScriptでvideoを操作する際に必要な、使用頻度の高い、メソッド、イベント、参考になるリンクをまとめました。

ざっと目を通しておくと、videoタグを操作出来るようになります。

動画の埋め込み方法

HTMLにビデオを埋め込む際はvideoタグを使用します。
videoタグで包みsrcを指定すると、videoを埋め込むことが出来ます。

<video src="movie.mp4" width="300" height="150"></video>

複数の動画ソースを指定するにはsourceタグを使用します
動画ソースを複数指定するのは、ユーザーの閲覧するブラウザによっては、指定した動画ファイルが再生されない場合も考えられるからです。

<video controls="controls" width="300" height="150">
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
</video>

videoタグの便利な属性

videoタグでは、追加することで、動画再生の詳細を指定できる便利な属性が用意されています。

autoplay 自動再生
poster 動画を再生するまでに表示する画像の指定
playsinline iphoneでのブラウザ内インライン再生
loop 繰り返し再生を有効化
preload 動画を事前に読み込む
width 動画の横幅が指定できる
height 動画の高さを指定できる
muted 音声を消す
controls 操作パネルを表示することができます。操作パネルを利用すると、拡大や、音量の調整、動画内の移動が可能になります。

属性はvideoタグ内に追加することで使用することが出来、複数指定することも可能です。

videoタグ/属性使用例

//自動再生
<video src="sample.mp4" autoplay></video>

//動画再生時までの間sample.pngをvideoタグの枠内に表示。
<video src="sample.mp4" poster="sample.png"></video>

//Iphoneでインライン再生
<video src="sample.mp4" playsinline></video>

//無音&ループ
<video src="sample.mp4" loop muted></video>

videoタグで再生範囲を指定する方法

videoタグで再生範囲を指定するには、srcタグの末尾に#t=再生開始位置,終了位置を追加します。

以下のコードが、記述法と何秒から何秒の間再生されるかの例です。

<video src="sample.mp4#t=3,8"></video>//3秒〜8秒
<video src="sample.mp4#t=15,130"></video>//15秒〜130秒

JavaScriptでvideoを操作する。

HTML5では、video要素をJavaScriptから操作するためのイベント、メソッドが用意されています。
メソッドを使いこなす事で、JavaScriptでvideoを操作する事ができます。

videoの再生時間、動画の長さを取得する

video.currentTime で動画の現在の再生位置を表示する事が出来ます。
video.durationで動画の長さを取得出来ます。

console.log(video.currentTime);//現在の時間
console.log(video.duration);//動画の長さ

videoタグで使用できるメソッド

videoを操作するために、HTML5では4つのメソッドが用意されています。

  • load() ソースを読み込む
  • play() 再生する
  • pause() 一時停止する
  • canPlayType(MIMEタイプ) 再生可能か判断する。

以下が時間を指定して再生をする場合のサンプルです。

video.currentTime= 30;
video.play()
//30秒から再生が開始される

videoタグでよく使うイベント

loadedmetadata 動画のメタデータの読み込みが完了した時
error メディアデータの読み込み中にエラーが発生した時
playing 動画再生中の時
waiting 次のフレームが止まっているので再生出来ないが、再生しようとしている時。例)回線が遅くて止まってる時
seeking 動画再生位置をずらすポインタを動かしているとき
seeked 再生位置の移動が完了した時
ended 動画の最後に到達して、再生が終了した時
timeupdate 再生位置が変更された時
play 再生中
pause 一時停止中

イベントを使用して動画を操作する例。

video.ended = function{
  alert('動画が終わりました'); 
}
video.ended = function{
  video.currentTime = 0;
//loopタグ無しでのloop
}

まとめ

HTMLにビデオを埋め込む際はvideoタグを使う。
動画のソースは複数指定出来る。
属性でビデオの動画再生の詳細をカスタマイズ出来る。
playsinline属性を使用するとIphoneでインライン再生が出来る。
基本操作はcurrentTimeの変更からのplay
いろんなイベントが発火してるので、JavaScriptを使用すれば様々なカスタマイズが可能
下記リンクが便利。

参考になるリンク
videoタグに使えるイベントハンドラのまとめ
HTML5のvideoタグを使った動画再生に関するまとめ
HTML 5.3: 4.7. Embedded content

The following two tabs change content below.

zoe

1994年、京都生まれ。麻布高校卒業後、2年間FPSのクランマスターとして活躍し、駒澤大学の経営学部に進学 → 中退→ とんかつ屋→ WINDII→ Sier→ ベンチャー→ WINDII

HTMLの最近記事

  1. Flexboxを習得して使いこなす【CSS】

  2. 【HTML5】videoタグで動画埋め込み〜JavaScriptによる操作

  3. htmlをpdfに変換する 【Angular7】

  4. 【超簡単】Angular6でPug + Stylusを導入して爆速コーディングする方法

  5. Tinderのフリックを自動で行う方法【アプリ不要】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。