スライダープラグイン「slick」で動画が自動再生されない(Chromeのみ)

スライダープラグインである「slick」を使ってスライダーを設置しています。

スライダーの中に動画を入れて自動再生させたいのですが、Google Chromeのみ動画が自動再生されません。

正確には、動画のスライドが表示される時に一瞬だけ動くのですが、動画スライドが完全に表示されると再生は停止されます。

HTMLは以下の通り。

<ul class="slide">
<li>
  <video src="video.mp4" autoplay loop muted></video>
</li>
<li>
  <img src="image.jpg">
</li>
</ul>

スクリプトは以下の通りです。

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<script>
$(function(){
  $('.slide').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: true,
    dots: false,
    arrows: false,
    pauseOnHover: false
  });
});
</script>

下記の記事を参考に動画の一時停止と再生を制御するスクリプトを追加してみましたが、やはりChromeのみ動画を再生してくれません。

https://digipress.digi-state.com/tech/how-to-include-youtube-vimeo-video-with-autoplay-slick-js/

スライダー内で動画を自動再生するのは難しいのでしょうか？
お教えいただけると大変助かります。
よろしくお願いいたします。

mp4以外の動画はいかがでしょうか。問題の切り分けのために確認いただきたく。videoタグのオプションをなくした場合とかも試してみてください。

こちらについて追記いたします。
以下それぞれのブラウザで試してみました。

「Chrome」
mp4/webm/ogvすべて自動再生されない

「IE11」
mp4：自動再生される
webm：Chromeと同じ(自動再生されない)
ogv：表示されない

「Firefox」
mp4/webm/ogvすべて自動再生される

それから、"autoplay loop muted"を外してみたら、どのブラウザでも自動再生されなくなりました。

以上、よろしくお願いいたします。

m.ts10806

2018/04/27 04:19

mp4以外の動画はいかがでしょうか。問題の切り分けのために確認いただきたく。videoタグのオプションをなくした場合とかも試してみてください。

tetutetutetu

2018/04/27 12:14

webmとogvも試して情報を追加いたしました。

行動規範の内容に同意します

回答2件

ベストアンサー

Chrome66から、音声付き動画の自動再生ポリシーがより厳格になり、以前にクリックなどの操作をしたかMEIが閾値超えてるかでないと自動再生されません。
あと、IE11でのwebmやogvはIE11がそもそもそれらのメディアに対応していません。
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats

投稿2018/04/27 22:41

編集2018/04/27 22:45