【業務日記】videoタグで

こないだ業務で、「Topのメイン画像がバグってる！」って言われたんだけど、単純にvideoタグで埋め込まれた動画が流れてない。コードの部分だから誰も触ってないはずだけど、急に見れなくなったって言われて調べてみた結果、

autoplayを指定する場合はmutedもセット

これ先生が見つけてくれたのだけど、自分でも調べたらたくさん記事出てきた。元々autoplayは設定されていたのだけど、mutedが抜けていたのが原因。Google Chromeのバージョン66から音声付きメディアの自動再生が制限されるように仕様が変更されたとのこと。ので、autoplayを設定する際はmutedもセット。

SPが再生されない際はplaysinlineもセット

今度はスマホが再生されてないじゃないか・・となり調べてたら、スマホの場合はplaysinlineがセットとの記述を発見。playsinlineとは映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定する、とのこと。
スマホで動画再生ボタンを押すと全画面で再生されますが、autoplayの場合はその場で再生させる必要があるため、この設定をする必要があるみたいです。が、playsinlineを指定してないと、全画面で再生される、というわけでもないみたいです。

今回の問題はとにかく、autoplayの場合はmutedとplaysinlineがセットということです。覚えた。

それにしても、急にってのが気になる。実際は今まで見れていたのになぜ今急に再生されなくなったのだろう。解決されたからいいのだけど。

参考記事：
http://umlaut.club/web/video_tag
https://lucklog.info/bg-movie-iphone/
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video