今この動画時代、ホームページに動画をのせたい！というのはWebデザイナーなら誰もが一回思うはず。
しかし、そこで私がかなりどつぼにはまり、迷い込んだので解決方法の備考録をつけたいと思います。
扱う動画は今通常に使うmp4になります。
まずはシンプルに
<video src=”sample.mp4″ ></video>
これが通常の書き方ですね。
しかしそれに属性がついてきます。
まずは動画は今主流のmp4を前提としています。videoタグの属性について
videoタグでのカスタマイズの属性を簡単に説明していきましょう。
controls:コントロールパネルを表示する
<video src=”sample.mp4″ controls ></video>
こうするとコントロールパネルをつけることができます。再生ボタンやボリュームのついてるものですね。さて、今回の目的はスマホで自動再生のメインビジュアルをつけたい！ということなので自動再生の属性が必要になります。
<h4 class=”h4_midashi”>autoplay:自動再生する</h4>
<video src=”sample.mp4″ autoplay></video>
autoplay(auto属性)は自動再生しなさいという命令です。しかしスマホに搭載させているChromeやSafariは音がでる状態では自動再生してくれません。
muted:音をでないようにする
<video src=”sample.mp4″ autoplay muted></video>
音は無音にしてねっていう指示がないと自動再生しない仕様をクリアするための指示です。
さてさらに動画だしループさせたいよねってことでloop:繰り返しするようにする
<video src=”sample.mp4″ autoplay muted loop></video>
これで自動再生、ループの指示は完了です。よしよし、実機確認、私はAndroidのXperiaを使用しています。OK。動画再生されている。Iphoneユーザに確認。「表示されてないよ・・・・」「え？」ゲーム業界、Web業界でも散々困らせられる端末依存です。
playsinline:iOS用のおまじない
詳細まで知りたい人はぐぐって下さい。とりあえず、playsinlineをいれないと再生されないiPhoneがでます。
<h4 class=”h4_midashi”>まとめ</h4>
<video src=”sample.mp4″ autoplay muted loop playsinline></video>
でvideoタグの命令はOKです。コントロールパネルつける時はposterという静止画を表示させる属性が必要になりますが今回は動画、自動再生、ループなのでなくてもまぁ・・・・いいでしょう。さて、Iphoneユーザーに確認。
「表示されてないよー」「え？」タグはこれでOKなんだが、、、実際私はこここからが長かったです。答えからいいましょう再生するmp4の走査方式に問題がありました。どうやらiOSはインターレース方式がだめなようで・・・プログレッシブ方式だと再生されました。videoタグまで問題なかった人はインターレース方式になってないか確認しましょう。変更はPremireの書き出しのビデオのフィールドオーダーから出来ます。これで私の半日はつぶれてしまいましたが解決できたということで。 mp4動画をスマホで自動再生させたい場合はvideoタグは
<video src=”sample.mp4″ autoplay muted loop playsinline></video>
動画の走査方式はプログレッシブ方式。
と覚えておきましょう。