HTML5、<video>タグでの動画再生、たまに要望があるけど、そのたびにつまずくのでメモ。

自動再生

<video playsinline autoplay loop muted width="100%" height="auto" poster="動画再生できないときに表示される静止画URL"><source src="動画URL" type="video/mp4" /></video>

iOSで自動再生させるには「playsinline」「autoplay」「muted」が必要。

再生開始時間

<video playsinline autoplay loop muted width="100%" height="auto" poster="動画再生できないときに表示される静止画URL"><source src="動画URL#t=5" type="video/mp4" /></video>

動画URLのあとに「#t=5」とすると、5秒位置から再生が始まる。

これだけなら、JavaScriptで制御する必要はなさそう。

ただし、ループさせていると、2周目からは最初から再生されちゃう。

これがJavaScriptでどうにかなるかは不明。

iPadで再生できない

動画形式に敏感なようで、MP4でも再生できる動画と出来ない動画がある。

再生できない動画をプレミアで読み込んで別の形式で書き出すとうまくいった。

• 形式：H.264
• プリセット：Mobile Device 1080p HD、YouTube 1080p フルHDなど

元のファイルと書き出し直したファイルのプロパティを比べて見ると、「画像のサイズ」が違っていた。

• 元ファイル：2046 × 1080
• 書き出し直したファイル：1920 × 1080

※他の形式でも、画像のサイズだけ直せば再生できるかも。

※上下に黒い余白が出てしまうケースがあります。「動画っぽくて良い」とも言えますが。気になる場合は、topとbottomにマイナスマージンをかける。

 

簡単なタグで表示できるのに、つまずくポイントが多い。

あぁ、疲れた。