IE9+8 HTML5 Video - video loads but “invisible”

问题

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().

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.

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;
}

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

Update I've managed to duplicate the problem within a jsfiddle: http://jsfiddle.net/e76x5/5/

回答1:

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

来源：https://stackoverflow.com/questions/15685722/ie98-html5-video-video-loads-but-invisible