自动播放不适用于移动设备 YouTube 视频

Question

该视频无法在移动设备上自动播放，我知道这个问题已经被问过好几次，但代码是专门为我的网站开发的（由一位回答我更多的开发人员开发）。所以我不能完全改变它，我能告诉我要添加什么才能让它起作用吗？

<script>
var player;

function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'autohide': 1,
      'wmode': 'opaque',
      'showinfo': 0,
      'loop': 1,
      'mute': 1,
      //'start': 15,
      //'end': 110,
      'playlist': '{{ product.metafields.left_image.left_image[forloop.index0] }}'
    },
    videoId: '{{ product.metafields.left_image.left_image[forloop.index0] }}',
    events: {
      'onReady': onPlayerReady
    }
  });

}

function onPlayerReady(event) {
  event.target.mute();
  $('#text').fadeIn(400);
  //why this? Well, if you want to overlay text on top of your video, you
  //will have to fade it in once your video has loaded in order for this
  //to work in Safari, or your will get an origin error.
}

//this pauses the video when it's out of view, just wrap your video in .m-//video
$(window).scroll(function() {
  var hT = $('.m-video').height(),
      wS = $(this).scrollTop();
  if (wS > hT) {
    player.pauseVideo();
  }
  else {
    player.playVideo();
  }
});

</script>

Answer 1

可以在onPlayerReady函数的末尾添加如下代码：

if(window.innerWidth < 768) {
  player.playVideo();
}

此代码将通过检查屏幕尺寸开始在移动设备上播放视频。

自动播放不适用于移动设备 YouTube 视频

autoplay not working on mobile devices YouTube video

html

youtube

mobile

overlay

fancybox