黑色覆盖显示在 ie9 中的 html5 视频之上

Question

于是IE再次来袭。我很难弄清楚为什么 IE 会在视频上方显示黑屏。我在网页上有一个按钮，它会弹出一个黑色 div 填满整个屏幕，div 里面是视频，右上角还有一个关闭按钮。该视频适用于所有浏览器，包括 IE9 本身。真正的问题是，当我按下使 div 出现的按钮时，它显示为全黑，就像 div 的背景一样。但是，如果我右键单击视频应该出现的中心并按播放选项，它将开始播放并且视频工作正常。是的，该视频有一个海报图像和控件出现在每个浏览器上，但在 IE9 上，控件和海报不出现并且视频屏幕全黑。当我进入 IE9 中的开发人员工具时，甚至会弹出该视频。我只是对导致这种情况的故障类型感到困惑。我什至重置了 IE 的互联网选项（因为我在一家公司工作，这里的浏览器受到轻微监管），但没有任何效果。我开始认为 IE9 有一个糟糕的渲染问题，但是我知道....这是代码：

$(window).load(function() {
  $("#show-video").click(function() {
    $("#presentation").css("display","block");
  });
  $("#close").click(function() {
    $("#presentation").css("display","none"); 
  });
});

.title {
    background:
        url('http://www.sasllpcpa.com/images/sas-consulting-doctor.png') no-repeat bottom right,
        url('http://www.sasllpcpa.com/images/squared-metal.png') repeat;
    padding-top:25px;
    padding-bottom:25px;
    border-top:3px solid #111;
}

    .title h1 {
        font-size:4.32rem;
        color:#005287;
        font-family:'Open Sans', 'Droid Sans', sans-serif;
        font-weigt:700;
        margin:0;
    }

    .title h2 {
        font-size:1.529rem;
        color:#111;
        margin-top:20px;
        font-style:italic;
    }

    .title .row > a {
        display:inline-block;
        padding:8px;
        background:#FFF;
        border-radius:5px;
        color:#005287;
        margin-top:100px;
        overflow:hidden;
    }

    .video-button {
        display:inline-block;
    }

    img.video-button {
        width:32px;
        border-radius:0;
        margin-right:10px;
        vertical-align: middle;
    }

    div.video-button { /* video icon */
        font-family:'Droid Sans', 'Arial', sans-serif;
        font-size:0.8823rem;
        font-weight:700;
        margin-top:2px;
    }

    #presentation { /* pop-up box for the video */
        position:fixed;
        background:#000;
        top:0;
        left:0;
        color:#FFF;
        width:100%;
        height:100%;
        z-index:1001;
        display:none;
    }

    #close {
        color:#FFF;
        font-family:'Droid Sans', 'Arial', sans-serif;
        font-weight:700;
        font-size:1.3rem;
        background:#CC0000 ;
        width:40px;
        text-align: center;
        position:absolute;
        top:0;
        right:0;
    }

    .video-container {
        position:relative;
        top:10%;
        margin:auto;
        width:100%;
        height:100%;
        max-height:480px;
        max-width:640px;  
    }

    .title video {
        max-width:100%;
        height:100%;
        
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="title">
        <div class="row">
            <h1>SAS Consulting <br>Services, LLC</h1>
            <h2>...your dedicated healthcare trusted advisors!</h2>
            <a id="show-video" href="#presentation">
                    <img class="video-button" src="http://www.sasllpcpa.com/images/icons/video.png" alt="video"/>
                    <div class="video-button">About SAS Consulting</div>
            </a>
        </div>
        <div id="presentation">
            <a id="close" href="#">X</a>
            <div class="video-container">
                <video id="webVideo" poster="http://www.sasllpcpa.com/images/presentation-poster.png" controls="controls">
                    <source src="http://www.sasllpcpa.com/videos/about-sas-consulting-services.mp4">
                    <source src="http://www.sasllpcpa.com/videos/About_SAS_Consulting_Services.ogv">
                    Your web browser does not support HTML5 Video.
                </video>
            </div>
        </div>
    </section>

（你可以把上面的代码复制到一个jsfiddle上，我已经用图片和视频设置好了[抱歉，如果看起来有点乱，我很着急]）。无论如何，就像我说的，它适用于所有浏览器，但 IE9 显示黑屏，除非您右键单击并在#presentation div 的中心按下播放。

为了更好地查看此网页，请转到 http://www.sasllpcpa.com/sas_consulting/

Answer 1

您需要将 preload="none" 添加到视频元素。问题是，ie9 只在视频加载（或开始加载）之前显示海报，所以如果预加载不是 none 图像最多会闪烁或根本不显示。

黑色覆盖显示在 ie9 中的 html5 视频之上

Black overlay showing up on top of html5 video in ie9

html

css

video

jquery

internet-explorer-9