HTML5 vidéo sur iPad

Question

J'ai une galerie vidéo dynamique et cela fonctionne très bien sur un ordinateur. Lorsque vous passez à un iPad, la vidéo commence à se charger et l'icône ne peut pas être lue. Au lieu de cela, je préférerais que la vidéo n'apparaisse pas avant d'être prête à jouer. J'ai essayé d'ajouter des écouteurs d'événements pour "Canplaythrough" et "Canplay" et quand ils se produisent pour la vidéo de fondu avant de jouer. L'iPad ne prend-il pas en charge ces événements?

new_video = document.createElement('video'); 
new_video.setAttribute('class', 'none'); 
new_video.setAttribute('width', '568'); 
new_video.setAttribute('height', '269'); 
new_video.setAttribute('id', 'video'+video_num); 
current_video.insertBefore(new_video, video_controls); 
new_video.load(); 
new_video.addEventListener('canplaythrough', function() { 
    $('#video'+video_num').fadeIn(100); 
    new_video.play(); 
}); 

Answer 1

Vérifiez si le navigateur peut lire la vidéo avant de tenter de le charger:

function canPlayVorbis() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, '')); 
} 

function canPlayMP4() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); 
} 

function canPlayWebM() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '')); 
} 

Taken de Dive Into HTML5 Appendix A.

Answer 2

Sur l'iPad, il ne sera pas charger la vidéo jusqu'à ce qu'un utilisateur démarre un événement c'est par conception de pomme pour empêcher les utilisateurs iPhone ou iPad de brûler leurs plans de données. Donc, vous ne serez pas en mesure de faire ce que vous voulez désolé.

Consultez ce link et recherchez la section Considérations spécifiques au périphérique pour plus d'informations. Mais il ne commencera pas à charger les données de sorte qu'il ne pourrait pas déclencher l'événement canplaythrough jusqu'à ce qu'un utilisateur le touche.

Answer 3

démarre automatiquement sur le lecteur ipad/iphone:

function fakeClick(fn) { 
    var $a = $('<a href="#" id="fakeClick"></a>'); 

    $a.bind("click", function(e) { 
     e.preventDefault(); 
     fn(); 
    }); 

    $("body").append($a); 

    var evt, 
     el = $("#fakeClick").get(0); 

     if (document.createEvent) { 
      evt = document.createEvent("MouseEvents"); 
      if (evt.initMouseEvent) { 
       evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
       el.dispatchEvent(evt); 
      } 
     } 

     $(el).remove(); 
} 

$(function() { 
    var video = $("#mobileVideo").get(0); 

    fakeClick(function() { 
     video.play(); 
    }); 
}); 

Answer 4

La façon de résoudre ce problème visuel est de cacher l'élément vidéo jusqu'à ce qu'il soit prêt à être joué. Notez que vous ne pouvez pas définir display:none (la vidéo ne se chargera pas si vous faites cela) et visibility:hidden ne résoudra pas non plus le problème. Pour corriger cela, enroulez l'élément vidéo sur un DIV avec overflow:hidden et définissez -webkit-transform:translateX(1024px) (un nombre suffisamment élevé pour pousser la vidéo en dehors de l'écran).

Que vous devez écouter les canplay ou canplaythrough ou load événements (en fonction de vos besoins) et définissez le translateX à zéro après.

Answer 5

Voici un excellent endroit pour se familiariser avec les événements HTML5.

http://www.w3.org/2010/05/video/mediaevents.html

Answer 6

le problème semble créer dynamiquement l'objet vidéo - qui casse en quelque sorte le code sur l'iPad. J'ai écrit un lecteur vidéo qui déplace l'élément vidéo actuel alreay dans un conteneur et immédiatement la vidéo cesse de fonctionner. pas de problème sur d'autres systèmes cependant ... devinez que vous devez trouver un moyen d'avoir l'élément vidéo déjà en place et ensuite ajouter tous vos autres codes au-dessus et en dessous ....

Answer 7

C'est peut-être pourquoi votre vidéo MP4 ne jouera pas jusqu'à ce qu'il soit complètement chargé: how to get your HTML5 MP4 video to play before being fully loaded. Ça vaut le coup quand même.

Answer 8

Réalisez que c'est un vieux problème, mais si quelqu'un d'autre trébuche à travers cela, j'ai rencontré un problème similaire. En regardant les événements envoyés par l'élément vidéo, il semblerait que l'iPad commencera à charger la vidéo, puis la suspendra presque immédiatement (semble être simultanée avec le premier événement 'progression').

Il ne incendie « JOUONS » ou événements « canplaythrough » jusqu'à ce que après la lecture a effectivement commencé, vous devez donc écouter l'un des 3 événements qui font le feu avant la reproduction:

• loadstart
• progrès
• suspendent

je changerais votre poignée r pour «charger» et donner un coup de feu.