Make some html5 click videos for iOS5

Question

I am currently working on a page to play different videos when I click an item. Despite the fact that it works fine on a computer, iOS devices are not. The problem is that when the item, in which case the button is pressed, is displayed, it shows the video but does not start playing as it should. script -

$(document).ready(function(){ $('#video_1, #video_2').hide(); $('.icon_1').click(function(){ $('#video_2').fadeOut(function(){ $('#video_1').fadeIn(); }); }); $('.icon_2').click(function(){ $('#video_1').fadeOut(function(){ $('#video_2').fadeIn(); }); }); $('.icon_1').click(function(){ $('.video_2').get(0).pause(); $('.video_2').get(0).currentTime = 0; $('.video_1').get(0).play(); }); $('.icon_2').click(function(){ $('.video_1').get(0).pause(); $('.video_1').get(0).currentTime = 0; $('.video_2').get(0).play(); }); }); 

and html

 <button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button> <button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button> <div id="video_1"> <video class="video_1" width="50%" height="50%" controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" > <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /> </video> </div> <div id="video_2"> <video class="video_2" width="50%" height="50%" controls poster="images/BKG_JohnGT.png"> <source src="images/01.mp4" type="video/mp4" /> </video> ​</div> 

He could give me a function that could happen, that would be great

Answer 1

iOS does not support more than one video element per page at a time. It does not even give you an error message - it simply displays the image of the poster (or the first frame), and then it will not be able to play, as you described.

Unfortunately, you cannot make true crossfade, but you can get closer. Start with one video element attached to the DOM. When switching from one video to another, you can supplant the current video output, and then when it is done, delete it and add a second video. Apple has provided some details and code examples on how to do this.

In theory, you should be able to capture a snapshot of a video clip in the canvas and exchange it for video and erase the canvas, but iOS does not support capturing video frames in the canvas.

These and some other non-standard behaviors are well described in this article .