0%

Programmingプログラミングナレッジ

Posted:2018.09.27

Webページの動画再生で使うvideo要素を使いこなす

最近のウェブサイトでは動画を積極的に使うデザインも増えてきています。HTML5になり新たに追加されたvideoタグを使うことで、Webページで簡単に動画を扱うことが可能になりました。今回はvideo要素について、いろんな属性や設定方法などをまとめていきます。

 

まずは基本的なvideoタグの記述です。src属性で再生する動画ファイルのパスを指定するだけで動画が再生できます。

<video src="movie.mp4">
</video>

 

また、動画データ形式がmp4の場合に、旧バージョンのブラウザでは対応していないケースもあります。その時に対応できるよう複数の形式をサポートする場合にはsource要素を使います。形式別にそれぞれ指定します。

<video>
  <source src="movie.mp4" type="video/mp4; codecs='*******,*******'">
  <source src="movie.ogv" type="video/ogv; codecs='*******,*******'">
  <source src="movie.webm" type="video/webm; codecs='*******,*******'">
</video>

 

そして、video要素がサポートされていないなどで動画が再生できない場合のメッセージを表示させる場合にはvideoタグの中に直接テキストを配置させます。

<video src="movie.mp4">
  <p>このブラウザでは動画を再生することができません。最新版のブラウザをご利用ください。
  </p>
</video>

 

 

video要素で使える属性と設定方法

video要素にはいろんな属性があり、その属性でいろんな設定ができるようになります。数もたくさんありますが、まずは覚えておきたいよく使うものをまとめています。

src 再生する動画ファイルのパスを指定
poster 動画が再生されていない時に表示させる画像をパスで指定
autoplay ページのロードが完了したら自動的に動画を再生する
loop 動画を繰り返すループ再生を許可する
controls 再生ボタンやタイムラインなどのインターフェースパーツを表示させる
muted 音声付き動画データの場合は消音にする
preload 事前に動画データを読み込むか制御する、属性の値で指定する
【auto】初期値でページロードと合わせて読み込みされる
【none】動画データの読み込みがされない状態
【metadata】動画データのメタデータのみ読み込みされる
width 動画の幅を指定する
height 動画の高さを指定する

 

実際にこれらの属性の設定した例になります。必要に応じて使い分けていきます。

<video src="movie.mp4" poster="[PATH]/movie-image.jpg" controls autoplay>
</video>

 

 

Google Chromeでvideo要素で指定した動画が自動再生されない場合への対応

Google Chromeバージョンによってautoplay属性で自動再生を指定しても、再生されない場合もあります。この時は下記のようにmuted属性を指定することで対応できます。

<video src="movie.mp4" muted>
</video>

 

バージョンがChrome 66の場合に音声付き動画の場合には自動再生されない仕様になったことが原因で、音声なしの場合でも指定が必須とのことです。

 


 

いかがでしょうか、これまではiframeなどでyoutubeの動画などをインラインで埋め込むなどの方法が多かったですが、これで動画を使った表現の幅も広がりそうですね。

 

(参考にさせて頂いたサイト)
video: 動画埋め込み要素
最新版のGoogle Chromeでサイトの埋め込み動画が自動再生されない場合の対応方法まとめ

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】