Thực hiện nhiều lần bắt đầu html5-video trên iOS5

Question

Tôi hiện đang làm việc trên một trang để phát các video khác nhau khi bạn nhấp vào một phần tử. Mặc dù nó hoạt động tốt trên máy tính, nhưng các thiết bị iOS thì không. Vấn đề là khi các phần tử, trong trường hợp này một nút, được nhấp, nó cho thấy video nhưng không bắt đầu chơi, như nó phải. Kịch bản là

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

     }); 
      }); 

và html là

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

Nó bất cứ ai có thể cho tôi một chức năng mà có thể mak điều này xảy ra, THT sẽ là tuyệt vời

Answer 1

iOS không hỗ trợ nhiều hơn một đoạn video phần tử trong một trang cùng một lúc. Nó thậm chí không cung cấp cho bạn một thông báo lỗi - nó sẽ chỉ hiển thị hình ảnh áp phích (hoặc khung hình đầu tiên) và sau đó không chơi, giống như bạn mô tả.

Thật không may, bạn không thể thực hiện giao diện thực, nhưng bạn có thể đến gần. Chỉ bắt đầu với một phần tử video được đính kèm với DOM. Khi chuyển từ video này sang video khác, bạn có thể làm mờ video hiện tại và sau đó khi hoàn thành, hãy xóa video đó và thêm video thứ hai. Apple đã cung cấp một số details and code samples về cách thực hiện việc này.

Về lý thuyết, bạn có thể chụp nhanh khung hình trong canvas và hoán đổi cho video và làm mờ khung hình, nhưng iOS cũng không hỗ trợ chụp khung hình video trong canvas.

Những hành vi này và một số hành vi không chuẩn khác được mô tả rõ trong this article.