Question

this first one is for multiple videos, so that when the related thumbnail is clicked, it fades it

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


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

and this second one is to make a video play onClick for the iPad

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

The first doesn’t do the job alone, and the second one doesn’t fade. All I really need is the play() from the second one, but I’m not sure how to do it without interfering with the other. Can anyone help me? It’d be greatly appreciated.

Answer 1

try this: 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">