Question

所以IE再次罢工。我有一个非常艰难的时间试图找出IE为什么会在视频上显示黑屏。我在网页上有一个按钮，它会调出一个填满整个屏幕的黑色div，div里面是视频，右上角有一个关闭按钮。该视频适用于所有浏览器，包括IE9本身。真正的问题是，当我按下使div显示的按钮时，它会显示所有黑色，就像div的背景一样。但是，如果我右键单击视频应该出现的中心并按下播放选项，它将开始播放，视频工作正常。是的，视频有海报图像，控件出现在每个浏览器上，但在IE9上，控件和海报不会出现，视频屏幕全黑。当我进入IE9中的开发人员工具时，视频甚至会弹出。我简直感到困惑，因为这导致了什么样的故障。我甚至重置IE的互联网选项（因为我在一家公司工作，浏览器在这里稍作规范）并且没有任何效果。我开始认为IE9有一个糟糕的渲染问题，但是idk ....这是代码：

$(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仅在视频加载（或开始加载）之前显示海报，因此如果预加载不是，则图像最多将闪烁或根本不显示。

在ie9中出现在html5视频之上的黑色叠加层

1 个答案: