Webページの動画再生で使うvideo要素を使いこなす
最終更新日: Update!!
最近のウェブサイトでは動画を積極的に使うデザインも増えてきています。HTML5になり新たに追加されたvideoタグを使うことで、Webページで簡単に動画を扱うことが可能になりました。今回はvideo要素について、いろんな属性や設定方法などをまとめていきます。
まずは基本的なvideoタグの記述です。src属性で再生する動画ファイルのパスを指定するだけで動画が再生できます。
実際にこれらの属性の設定した例になります。必要に応じて使い分けていきます。
いかがでしょうか、これまではiframeなどでyoutubeの動画などをインラインで埋め込むなどの方法が多かったですが、これで動画を使った表現の幅も広がりそうですね。 (参考にさせて頂いたサイト) video: 動画埋め込み要素 最新版のGoogle Chromeでサイトの埋め込み動画が自動再生されない場合の対応方法まとめ
<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" autoplay muted> </video>バージョンがChrome 66の場合に音声付き動画の場合には自動再生されない仕様になったことが原因で、音声なしの場合でも指定が必須とのことです。
iOS Safariでvideo要素で指定した動画が自動再生されない場合への対応
Safariでも同じく、autoplay属性で自動再生を指定し、さらにmuted属性を指定しても、再生されない場合には下記のように、playsinline属性を追加します。<video src="movie.mp4" autoplay muted playsinline> </video>playsinline属性を追加することで動画のインライン再生が可能になります。このようにブラウザごとで若干の違いがあるので少しややこしいですね。
いかがでしょうか、これまではiframeなどでyoutubeの動画などをインラインで埋め込むなどの方法が多かったですが、これで動画を使った表現の幅も広がりそうですね。 (参考にさせて頂いたサイト) video: 動画埋め込み要素 最新版のGoogle Chromeでサイトの埋め込み動画が自動再生されない場合の対応方法まとめ
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories