Question

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

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

Answer 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>

Mozilla HTML5视频和画布问题

1 个答案: