簡単に動画をWebサイトに掲載できる！videoタグの使い方と設定方法

HTML5から登場したvideoタグ。videoタグの登場によってWebサイトに動画コンテンツを簡単に載せることができるようになりました。しかし、videoタグは、自動再生やインライン再生など、様々な設定ができることをご存知ですか？今回は、videoタグの使い方や細かい設定方法と、コードの記述の仕方をご紹介します。

videoタグとは

video要素はHTML5で新たに登場した要素です。Webページに動画を掲載する場合、以前はFlash等のプラグインを使っていましたが、HTML5ではvideo要素を利用することで簡単に動画をWebサイトに載せることができます。

Videoタグの使い方

それでは、各動作の記述方法を紹介していきます。

掲載する動画ファイルの拡張子は、特にこだわりが無い限り「mp4」にしましょう。他の拡張子に比べて、mp4は対応しているブラウザの数が多いため、動作に不具合が起きるリスクが少ないです。

videoタグ　動画ファイルの読み込み

videoタグで動画を読み込む際には、imgタグと同様にsrc属性で場所を指定します。この記述だけだと、指定した動画ファイルを読み込んで、画面上に表示することしかできません。この記述が、この後に紹介する記述のベースとなります。

次の項目から、再生などの動作に関わるコードの記述の仕方を紹介します。

videoタグ auto　自動再生

videoタグ内に「autoplay」と記述することで、動画を自動再生することができます。

しかし、ユーザーの意思に関係なく動画を再生するのは、膨大なパケット通信料がかかってしまう、通称「パケ死」が起こる原因となるので、細心の注意を払いましょう。

また、ユーザーへのストレスを防ぐために、chromeやSafariなどのブラウザでは音を出さない設定にしないと、動画を自動再生できなくなっています。

autoplayに加えて「muted」と記述することで、音を出さずに動画を自動再生することができます。

videoタグ loop　繰り返し再生

先ほどの自動再生の記述に「loop」を書き加えることで、自動で動画を繰り返し再生することができます。これも同じように、このままの記述では自動再生時に音が出てしまうので、「muted」も忘れずに記述するようにしましょう。

このように記述することで、音を出さずに自動的に繰り返し再生をすることができます。

videoタグ playsinline　インライン再生を可能にする

「autoplay」「muted」「playsinline」を同時に記述することで、スマホのブラウザで動画を再生するときに、自動的に全画面表示にならないようにすることができます。これを「インライン再生」と呼びます。「playsinline」のみの記述では正常に動作しないので、必ず「autoplay」「playsinline」も併せて記述しましょう。

videoタグ controls　コントロールパネルの表示

videoタグ内に「controls」と記述することで、コントロールパネルを表示できます。コントロールパネルは、ユーザーが動画の再生や一時停止、ボリュームの調整を自由に行うことができる部分を指します。

videoタグ poster　開始画面の画像を設定

「poster=”yyy.jpg”」と記述することで、動画を再生するまで静止画を表示することができます。ユーザーが動画内容を一目で理解できるというメリットがあります。

vidoeタグ width/height　横幅と高さを指定する

「width」と「height」で、動画の横の幅と縦の幅を指定することができます。

しかし、指定できる単位は「px」だけなので、ブラウザのサイズに合わせて動画サイズを変更することができません。そのため、動画サイズはパーセントなどでサイズを設定できるCSSを使って調整することをおススメします。

videoタグ preload　動画の読み込み設定

「preload」は、Webサイトを読み込む際に、動画ファイルを事前に読み込むかどうかの設定ができます。

「preload=”none”」で事前に動画ファイルを読み込まず

「preload=”auto”」で事前に動画ファイルを読み込むようになります。

動画ファイルを事前に読み込むことで、Webサイトの表示速度がその分遅くなるので、特に理由が無い限りは「preload=”none”」に設定しましょう。

ちなみに、「autoplay」で自動再生するように設定していた場合、「preload=”none”」と記述していても事前に動画ファイルを読み込んでしまいます。

iframe タグの使い方 　Youtubeの動画の取り込み方

iframeタグを使用することで、Youtubeに投稿されている動画を掲載できます。最もメジャーなものは、動画ページの 共有>埋め込む をクリックすることで取得できるコードを貼り付ける方法です。

videoタグではYoutubeの動画を掲載できないので注意しましょう。

まとめ

videoタグを使えば、比較的簡単に動画コンテンツを掲載することができます。魅力的なWebサイトとなるように、上手に動画コンテンツを利用しましょう。

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか？

WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。