Question

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

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

我认为最好不要使用嵌入和flash标签，而是使用一个众所周知的jQuery插件让它来处理玩家的命令。

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

来自官方网页：

统一Youtube，Vimeo和Dailymotion的iframe API。建立为响应式jQuery UI小部件。

功能

为Youtube，Vimeo和Dailymotion播放器播放，暂停和停止命令



支持＆gt; = IE8，Firefox，Chrome，Safari，Opera响应CSS



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



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

<强>更新

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

例如：

Vimeo =＆gt; https://github.com/vimeo/player-api/tree/master/javascript

Youtube =＆gt; https://developers.google.com/youtube/iframe_api_reference

Dailymotion =＆gt; http://www.dailymotion.com/doc/api/player.html

关闭按钮停止视频

1 个答案: