2020.12.17  2021.04.04

HTML5 videoタグを使ってWEBサイト上で動画を再生させる方法

皆さんこんにちは!マコブログです!

本日はWEBサイトに動画を組み込む為のHTMLタグ、<video>の使い方をご紹介していきたいと思います!

最近はjsを使用して背景にyoutubeを再生しているサイトも少なくないですが、カスタマイズがしにくいです。
HTMLだけで動画を埋め込む方法があれば…と思っている方向けに解説していきます。

<video>とは?

HTML5で動画を埋め込むことができる便利なタグです。
使い方は<img>と似ていて、src属性に動画の相対パスを指定することができます。

対応ブラウザ

Internet Explorer9、Firefox、Google Chrome、Safariの新しいバージョンであれば問題なく動作します。
旧ブラウザでも対応させることは難しい為、再生できない環境では仮の画像を表示すると良いでしょう。

<video>の属性値について

controls…これを記述することでインターフェースを表示することができます。再生ボタン、停止ボタンなどを表示させたい時はこちらを指定しましょう。

poster…動画が再生できない場合、表示する仮画像になります。旧ブラウザなどを考慮し、指定しておくと良いでしょう。

autoplay…読み込みと同時に自動再生がされます。背景等に使用する場合は指定しておくべきでしょう。

preload…動画を予め読み込むかを指定できます。標準では予め読み込むようになっているので、サーバーへの負担を軽減するなら”none”をしていするとよいでしょう。



muted…動画をミュートにすることができます。基本的にWEBサイトで使われる動画は全てミュートにしましょう。

playsinline…動画をミュートにすることができます。これを指定しないとiphoneで自動再生されないので注意しましょう。

loop…動画を繰り返し再生することができます。

playsinline…インライン要素として動画を再生することができます。

下記動画参考コード

<video class="videoClass" src="ビデオの相対パス" poster="仮画像" autoplay muted playsinline></video>

jsで工夫する

動画の自動再生が終わったあとの処理

$(window).ready(function () {
var video = document.getElementsByTagName('video')[0]
//videoのイベントが終了したら実行する。
video.addEventListener(
'ended',
function () {
$('.videoClass').addClass('finished')
},
false
)
})

動画の再生が完了したことをjsで確認し、videoタグにクラスを付ける方法です。
他の要素にクラスを付けたりしてさらに工夫することも可能ですので、是非利用してみてください。

こちらの記事も是非チェックしてみてください↓
jQueryプラグイン、spritespinを使って3D回転画像を実装する方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →