div在ios5上有黑色背景

Question

我正在制作一个页面，其中包含一个 div、一个视频数组和按钮。有问题的 div 放置在 <video> 标记之前，并显示为黑色，而不是设置为的背景图像。我尝试将 div 放在不同的位置，在 CSS 中或直接链接图像，淡入淡出 <video>，甚至为视频放置海报图像，使其不为空白。没有什么。

我能得到一些帮助吗，这必须在星期一完成（连同其他五件事），所以我很赶时间。javascript 是

$(document).ready(function () {
    var video = $('#myVid');
    //before everything get started
    video.on('loadedmetadata');

    $('li, .thumbs').on('click', function () {
        $('.thumbs').bind('click', function() {
        $('#MyT').fadeIn(0);
        $('.slider').fadeIn(0);
        $('.timeBar').fadeOut(0);
        });
        var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];
            myVideo.load();
    setTimeout(function(){
        myVideo.play();
    }, 200);
    $('#myVid').bind("playing", function() {
        $('#MyT').fadeOut(1000);
        $('.timeBar').delay(250).fadeIn(0);

    });

    $('#myVid').bind("ended", function () {
        $('.slider').fadeOut(0);
        $('.timeBar').fadeOut(0);

    });

});
});

[相关] CSS 是

 #bigPic {
        position:absolute;
        background-image:url(images/IMG_08532.jpg);
        margin-left:-8px;   
        margin-top:-16px;
        height:768px;   
        width:1024px;   
    }
    #wrapper {
        width: 1024px;  
        height: 768px;
    }
    #myVid{ 
        position:absolute;
        top:0;  
        left:0;
        margin:none;    
        padding:none;

    }

然后html是

<div id="wrapper">
<div id="MyT" class="norm"></div>
    <div id="bigPic">
    <video id="myVid" class="normal" type="m4v" showlogo="false" height="768" width="1024" poster="images/IMG_08532.jpg"/>

</div>
<div class="buttons">
        <div id="content">
            <div class='slider'><div class="control"><div class="progress"><span class="timeBar"></span></div></div></div>
            <ul class='thumbs'>
              <div style="top:0px;"><li rel='1'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:128px;"><li rel='2'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:256px;"<li rel='3'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:384px;"><li rel='4'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:512px;"><li rel='5'><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:640px;"><li rel='6'><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
            </ul>
       </div>
  </div>
</div>

编辑这不是视频，我尝试了一些不可见（并且也淡出）的方法，然后点击它又回来了。看起来它实际上是 div“myT”，但是当图像链接在其他 div 上时，它们可以正常工作。 请有人帮忙！

Answer 1

我猜大黑是 ios 显示的“视频”。我会尝试的是：让 div 在视频之后（而不是在视频周围），绝对定位将其移动到视频上。而onclick只是隐藏它。不幸的是，您必须再次单击视频才能开始，因为苹果不允许您通过 javascript 进行操作

Answer 2

由于您尝试了很多方法，例如设置 <video> 海报并将图像设置为包含视频的 div 的背景，但都没有奏效，因此问题很可能出在图像或图像路径。简而言之，找不到图像。确保图像路径相对而言是正确的，并且图像存在于该路径中。