ホームページにvideoタグで動画を埋め込む
どうも！寝屋川のホームページ制作会社CUBESの小林です。
今後は、ホームページに画像の代わりに動画を入れることが増えてくると思います。
YouTubeの動画を表示する場合はiframeタグの使用やWordPressだとURLを入力するだけで表示されますが、今回はYouTube以外の動画をアップする方法になります。
HTML5では簡単にvideoタグで動画を表示することが出来ます。
例えばこんな感じでホームーページに動画を表示できます。
Videoタグの使い方
videoタグはimgタグと同じように簡単に動画を表示できます。
画像形式にjpgやtiffがあるように動画にも色々なフォーマットがあります。WebMやFLVAVI、QuickTimeなどの形式もありますが、現在は再生ブラウザーが多い「mp4」がおすすめです。
videoタグで動画を表示
<video src="hogehoge.mp4"></video><video></video>の中には何も入力しなくても大丈夫です。動画パスは画像ファイルと同じsrc=にパスを書きます。
ただ、このままだと動画ファイルサイズのまま表示されます。また再生ボタンも表示されないので使い勝手が悪いです。
このような感じで。
真っ暗で使い勝手わるいですね。ではカスタマイズしていきます。（iPhoneだと真っ白で表示されているはずです。）
videoタグ カスタマイズ：コントロールパネルの表示
<video src="hogehoge.mp4" controls></video>srcのあとに「controls」を追加するだけで再生ボタンなどのコントローラーが表示できます。
videoタグ カスタマイズ：サムネイルの表示
<video src="hogehoge.mp4" poster=“hoge.jpg” controls></video>動画が真っ黒な画面から始まると内容が判らず再生数が伸びないので内容がわかるサムネイルを表示します。
poster=“****.jpg”を追加することで、動画の1コマ目に****.jpgが表示されます。（ただ、このサンプルではなぜか表示されない減少が・・・現在、原因を調査中です。）
vidoeタグ カスタマイズ：レスポンシブに対応
<video src="hogehoge.mp4" width="100%" height="auto"></video>「width=”100%” height=”auto”」を追加します。こちらで動画コントロール・レスポンシブ対応になります。
その他にも動画自動再生、ループ再生などのカスタマイズもありますが実用的ではないので、今回は省きます。
