jquery - IE9+8 HTML5 视频 - 视频加载但 "invisible"

Question

我在页面上有一个 html5 视频标签，带有 IE8 的 flash 回退。视频隐藏显示:无并附加到父“a”，直到按下播放按钮(图像)。那时，视频元素被移动到父级“b”(叠加层中的一个框)，我调用 jQuery 的 show()。

在 Chrome、FF 和 Safari 上，视频显示。但是，在 IE9 和 IE8 上，视频不显示，但存在。意思是，我可以右键单击它应该在的位置，然后会得到一个与视频相关的上下文菜单。如果我此时点击播放，视频将出现并定期播放。

让视频出现的另一种方法是更改​​视频元素的一些 css。例如，将 box-sizing 从原来的大小 (border-box) 更改为 content-box 将使视频出现，反之亦然。

尝试从该控制台执行此操作是可行的。另一方面，尝试在我的脚本中执行此操作不会。

这是视频元素的 css 及其继承的内容:

*, html > * { box-sizing: border-box; }
audio, canvas, video { display: inline-block; }
.center { text-align: center; }
#section1 #videobox .videoPlayer { cursor: pointer; }

#video {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 10003;
}

我猜这可能是一个奇怪的布局问题(我会说 hasLayout，但幸运的是我没有处理 IE6/7)。

更新我设法在 jsfiddle 中复制了这个问题:http://jsfiddle.net/e76x5/5/

Answer 1

我有一个类似的问题，我所能做的就是删除视频高度的任何 css 声明，并在我显示它后使用 javascript 设置它。你可以查看IE9 HTML5 video visible only after cache clearing