スライダープラグインである「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"を外してみたら、どのブラウザでも自動再生されなくなりました。
以上、よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー