videoタグ の使い方

videoタグの使い方

videoタグは動画をHTMLに埋め込む際に使うHTML5のタグです。
最近は定額で使えるデータ容量も多くなってきましたが、それでもやはり動画はサイズが大きいので、あまり長尺な動画を埋め込むのはどうかな…という話もあります。
それでも演出上の都合?など、自社サイト内に動画をアップロードしておいて、HTMLで直接再生したい場合もあります。そんなケースでvideoタグを使うときのヒントなどをご紹介します。

基本的な書式

基本的な書式
:基本的な書式の例

HTMLのソースコードは↑こんな感じです。
ここでは、ビデオ本体は「movie001.mp4」と「movie001.webm」の2形式。最近はあまりなさそうですが、mp4形式が再生できない環境のために、webm形式も書き出して、一緒にアップロードしています。

videoタグのオプションとしては、

  • muted:音をミュートした状態で再生スタート
  • autoplay:読み込んだら自動再生
  • loop:繰り返し再生
  • poster:読み込み中など、動画停止時の画像指定
  • playsinline:iOSでの自動再生時のお約束オプション
  • controls:再生・停止・音量などのコントローラー表示

音声の自動再生はユーザーによっては不快に感じる、ということで、
かつてはautoplay指定をする時にはmutedをセットで使う必要がありました。
またiOSではplaysinlineが無いと再生されなかったようです。


CSS定義
:レスポンシブなCSS定義の例

以前ご紹介したYoutubeのレスポンシブコードとだいたい同じCSSです。
videoタグを囲んでいるdivを可変させています。

なお


大外のwrapper定義
:大外のwrapper定義の例

ページの大外を囲んでいる「wrapper」では、最大幅を1500px、左右マージンをautoで中央に配置しています。
前はmax-widthを1700pxにしていましたが、このところは少し狭めて1500pxにしています。
※フルHDのディスプレイで見る場合は1700pxぐらいがよさそうだったのですが、Mac等の広い画面ではある程度の横幅で制約をかけておいた方が見た目がよいようなので….

この中にdiv(movie-wrap)とvideoタグが入れ子になっているので、videoも最大幅は1500pxになっています。
→実例は当サイトTOPページをご覧ください!

webm形式について

webm形式について
:長めの動画だと、mp4とwebmのサイズはこんなに違います!

webmはGoogleが開発している動画フォーマットで、軽量・高品質が特徴だそうです。
FirefoxやOperaなど、一部のブラウザではライセンス料の関係でmp4(H.264)をサポートしていないとの事で、Webmであれば多くのHTML5ブラウザで再生可能とのこと。

→Wikipediaのwebmページ

という訳で、mp4形式とwebm形式を一緒にアップしておくのがよさそうです。

ちなみに当方では、mp4で書き出した動画を「XMedia Recode」というコンバータでwebmに変換しています。
「XMedia Recorde」は大変優れたコンバータで、動画ソフトで書き出したmp4をもうちょいサイズダウンしたい時などにも使用できたりします。
ほとんどの動画形式に対応しているので、コンバータとしても非常に便利です。
ただしWindows版のみ….


XMedia Recode
:XMedia Recode

→XMedia Recode公式サイトはこちら



ご相談・お問い合わせ