Hacer inicio de html5-video múltiple al hacer clic para iOS5

Question

Actualmente estoy trabajando en una página para reproducir diferentes videos cuando hace clic en un elemento. Si bien funciona maravillosamente en la computadora, de los dispositivos con iOS no es así. El problema es que cuando se hace clic en el elemento, en este caso un botón, muestra el video pero no comienza a reproducirse, como debería. El guión es

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

     }); 
      }); 

y el html es

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

Es alguien me podría dar una función que podría Mak este suceda, THT habría gran

Answer 1

iOS no soporta más de un vídeo elemento en una página a la vez. Ni siquiera le da un mensaje de error: simplemente mostrará la imagen del póster (o primer fotograma) y luego no podrá reproducir, tal como lo describe.

Lamentablemente, no se puede hacer un verdadero fundido cruzado, pero puede acercarse. Comience con solo un elemento de video adjunto al DOM. Al cambiar de un video a otro, puede atenuar la salida de video actual y luego, cuando finalice, eliminarlo y agregar el segundo video. Apple ha proporcionado algunos details and code samples sobre cómo hacer esto.

En teoría, debería poder tomar una instantánea del marco de video en un lienzo e intercambiarlo por el video y desvanecer el lienzo, pero iOS tampoco admite la captura de marcos de video en un lienzo.

Estos y algunos otros comportamientos no estándar se describen bien en this article.