0

この最初の動画は複数の動画用であるため、関連するサムネイルをクリックするとフェードします

$(window).load(function(){
$('li', '.thumbs').on('click', function() {
    var numb = $(this).index(),
        videos = ['images/intro01.m4v', 'images/clip2.mp4', 'images/intro01.m4v', 'images/clip2.mp4', 'images/intro01.m4v', 'images/clip2.mp4'],
        myVideo = document.getElementById('myVid');
    $(myVideo).animate({
        opacity: 0
    }, 500, function() {
        myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
        $(myVideo).animate({
            opacity: 1
        }, 500);


    });
});
});//]]>

この2つ目は、iPad用のonClickでビデオを再生することです。

function playVideo1() {
   var myVideo = document.getElementsByTagName('video')[0];
           myVideo.src = 'images/01.m4v'
           myVideo.load();
       myVideo.play();
           myVideo.easeIn(); 
        }

最初のものは単独で仕事をしません、そして、2番目のものは衰退しません。私が本当に必要としplay()ているのは2番目のものだけですが、他の人に干渉せずにそれを行う方法がわかりません。誰か助けてもらえますか？よろしくお願いします。

4

2 に答える 2

1 
$(window).load(function(){
$('li', '.thumbs').on('click', function() {
    var numb = $(this).index(),
        videos = ['images/intro01.m4v', 'images/clip2.mp4', 'images/intro01.m4v', 'images/clip2.mp4', 'images/intro01.m4v', 'images/clip2.mp4'],
        myVideo = document.getElementById('myVid');
    $(myVideo).stop().animate({
        opacity: 0
    }, 500, function() {
        myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
        $(myVideo).stop().animate({
            opacity: 1
        }, 500, playVideo1);


    });
});
});//]]>
于 2012-05-05T03:23:41.637 に答える
1

これを試してください：http：//jsfiddle.net/3Vu5w/6/

$('li').on('click', function() {
console.log('clicked');
var numb = $(this).index(),
    videos = ['http://video-js.zencoder.com/oceans-clip.mp4', 'http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4', 'http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4', 'images/clip2.mp4', 'images/intro01.m4v', 'images/clip2.mp4'],
    myVideo = document.getElementById('myVid');
$(myVideo).animate({
    opacity: 0
}, 
      500, 
     function() {
    myVideo.src = videos[numb];
    myVideo.load();
    myVideo.play();
    $(myVideo).animate({
        opacity: 1
    }, 500);
}); //animate
}); //click

<li>thumbs0</li>
<li>thumbs1</li>
<li>thumbs2</li>
<div class="video" data-id="3" >
<video id="myVid" class="video" width="50%" height="50%"  controls="controls"      poster="http://cheerioscoupons.info/wp-content/uploads/_Cheerios-Coupons-1-300x283.jpg">

于 2012-05-05T03:33:57.967 に答える