ログイン

問題37 動画を表出しましょう

HTML_CSSの問題

HTML_CSS

ファーストビューで動画を表出させているWebサイトをよくみます。 ユーザーにインパクトを与えることで、印象付けをすることができます。 実務でも動画を埋め込むことはよくあるので、覚えておきましょう。

動画を表出しましょう

問題

動画を表出させてみましょう。
また、あわせて自動リピートを設定しましょう!

動画は下記のurlをお使い下さい。
https://ninjacode.work/assets/img/qa/q37.mov

見本動画を参考にして、CSSに記述していきましょう。

期待する画面

コードのアイコン

解答ソースコード

              <video loop playsinline muted autoplay>;
  <source src="https://ninjacode.work/assets/img/qa/q37.mov">;
</video>  
¥HTML¥
            
答えのアイコン

解説

ブラウザに動画を表出したい場合は
videoタグを使用します。

また、videoタグにloop属性を付与することで
動画の再生ループを指定する事ができます。

音声のミュートやコントロールなどもオプションとして付与することができます。
ログインして解答を見る
動画の表出に使用したvideoタグは、幅広い拡張子の動画を埋め込むことができます。
高画質で幅広く利用される「mp4」やiPhoneの動画の拡張子である「.mov」も対応しています。

今回使用したloop属性以外についても詳しく解説しておきます。
・autoplay:ページを開いた時に自動で再生する
・muted:動画再生時にミュートで流れる
・controls:動画の再生位置や音量などのコントロールパーツを表示させる
解答で登場したplaysinline属性は動画をインライン(埋め込まれた場所だけで表示する)で再生するように指定するものです。
muted属性は、動画の音声が勝手に流れないように制御するためのミュート機能です。
chromeなどのブラウザでは、muted属性が指定されていないとautoplay属性は動作しないように設定されています。

最後に注意点ですが、動画を埋め込む際はファイルサイズをなるべく圧縮しておきましょう。
動画は画像などに比べてファイルサイズが大きいため、サーバーの転送量が増えたりユーザーの通信料を増やしてしまうので良くありません。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!