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.
$(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);
});
});
});//]]>
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.