IE8 将 DIV 覆盖定位错误，并在隐藏时继续播放视频

发布于 2024-09-02 16:45:31 字数 399 浏览 9 评论 0原文

请查看：http://www.binarymark.com/Products/PasswordGenerator/ default.aspx（图表上的“概述”选项卡）。问题是，当您单击任何显示“字符组”的图表元素时，所有浏览器（IE8 除外）都表现良好 - 即它们显示覆盖层，开始播放视频，当覆盖层关闭时，视频停止播放div 被隐藏。另一方面，IE8 有两个缺陷：它将覆盖层定位在底部且过于靠右，甚至更烦人的是 - 即使覆盖层 div 关闭，它也会在后台继续播放视频！我使用 flowplayer.org/tools/overlay/ 进行叠加。你能帮忙吗？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月竹挽风 2024-09-09 16:45:37

这是 IE 中已确认的问题（谷歌一下，你会看到很多抱怨）。这篇文章建议每次显示/隐藏选项卡时删除并重新添加或克隆并重新添加对象的某种组合。

另一种方法是使用 YouTube JavaScript Player API 并在每次显示和/或隐藏选项卡时停止视频。

已更新以包含示例：

在深入了解 YouTube JS API 后，我建议使用以前的解决方案。如果您不使用 SWFObject 加载每个视频，则会出现两个跨浏览器错误，这最终会导致比您愿意花费的工作量更多。我能够在没有 SWFObject 的情况下为单个视频提供跨浏览器解决方案，但它无法轻松转换为您当前的设置：

<p><a id="showhide" href="#show">show/hide with YT API pause</a></p>

<div id="tab">
    <object id="video1" width="640" height="385" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always"  width="640" height="385"></embed>
    </object>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    (function () {
        var tab = $('#tab'),
            video1 = $('#video1')[0];
        $('#showhide').click(function (evt) {
            if (video1.pauseVideo) video1.pauseVideo();
            tab.toggle();
            return false;
        });
    })();
</script>

在 jsFiddle 此处。

It is a confirmed issue in IE (google it and you'll see plenty of complaints). This post on SO recommends some combination of removing and re-adding or cloning and re-adding the objects each time you show/hide the tabs.

An alternative approach, since it seems like you are solely using embedded YouTube videos, is to use the YouTube JavaScript Player API and stop the videos each time a tab is shown and/or hidden.

Updated to include example:

After digging into the YouTube JS API, I would recommend going with the former solution. There are two many cross-browser bugs if you don't load each video using SWFObject, which will end up being more work than you're probably willing to spend. I was able to get a cross browser solution working without SWFObject for a single video, but it won't translate easily into your current setup:

<p><a id="showhide" href="#show">show/hide with YT API pause</a></p>

<div id="tab">
    <object id="video1" width="640" height="385" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always"  width="640" height="385"></embed>
    </object>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    (function () {
        var tab = $('#tab'),
            video1 = $('#video1')[0];
        $('#showhide').click(function (evt) {
            if (video1.pauseVideo) video1.pauseVideo();
            tab.toggle();
            return false;
        });
    })();
</script>

On jsFiddle here.

回复收藏 0 原文

~没有更多了~