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

【问题标题】：IE9+8 HTML5 Video - video loads but "invisible"IE9+8 HTML5 视频 - 视频加载但“不可见”
【发布时间】：2013-03-28 15:23:36
【问题描述】：

我在页面上有一个 html5 视频标签，带有 IE8 的 Flash 后备。视频被 display:none 隐藏并附加到父“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/

【问题讨论】：

查看mediaelementjs.com。可能比滚动自己的后备更容易。
我很熟悉。由于带宽，我正在尝试节省额外费用。在最坏的情况下，我可能只将它包含在 IE 中，谢谢。
有没有链接让我们可以看到js
jsfiddle 添加到问题
小提琴不适合我

标签： jquery css internet-explorer-8 internet-explorer-9 html5-video

【解决方案1】：

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

【讨论】：