autoplayを設定してるのにvideoが動かない

f:id:b1840943:20180629111034p:plain

背景

背景動画が自動的に流れるデザインのページを作っていて、autoplayを設定しているのに自動で動いてくれませんでした。解決方法自体はすごい簡単でしたが、その情報までにたどり着くまでまったく解決の糸口が見つからなかったので、書いておこうと思います。

 

作っていたのはこのログインフォームです。

 

 

最初のコード

最初に書いたときはこんな感じにしてました。

 

<%= video_tag "married_couple.mp4", class: "landing_video", loop: true, autoplay: true %>

 

Railsアプリなので、erbで書いてます。これで表示自体はまったく問題なくできるんですが、なぜか自動再生がされないんですよね。なので動画なのに静止画のような状態になってしまってました。

 

もちろん、コントローラパネルを表示させて再生をクリックすれば再生はされます。ですがコントローラパネルを表示させると再生ボタンとかが動画にかかって見た目が悪いんですよね…。

 

改善コード

で、調べたところ以下のようなコードにすれば解決することがわかりました。

 

<%= video_tag "married_couple.mp4", class: "landing_video", loop: true, autoplay: true, muted: true %>

 

muted: trueを追加しただけです。これを追加するだけで自動再生されるようになりました。

 

推測ですが、音が出る動画を自動再生されるとUXが著しく損なわれるので禁止してるんじゃないかな…と思います。昔(15年ぐらい前)はありましたけどね。動画じゃないけどMIDIオルゴールとか変な音楽とか流れる個人ホームページ。たしかにうるせえとは思ってました。

 

終わり

これはHTML5自体が音が出るautoplayはサポートしてないってことかな??素晴らしいっすねそれは。いきなり音が流れたらウザいし。

 

そういえばFacebookも動画のautoplay時に音を鳴らす鳴らさないでもめてた記憶があるんですが、あれってどうなったんだろ?最近Facebookのフィードがだいぶさみしくなってきたので確認とれませんでした。