La vidéo HTML5 sur l'iPad ne fonctionne pas après des modifications du DOM

Question

Voici un script qui ajoute le balisage d'une vidéo html5 au DOM :

document.body.innerHTML = '<video id="video" controls="controls" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"></video>';
var el = document.getElementById('video');
document.body.removeChild(el);
document.body.appendChild(el);

Démonstration de jsfiddle : http://jsfiddle.net/h8RLS/2/

Cela fonctionne dans tous les navigateurs testés, à l'exception de Safari sur iOS. Sous iOS, lorsque le HTMLVideoElement est réintroduit dans le DOM, il n'est plus lisible.

Quelqu'un d'autre a-t-il résolu ou rencontré ce problème ?

Answer 1

Je n'ai pas d'iPad mais j'ai pu reproduire votre problème sur un iPhone. Il semble s'agir d'une erreur Webkit, mais elle peut être contournée facilement en changeant la valeur de l'attribut src attribut de la vidéo - j'espère que cela est suffisant pour votre scénario. Vous pouvez voir une démo fonctionnelle ici :

http://vidhtml5.appspot.com/jsembed.html

Voici le code :

var el = document.getElementById('video');
el.src= "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v";
el.load();

Answer 2

J'ai eu le même problème, et j'ai trouvé une solution de contournement en utilisant un timer (j'utilise jQuery ici).

var v = $('#videoID');
v.appendTo( $('#toDivID') );
var timer = setInterval( function() {
    clearInterval( timer );
    v[0].load();
    v[0].play();
}, 200 );

Je ne l'ai testé que sur l'iPad2 sous iOS 6.1.

Answer 3

Vous pouvez inclure deux balises "source" pour votre vidéo. Je l'ai fait sur un site et cela fonctionne très bien.

<video class="video" controls="controls" id="video1">
<source type="video/mp4" src="demo.mp4">
<source type="video/webm" src="demo.webm">              
</video>