YTPlayer背景视频不会自动播放

时间:2019-10-06 02:09:37

标签: javascript jquery html css youtube

我已按照文档示例集成了插件https://github.com/pupunzi/jquery.mb.YTPlayer,但由于无法自动启动视频,用户必须单击以播放视频。

有一种方法可以模拟这种点击,或者提供一些无需任何用户操作即可开始加载视频的解决方案。

示例的完整代码: https://jsfiddle.net/py7bkox3/

HTML

<div id="video"></div>
<div id="ctn">
  <h1>TITLE EXAMPLE</h1>
</div>

Javascript:

// When the document is ready
$(document).ready(function(){

  // Initialize YouTube player
  $("#video").YTPlayer({
    // URL of the YouTube video
    videoURL:'https://youtu.be/BsekcY04xvQ',
    // If you want it as background of your website
    // or of an element e.g #elementId
    containment: "#ctn",
    autoplay: true,
    controls: 0,
    mute: true,
    startAt: 0,
    opacity: 1,
    // Hide YouTube Controls
    showControls: false,
    onReady: function(){
    },
    onError: function(err){
      console.log("An error ocurred", err);
    }
  });
});

CSS

#ctn {
  display: block;
  margin: 0;
  padding: 250px 0 !important;
  width: 100%;
}

1 个答案:

答案 0 :(得分:1)

许多浏览器会阻止有声或无声的自动播放。这可能与您的浏览器有关,而不是代码本身。

Firefox permissions screen 这是我在Firefox中自动播放设置的屏幕截图。我将检查您的浏览器设置,并查看其是否阻止自动播放。