問題
37動画を表示してみよう
ファーストビューで動画を表出させているWebサイトをよくみます。 ユーザーにインパクトを与えることで、印象付けをすることができます。 実務でも動画を埋め込むことはよくあるので、覚えておきましょう。
HTML_CSSの問題に挑戦しよう！
問題
「動画を表示してみよう」
動画を表示してみましょう。
また、あわせて自動リピートを設定しましょう!
動画は下記のurlをお使い下さい。
https://ninjacode.work/assets/img/qa/q37.mov
見本動画を参考にして、CSSに記述していきましょう。
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
ブラウザに動画を表出したい場合は
videoタグを使用します。
また、videoタグにloop属性を付与することで
動画の再生ループを指定する事ができます。
音声のミュートやコントロールなどもオプションとして付与することができます。
補足
動画の表出に使用したvideoタグは、幅広い拡張子の動画を埋め込むことができます。
高画質で幅広く利用される「mp4」やiPhoneの動画の拡張子である「.mov」も対応しています。
今回使用したloop属性以外についても詳しく解説しておきます。
・autoplay:ページを開いた時に自動で再生する
・muted:動画再生時にミュートで流れる
・controls:動画の再生位置や音量などのコントロールパーツを表示させる
解答で登場したplaysinline属性は動画をインライン(埋め込まれた場所だけで表示する)で再生するように指定するものです。
muted属性は、動画の音声が勝手に流れないように制御するためのミュート機能です。
chromeなどのブラウザでは、muted属性が指定されていないとautoplay属性は動作しないように設定されています。
最後に注意点ですが、動画を埋め込む際はファイルサイズをなるべく圧縮しておきましょう。
動画は画像などに比べてファイルサイズが大きいため、サーバーの転送量が増えたりユーザーの通信料を増やしてしまうので良くありません。
