第一个是针对多个视频的,所以当相关的缩略图被点击时,它会淡出
$(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()
,但我不确定如何在不干扰另一个的情况下做到这一点。谁能帮我?将不胜感激。
最佳答案
试试这个: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">
关于javascript - 如何结合这两个视频功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10458495/