目次
はじめに
HTMLのタグにvideoタグというものがあります。主目的としては、動画をWEB画面に埋め込むことができます。
昨今はYouTubeを埋め込むことが多いですが、自社管理したい場合videoタグを使います。
今回はvideoタグで埋め込んだサンプル動画とコードをご紹介出来ればと思います。
埋め込みのサンプル動画
Wikipediaを適当にキャプチャーしたサンプル動画になります。動画の形式を縦型にすれば、YouTubeのショート動画のようなアスペクト比でも問題なく実装できます。
埋め込みコードのサンプル及び解説
コードのサンプルを以下に掲載しています。
<video src="./videos/html-video.mp4" controls width="320" height="480" loop preload="auto" poster="./pictures/video-thumb.jpg"></video>コード内で使用しているものを解説
- video・・・ビデオタグであり、src属性でビデオファイルを指定する。
- controls・・・動画にコントロール機能（再生、音量など）を表示させる
- loop・・・動画をループ再生するよう設定
- preload・・・動画再生前から動画ファイルの読み込みを始める
- poster・・・動画再生前の表示領域にサムネを設定する
コード内で使用していない属性を解説
- autoplay・・・webページが読み込まれたときに、自動で再生する
- playsinline・・・モバイル端末でフルスクリーン再生を回避
- muted・・・デフォルトで音声ボリュームをミュート（無音）にする
