Mozilla HTML5 视频和画布问题答案

【问题标题】：Mozilla HTML5 video and canvas problemsMozilla HTML5 视频和画布问题
【发布时间】：2011-11-01 03:57:25
【问题描述】：

我有全屏画布，我在上面画视频。我用 z-index 将视频隐藏在画布后面。当我将浏览器的大小调整为小于视频滚动条的原始大小时，我可以滚动并查看我不喜欢的视频的其余部分，因此我通过将视频大小调整为小尺寸来解决问题。这解决了 chrome、opera 和 IE 中的问题但是在 Mozilla 中，这个小尺寸的视频出现在我的画布上，所以我有一个带有小视频的白屏。我不明白为什么，因为视频 z-index 仍然低于画布的 z-index。知道如何解决这个问题吗？

这是我的代码：http://pastebin.com/Ag3LvHUV

【问题讨论】：

如果您向我们展示画布和视频的 HTML 代码以及所涉及的样式，将会有所帮助。
我将代码添加到我的原始帖子中。
这看起来应该可以工作...是否有显示问题的实际页面？当我在 Firefox 中尝试您粘贴的源时，我没有看到任何问题....
我似乎在 mozilla 调整视频大小时会将其置于画布上并忽略 z-index
改了代码同样的问题。

标签： html firefox video canvas z-index

【解决方案1】：

您是否尝试过将画布放在 DOM 中的视频元素之后，然后以这种方式重新排列？

<body >
    <form id="form1" runat="server">
    <div>
        <video id="v" loop>
            <source src='content/bbb-mp4.mp4' type='video/mp4;'>
            <source src='content/bbb-ogv.ogg' type='video/ogg;'>
        </video>
        <canvas id="c"></canvas>
        <div id="mainCon">
            <div id="main" onmouseover="this.style.opacity= 0.8;" onmouseout="this.style.opacity= 0.1;">
                <h1>Test</h1>
                Video background
            </div>
        </div>
    </div>
    </form>
</body>

【讨论】：

是的，是一样的。这是i.imgur.com/Tss8Y.png和i.imgur.com/RUI02.jpg的屏幕截图
我最新版的代码pastebin.com/HejgHY7i还是同样的问题。