Question

这第一个用于多个视频，因此当点击相关缩略图时，它会淡化它

$(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);


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

第二个是在iPad上制作视频播放点击

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

第一个不单独完成工作，第二个不会褪色。我真正需要的只是来自第二个的play()，但我不确定如何在不干扰另一个的情况下做到这一点。谁能帮我？非常感谢。

Answer 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);


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

Answer 2

试试这个：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">

如何组合这两个视频功能？

2 个答案: