ホームページに設置した動画が再生できなくて困った。

最近、動画を載せているサイトをよく見かけます。今回は、動画の設置についての記事です。

動画が再生されなかった

今回、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を記載しましょう。もし、同じことで悩んでいる方がいましたら、試してみてください。