なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

【HTML5】video要素について

y223xbi2によるPixabayからの画像

HTML5から新たに追加されたvideo要素について書いていこうと思います。音声と同様に動画ファイルにも様々な形式がありますが、モダンブラウザをカバーするにはいまのところmp4があればいいということが個人的に調べ検証する中でわかりました。

私は動画編集が苦手で勉強中です。どうしてもPhotoshopを使い慣れてしまい、移行できずにいます。しかしPhotoshopでも簡単な動画編集なら可能です。スマホで撮った動画は大きいので解像度を下げたり、スマートフィルター用に変換しフィルターをかけたり、音声を消したりするのはPhotoshopでも出来ます。

Photoshopからの動画の書き出しは「ビデオのレンダリング」からできます。Media Encoderが開くのですが、ここで設定をそのままで保存するとなぜかiPhoneのSafariとChromeで再生ができません(Androidでは再生できました)。かなりいろいろと調べましたが、結果としては「プリセット」を「720p」に設定すると解決しました。

次にソースコードです。

controlsはインターフェースを表示します。
mutedは最初に音声が急に出るのを防ぐものですがcontrolsがないとユーザーが制御できず音がでませんので気を付けましょう。
poster属性は動画読み込み前に最初に表示する画像です。初回読み込み時にどんな動画が再生されるかがユーザーにわかりやすいので必ず設定しましょう。
source要素の中にmp4ファイルへのパスを書きます。
video要素の中に再生できなかったときに表示するものを書きます。

SEO的にも動画が検索上位に表示されるのが当たり前になっていますので、これを機に動画コンテンツを増やすのもいいかもしれません。