Question

我有几个简单的div和一个视频作为背景：

                    <div class="swiper-slide">
                        <video width="1024" height="704" id="vid" loop>
                            <source src="images/reverse.mp4" type="video/mp4">
                        </video>
                        <div id="overlay">
                            <img src="images/man.png" id="man-photo"/>
                        </div>
                    </div>


        #vid {
            width: 100%;
            height: 100%;
        }
        #overlay {
            position: absolute;
            display:block;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        #man-photo {
            position: absolute;
            top: 200px;
            left: 300px;
            z-index: 1200;
            display: block;
        }

所有都在一个充满活力的滑板内。视频显示正确，图像定位正确但不可见！第一次这样的事情发生在我身上：当我在开发人员工具中检查它并更改其任何属性时，突然它会按预期绘制。

知道如何克服这个问题吗？

Answer 1

显然，Chrome在通过视频重绘图像方面存在一些问题。

可是：

setInterval(function(){$('#man-photo').hide().show(0)},100);

修好了。不是最整洁的解决方案，但它正在发挥作用。

Div不显示在视频上

1 个答案: