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