0

我正在制作一个页面，其中有一个 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 上时工作正常。

请有人帮忙！

4

2 回答 2

0

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

于 2012-05-16T08:07:23.547 回答
0

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

于 2012-05-16T08:20:18.567 回答