YTPlayer 背景视频不自动播放
YTPlayer background video does not play automatically
我已经集成了插件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%;
}
许多浏览器会阻止有声或无声自动播放。这可能是您浏览器的问题,而不是代码本身的问题。
这是我在 Firefox 中的自动播放设置的屏幕截图。我会检查您的浏览器设置,看看它是否阻止自动播放。
我已经集成了插件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%;
}
许多浏览器会阻止有声或无声自动播放。这可能是您浏览器的问题,而不是代码本身的问题。