javascript - 在停止状态下更改图像上的 youtube 视频

Question

我制作了这样的代码，它改变了 Youtube 视频网站上的图像。

<script type="text/javascript"> 
$(window).load(function(){
    $('img.demovideo').click(function(){
        video = '<iframe class="demovideo" width="100%" height="551px" src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);
});
$('img.demovideo').css('cursor', 'pointer');
});
</script>

如何在播放器状态 0 上将 Youtube 视频更改回图像？

我做了这样的代码，但它不起作用:

<script type="text/javascript"> 

raketaplayer.onStateChange () {

b = raketaplayer.getPlayerState();

if (b=0) {

image = '<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header_2.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&amp;rel=0&amp;theme=light&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white&amp;autoplay=1&amp;enablejsapi=1&amp;playerapiid=raketaplayer" style="cursor: pointer;">';
    $(iframe.demovideo).replaceWith(image);
});
$('img.demovideo').css('cursor', 'pointer');
});

}

}

</script>

它出什么问题了？请帮忙 :)

图片代码如下:

<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&amp;enablejsapi=1&amp;playerapiid=raketaplayer">

Answer 1

您可能想要解决的几个问题。首先，您的条件语句使用单个等号而不是双等号。更重要的是，当您执行 onStateChange 函数时，它可以接受一个表示事件的参数，该事件将报告状态更改，而无需您查询它，如下所示:

raketaplayer.onStateChange (event) {

if (event.data==0) {

image = '<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header_2.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&amp;rel=0&amp;theme=light&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white&amp;autoplay=1&amp;enablejsapi=1&amp;playerapiid=raketaplayer" style="cursor: pointer;">';
    $(iframe.demovideo).replaceWith(image);
});
$('img.demovideo').css('cursor', 'pointer');
});

}

}

最后，确保您已将 onStateChange 函数绑定(bind)到您在代码的其他位置创建的 YT.Player 对象的状态更改事件。