我用的是WP v3。6和v2。使用内嵌灯箱打开嵌入iframe的YouTube视频。我的老板想在灯箱打开时播放视频。因此,最初我尝试:
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 player1;
function onYouTubeIframeAPIReady() {
console.log(\'api ready\');
player1 = new YT.Player(\'player1\', {});
}
jQuery(function()){
jQuery(\'.lbp-inline-link-1\').click(function(){
player1.playVideo(); }
});
});
然而,这并不奏效。我最终发现,当打开和关闭lightbox时,插件会停止正在播放的视频,所以我触发播放的点击事件太早了。然后,我将通话改为:
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 player1;
function onYouTubeIframeAPIReady() {
console.log(\'api ready\');
player1 = new YT.Player(\'player1\', {
events: {
\'onReady\': onPlayerReady
}
});
}
function onPlayerReady(event){
console.log(\'player ready\');
jQuery(\'.lbp-inline-link-1\').click(function(){
console.log(\'click ready\');
var fn = function(){ event.target.playVideo(); }
setTimeout(fn, 2500);
});
}
当前示例页位于
https://test-cms.salesgenie.com/salesgenie-data-quality/这在Chrome中起作用,但在所有其他浏览器中,它只会在第二次在lightbox中打开视频时自动播放。关于自动播放YouTube视频的更简单、更直接的途径,有什么建议吗?
最合适的回答,由SO网友:Laniakea 整理而成
如果您在标记中硬编码了youtube视频,那么一个解决方案就是添加?autoplay=1
到src
url。
例如:src="//www.youtube.com/embed/i8GZwagNZss?autoplay=1"
如果你需要进一步的帮助,请告诉我。
SO网友:EHerman
我开发了一个wordpress插件,可以向用户显示youtube视频。单击预览按钮时,将出现一个厚框,YouTube视频将自动播放。当用户关闭厚框模式时,视频继续播放,这非常令人沮丧(我是用chrome开发的,所以我不知道这是chrome特有的问题)。
我的解决方案是编写一个JavaScript计时器,每半秒钟检查一次div是否隐藏。如果是,我删除了模态中包含的内容。
// hack to prevent iframe from playing when thicbox closes
window.setInterval(function(){
if (jQuery(\'#TB_ajaxContent\').is(":visible")){
return;
} else {
jQuery(\'#wp2yt-uploader-preview-video\').html(\'\');
}
}, 500);
也许你可以这样做:
// hack to prevent iframe from playing when thicbox closes
window.setInterval(function(){
if (jQuery(\'#fancybox-overlay\').is(":visible")){
return;
} else {
jQuery(\'#fancybox-content\').html(\'\');
}
}, 500);
但在我看来,你现在已经开始工作了。