Lightbox Plus ColorBox插件和自动播放YouTube视频

时间:2013-09-11 作者:Robert

我用的是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视频的更简单、更直接的途径,有什么建议吗?

2 个回复
最合适的回答,由SO网友:Laniakea 整理而成

如果您在标记中硬编码了youtube视频,那么一个解决方案就是添加?autoplay=1src 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);
但在我看来,你现在已经开始工作了。

结束

相关推荐

private functions in plugins

我开发了两个插件,其中一个功能相同(相同的名称,相同的功能)。当试图激活两个插件时,Wordpress会抛出一个错误,因为它不允许我以相同的名称定义函数两次。有没有一种方法可以使这个函数只对插件私有,而不使用面向对象编程,也不简单地重命名函数?我不想使用OOP,因为我首先要学习它。此外,我不想重命名该函数,因为我可能也想在其他插件中使用它,而重命名感觉不太合适。