15

我使用 iframe 函数嵌入视频，并且通过 JavaScript 隐藏/显示内容和视频。

我有一个问题。当我在第一个视频上按播放，然后在不停止第一个视频的情况下单击下一个，第一个视频继续播放。

显示新内容时，我该怎么做才能在“背景”中停止视频？

$(function(){
    $("#link1").click(show1);
});

function show1(){
    $("#pic1").fadeIn();
    $("#pic2").hide();
}

我只是使用这个简单的 JavaScript 函数，其中“pic1”和“pic2” id 是 div 的 id，视频嵌入其中。

我似乎无法让它工作。我试图删除，但如果你愿意，你将无法再次看到视频。

4

1 回答 1

27

这是 YouTube 播放器 API 的实现，无需加载其他文件。要完成这项工作，您必须在所有<iframe>'src属性后加上?enablejsapi=1.

示例（为了便于阅读，我将代码分成几行，您可以放心地省略换行符）：

<div id="pic3">
    <iframe width="640" height="390"
            src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1"
            frameborder="0" allowfullscreen></iframe>
</div>

<div id="tS2" class="jThumbnailScroller">
.. Removed your code for readability....
    <a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a>
    ....

JavaScript + jQuery 代码：

$(function() {
    /* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
     *       if possible. Other videos will be paused*/
    function playVideoAndPauseOthers(frame) {
        $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            var func = this === frame ? 'playVideo' : 'pauseVideo';
            this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        });
    }
    $('#tS2 a[href^="#vid"]').click(function() {
        var frameId = /#vid(\d+)/.exec($(this).attr('href'));
        if (frameId !== null) {
            frameId = frameId[1]; // Get frameId
            playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]);
        }
    });
});
于 2012-01-19T20:15:07.367 回答