关闭按钮停止视频

Question

当我点击Internet和Google Chrome.Actually中的“关闭”按钮时，我面临的问题是:我创建了一个带有图像缩略图的视频播放器，当我单击任何图像时，它会在弹出窗口中打开视频，但当我单击“关闭”按钮时，它仍然继续在后台播放视频，这个问题出现在Internet和Google中。

<!-- ################################ VIDEO ########################## -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $("#bodywrapper").css("display", "none");

    $("#show-panel").click(function () {
        $("#bodywrapper").css("display", "block");
    });

    $("a#show-panel").click(function () {
        $("#bodywrapper").css("display", "block");
        $("#lightbox, #lightbox-panel").fadeIn(600);
    })
    $("#bodywrapper").click(function () {
        $("#bodywrapper").css("display", "none");
        $("#lightbox, #lightbox-panel").fadeOut(300);

    })

    $("a#close-panel").click(function () {
        $("#bodywrapper").css("display", "none");
        $("#lightbox, #lightbox-panel").fadeOut(300);

    })
})

$(document).ready(function () {
    $("#bodywrapper2").css("display", "none");

    $("#show-panel2").click(function () {
        $("#bodywrapper2").css("display", "block");
    });

    $("a#show-panel2").click(function () {
        $("#bodywrapper2").css("display", "block");
        $("#lightbox2, #lightbox-panel2").fadeIn(600);
    })
    $("#bodywrapper2").click(function () {
        $("#bodywrapper2").css("display", "none");
        $("#lightbox2, #lightbox-panel2").fadeOut(300);

    })

    $("a#close-panel2").click(function () {
        $("#bodywrapper2").css("display", "none");
        $("#player").attr('src', '');
        $("#lightbox2, #lightbox-panel2").fadeOut(300);

    })
})

$(document).ready(function () {
    $("#bodywrapper3").css("display", "none");

    $("#show-panel3").click(function () {
        $("#bodywrapper3").css("display", "block");
    });

    $("a#show-panel3").click(function () {
        $("#bodywrapper3").css("display", "block");
        $("#lightbox3, #lightbox-panel3").fadeIn(600);
    })
    $("#bodywrapper3").click(function () {
        $("#bodywrapper3").css("display", "none");
        $("#lightbox3, #lightbox-panel3").fadeOut(300);

    })

    $("a#close-panel3").click(function () {
        $("#bodywrapper3").css("display", "none");
        $("#lightbox3, #lightbox-panel3").fadeOut(300);

    })
})
</script>

html

    <ul  id="videos" >
<li>
<a id="show-panel" href="#"><img src="images/mediapic1.jpg" style="margin-bottom:10px"  alt=""/></a>
<div id="bodywrapper"></div> <!--black env-->
<div id="lightbox-panel">
<a id="close-panel" href="#"></a>
<!-- This version of the embed code is no longer supported. Learn more: https://vimeo.com/s/tnm --> <object width="498" height="280"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=60432002&amp;force_embed=1&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=e2fb2e&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=60432002&amp;force_embed=1&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=e2fb2e&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="498" height="280"></embed></object>
</div>
<a id="show-panel" href="#">test 1<br />
(Vimeo)</a></li>
<li>
<a id="show-panel2" href="#"><img src="images/mediapic2.jpg" style="margin-bottom:10px"  alt=""/></a>
<div id="bodywrapper2"></div> <!--black env-->
<div id="lightbox-panel2">
<a id="close-panel2" href="#"></a>
<iframe id="player" frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/xxagyv" allowfullscreen></iframe>

</div>
<a id="show-panel2" href="#">test 2<br />
(Dailymotion)</a>
</li>

<li>
<a id="show-panel3" href="#"><img src="images/mediapic3.jpg" style="margin-bottom:10px"  alt=""/></a>
<div id="bodywrapper3"></div> <!--black env-->
<div id="lightbox-panel3">
<a id="close-panel3" href="#"></a>
<object width="410" height="341" id="veohFlashPlayer" name="veohFlashPlayer"><param name="movie" value="http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1445&permalinkId=v69827353hY7P87kc&player=videodetailsembedded&videoAutoPlay=0&id=anonymous"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1445&permalinkId=v69827353hY7P87kc&player=videodetailsembedded&videoAutoPlay=0&id=anonymous" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="410" height="341" id="veohFlashPlayerEmbed" name="veohFlashPlayerEmbed"></embed></object>
</div>
<a id="show-panel3" href="#">test 3<br />
(Veoh)</a>
</li>
</ul>

Answer 1

我认为最好不要使用嵌入和闪存标签，而是使用一个著名的jQuery插件，让它处理命令给你的玩家。

一个很好的例子是jquery视频插件：https://github.com/dachcom-digital/jquery-video。

从官方网页：

统一Youtube、Vimeo和Dailymotion的iframe API。构建作为响应的jQuery UI小部件。

特性

• Youtube、Vimeo和Dailymotion播放器的播放、暂停和停止命令

• 支持>=IE8，Firefox，Chrome，Safari，Opera和CSS

• 受http://alistapart.com/article/creating-intrinsic-ratios-for-video启发

通过这个链接可以找到一个例子：http://jquery-video.dachcom.ch/demo/

更新

如果由于任何原因您不能使用jquery插件，或者您需要通过自己的代码针对嵌入式播放器，那么您可以为您希望您的内容来自的每个提供者使用正式的JS。

例如：

• Vimeo => https://github.com/vimeo/player-api/tree/master/javascript
• Youtube => reference
• 日动=> http://www.dailymotion.com/doc/api/player.html