IE9 + 8 HTML5视频 - 视频加载但“不可见”

本文介绍了IE9 + 8 HTML5视频 - 视频加载但“不可见”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在页面上有一个html5视频标签，IE8的闪存后备。视频以display：none隐藏，并附加到父'a'，直到按下播放按钮（图像）。此时，视频元素被移动到父'b'（叠加层中的一个框），我调用jQuery的show（）。

I have an html5 video tag on a page, with a flash fallback for IE8. The video is hidden with display:none and attached to parent 'a' until a play button (image) is pressed. At that point the video element is moved to parent 'b' (a box within an overlay) and i call jQuery's show().

在Chrome，FF和Safari上，视频节目。但是，在IE9和IE8上，视频没有显示，但是在那里。意思是，我可以右键单击它应该的位置，并获得与视频相关的上下文菜单。如果我点击此时播放，视频将会出现并定期播放。

On Chrome, FF and Safari, the video shows. However, on IE9 and IE8, the video doesn't show, but is there. Meaning, I can right click where it should be and will get a video related context menu. If I click play at that point, the video will appear and play regularly.

另一种让视频显示的方法是更改视频的某些内容元件。例如，将框大小调整为内容框（边框框）会使视频显示，反之亦然。

Another way to get the video to appear, is to change some of the css for the video element. For instance, changing the box-sizing from what it is (border-box) to content-box will make the video appear, and vice versa.

尝试这样做从那个控制台工作。另一方面，尝试在我的脚本中执行此操作不会。

Trying to do that from that console works. On the other hand, trying to do that within my script doesn't.

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

Here's the css for the video element and whatever it inherits:

*, 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）。

I'm guessing this might be a weird layout problem (I would say hasLayout, but thankfully i'm not dealing with IE6/7).

更新
我设法复制了问题jsfiddle：

视频加载但

IE9 + 8 HTML5视频 - 视频加载但“不可见”

问题描述

推荐答案