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的背景但却没有效果的问题，很可能问题在于图像或图像路径。简而言之，没有找到图像。确保图像路径相对正确，并且图像存在于该路径中。

Div在ios5上有黑色背景

2 个答案: