Как объединить эти две функции видео?

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


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

и это второй один, чтобы сделать видео играть OnClick для IPad

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

Первый не выполняет работу самостоятельно, а второй не исчезает. Все, что мне действительно нужно, это play() со второго, но я не уверен, как это сделать, не мешая другому. Может кто-нибудь мне помочь? Было бы очень благодарно.

Answer 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"> 

Answer 2

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


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