どのようにこれらの2つのビデオ機能を組み合わせるのですか？

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


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

それをフェードし、この第二の1が、iPadの

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

ためのビデオ再生のonClickを作ることであるように、この最初のものは、複数の動画です最初は仕事を単独ではしませんし、2つ目は退屈ではありません。私が本当に必要とするのは、第2のものの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); 


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