IE9 + 8 HTML5视频 - 视频加载但“不可见” [英] IE9+8 HTML5 Video - video loads but "invisible"

问题描述

我在页面上有一个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： http://jsfiddle.net/e76x5/5/

推荐答案

我遇到了类似的问题，所有我能解决的问题是删除视频高度的任何css声明并在显示后使用javascript设置它。
您可以查看 IE9 HTML5视频仅可见清除缓存后

I had a similar problem and all that I could do to fix it was removing any css declaration of the video's height and setting it using javascript after I display it. You can check IE9 HTML5 video visible only after cache clearing

这篇关于IE9 + 8 HTML5视频 - 视频加载但“不可见”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！