ホームページに設置した動画が再生できなくて困った。
最近、動画を載せているサイトをよく見かけます。今回は、動画の設置についての記事です。
目次
動画が再生されなかった
今回、Youtubeを使用することなく、ホームページ自体に動画を設置することになりました。
その場合は、video要素を指定して動画を表示させます。単純にvideo要素を指定すれば良いと思っていましたが、動画が表示されません。
「おかしいなー、なんでだ？」
いろいろ設定しましたが、上手く行かずに、困っていました。
今回の調査で2つのことが分かりました。ちなみに本記事は2018.11月の時点の話です。
mutedを記載しよう
まず1つ目は、video要素にmutedを記載する必要があります。mutedを記載すると音がミュートされます。
<video autoplay muted>
<source src="./video.mp4">
</video>
これで、動画が再生されるようになりました。
原因は、ブラウザが音が出る動画を、表示させないようにしているからだそうです。確かにホームページを見て、勝手に音が出るとユーザは迷惑ですね。
video要素の設定に、間違いは無かったのですが、chromeやsafariなどのブラウザが勝手に制御してくれたらしいです。ブラウザが原因とは気づかなかったです。
playsinlineを記載しよう
しかし、パソコンだと動画が再生されますが、スマートフォンで確認すると、動画が再生されません。この点が、自分はかなりつまづきました。
<video autoplay muted playsinline>
<source src="./video.mp4">
</video>
スマートフォンでも動画を再生させたい場合は、playsinlineを記載する必要があります。
playsinlineの意味を、参考サイト（MDN）から引用します。
”論理属性で、映像を「インライン」で再生する、すなわち要素の再生エリア内で再生するかを指定します。この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。”
指定した要素のエリア内で再生するということでしょうか？説明を読んでもピンと来ません。なんで、これを記載しないとスマートフォンで動画が表示されないのか？理由が分かりませんでした。
まとめ
ホームページに設置した動画が再生されないときは、mutedを記載しましょう。スマートフォンで見た時に再生されない時は、playsinlineを記載しましょう。もし、同じことで悩んでいる方がいましたら、試してみてください。
