Javascript 如何组合这两种视频功能？

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

$(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制作一个视频播放onClick

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

第一个不能单独完成任务，第二个也不会消失。我真正需要的是第二个版本的

play（）

，但我不知道如何在不干扰另一个版本的情况下完成它。有人能帮我吗？非常感谢。

试试这个：

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


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

$（'li'）。在（'click'，function（）上{
console.log（'clicked'）；
var numb=$（this）.index（），
视频=['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）。设置动画({
不透明度：0
}, 
500, 
函数（）{
myVideo.src=videos[numb]；
myVideo.load（）；
myVideo.play（）；
$（myVideo）。设置动画({
不透明度：1
}, 500);
})；//制作动画
}); //点击
拇指0
拇指1
拇指2

$('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">