現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

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

属性は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タグでよく使うイベント

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

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.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日