0

div、ビデオ配列、およびボタンがあるページを作成しています。問題の div は<video>タグの前に配置され、背景画像が設定されている代わりに黒で表示されます。div を別の場所に配置したり、画像を CSS または直接リンクしたり、フェード<video>インとフェードアウトしたり、ビデオのポスター画像を配置したりして、空白にならないようにしました。何もない。

助けてもらえますか。これは月曜日に（他の 5 つのことと一緒に）行わなければならないので、とても急いでいます。

ジャバスクリプトは

$(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で非表示にします。残念ながら、開始するにはビデオをもう一度クリックする必要があります。Apple では JavaScript から実行できないためです。

于 2012-05-16T08:07:23.547 に答える
0

ポスターを設定したり、ビデオを囲む<video>背景として画像を設定したりするなど、多くのことを試しましたが、何も機能しなかったため、おそらく問題は画像または画像パスにあります。div要するに、画像が見つかりませんでした。イメージ パスが相対的に正しいこと、およびイメージがそのパスに存在することを確認します。

于 2012-05-16T08:20:18.567 に答える