ホームページに動画を埋め込みする際、YouTube動画を埋め込みもありますが直接動画ファイルを埋め込みする機会も増えてきました。
その際、videoタグとよく使う属性についてまとめてみます。
videoタグについて
HTML5の「video」タグを使用することで、動画の埋め込みが簡単に埋め込むことができるようになりました。基本コードはいたってシンプルで下記のように記載するだけです。
<video src="動画ファイルのURL" controls></video>属性いろいろ
属性とは、HTML要素毎にさまざまなオプションを設定することができます。
属性にはどの要素にも付けることができるグローバル属性と、要素固有の属性の2種類があります。
さて、videoタグにはどんな属性が付与できるのかよく使うものをピックアップしてみますね。
autoplay
データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
controls
再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
loop
ブラウザは動画が終わると、自動的に先頭に戻り繰り返し再生されます。
muted
初期状態が消音になります。既定値は false であり、動画再生時に音声も再生することを表します。
poster=”画像パス”
動画のダウンロード中に表示する画像を指定できます。
<video controls poster="画像パス" src="動画ファイルのURL"></video>上記例では、動画読み込みまで設定した画像が表示され、再生や音量調整ができる動画を埋め込むこととなります。
動画の需要も増えているWeb業界！今後も使う機会が多くなりそうなので参考になればと思います。
