javascript - 在关闭按钮上停止视频

Question

当我在 Internet Explorer 和 Google Chrome 中单击关闭按钮时遇到问题。实际上我创建了一个带有图像缩略图的视频播放器，当我单击任何图像时它会在弹出窗口中打开视频但是当我单击关闭按钮时它仍然在后台播放视频，此问题出现在 Internet Explorer 和 Google Chrome 中

<!-- ################################ 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

我认为最好不要使用 embeds 和 flash 标签，而是使用一个著名的 jQuery 插件来让它处理对玩家的命令。

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

来自官方页面:

Unifies the iframe APIs of Youtube, Vimeo and Dailymotion. Build asresponsive jQuery UI widget.

特点

• Play, Pause and Stop command for Youtube, Vimeo and Dailymotion Player

• supports >=IE8, Firefox, Chrome, Safari, Opera Responsive with CSS

• inspired byhttp://alistapart.com/article/creating-intrinsic-ratios-for-video

可以通过此链接找到示例:http://jquery-video.dachcom.ch/demo/

更新

如果出于任何原因您不能使用 jquery-plugin 或您需要通过自己的代码定位嵌入式播放器，您可以为您希望内容来自的每个提供商使用官方 JS API。

例如:

• Vimeo => https://github.com/vimeo/player-api/tree/master/javascript
• Youtube => https://developers.google.com/youtube/iframe_api_reference
• Dailymotion => http://www.dailymotion.com/doc/api/player.html