autoplayを設定してるのにvideoが動かない
背景
背景動画が自動的に流れるデザインのページを作っていて、autoplayを設定しているのに自動で動いてくれませんでした。解決方法自体はすごい簡単でしたが、その情報までにたどり着くまでまったく解決の糸口が見つからなかったので、書いておこうと思います。
作っていたのはこのログインフォームです。
ログインフォームをデザイン完了👨💻
— 金子幸三郎@未経験エンジニア (@Kosaburo_Kaneko) 2018年6月22日
所要時間1時間ぐらい。
実はPairsはメアド使ったログインフォームがないので、ここだけはオリジナルのデザインでいきました!やっぱ動画がこれに最適化されたものじゃないからいろいろ気になるな… pic.twitter.com/AHkRRHHvP0
最初のコード
最初に書いたときはこんな感じにしてました。
Railsアプリなので、erbで書いてます。これで表示自体はまったく問題なくできるんですが、なぜか自動再生がされないんですよね。なので動画なのに静止画のような状態になってしまってました。
もちろん、コントローラパネルを表示させて再生をクリックすれば再生はされます。ですがコントローラパネルを表示させると再生ボタンとかが動画にかかって見た目が悪いんですよね…。
改善コード
で、調べたところ以下のようなコードにすれば解決することがわかりました。
muted: trueを追加しただけです。これを追加するだけで自動再生されるようになりました。
推測ですが、音が出る動画を自動再生されるとUXが著しく損なわれるので禁止してるんじゃないかな…と思います。昔(15年ぐらい前)はありましたけどね。動画じゃないけどMIDIオルゴールとか変な音楽とか流れる個人ホームページ。たしかにうるせえとは思ってました。
終わり
これはHTML5自体が音が出るautoplayはサポートしてないってことかな??素晴らしいっすねそれは。いきなり音が流れたらウザいし。
そういえばFacebookも動画のautoplay時に音を鳴らす鳴らさないでもめてた記憶があるんですが、あれってどうなったんだろ?最近Facebookのフィードがだいぶさみしくなってきたので確認とれませんでした。