HTML CSS - 2019-03-27

埋め込み動画が自動再生されない場合の対応方法-Chrome・Firefox対応

Chrome バージョン66 ・Firefox バージョン66から自動再生される動画を無効化したそうです。
音声をミュートにすると自動再生するようなので対応方法をまとめました。

youtubeの場合

html

<div id="js-test-youtube"></div>

javascript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var youTubeId = 'XXXXXX'

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
   'js-test-youtube',
    {
      videoId: youTubeId,
        playerVars: {
          rel : 0,
          controls : 0,
          autoplay : 1,
          mute : 1,
          loop : 1,
          playlist : youTubeId,
          showinfo : 0
       },
       events: {
        'onReady': onPlayerReady
      }
    }
  );
}

function onPlayerReady(event) {
  var player = event.target
  event.target.mute();
  event.target.playVideo();
}

videoタグの場合

html

<video muted autoplay loop>
  <source src="video/movie.mp4">
</video>
Related Posts

Related Posts

YouTube APIを使って視聴数ランキングを表示する(PHP)

2018-04-25