HTML5 Video in iPad non funziona dopo DOM cambia

Ecco uno script che aggiunge il markup per un video HTML5 al DOM:HTML5 Video in iPad non funziona dopo DOM cambia

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

jsfiddle demo: http://jsfiddle.net/h8RLS/2/

Questo funziona in tutti i browser testati , tranne Safari su iOS. In iOS, quando HTMLVideoElement viene riaggiunto al DOM, non è più riproducibile.

Qualcun altro ha risolto o riscontrato questo problema?

fonte

2013-01-25 Jack

Non ho un iPad ma è possibile riprodurre il problema su un iPhone. Questo sembra essere un errore Webkit ma può essere facilmente aggirato modificando l'attributo src del video - spero che questo sia sufficiente per il tuo scenario. Potete vedere una demo funzionante qui:

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

Questo è il codice:

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

fonte

2013-01-29 18:11:04

Non ho un iPhone da testare, ma questo non funziona sul mio iPad di quarta generazione. Fiddle: http://jsfiddle.net/nHjRR/ –

ho un pad 4 gen gen, e il collegamento demo ha funzionato bene per me: http://vidhtml5.appspot.com/jsembed.html – AndroidUser

@AndroidUser La demo non ha funzionato rimuovere il video dal DOM, invece resettare l'attributo 'src' e chiamare' reload() '. Funziona su iPad, ma temo che non rifletta il problema prodotto quando il DOM viene modificato. Per favore controlla il mio [fiddle] (http://jsfiddle.net/nHjRR/) che funziona su tutti i browser che ho provato su Windows e Android ma non su un iPad. –

-1

È possibile includere due tag 'sorgente' per il video. L'ho fatto su un sito e funziona benissimo.

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

fonte

2013-02-04 20:09:58 AndroidUser

Questo non ha nulla a che fare con il problema. – Jack

Si tratta di cambiare video in modo dinamico e non di fornire collegamenti di fallback nel caso in cui un formato non funzioni (come nel caso di WebM su iPad). –

Ho avuto lo stesso problema, e ho trovato una soluzione utilizzando un timer (sto usando jQuery qui).

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

L'ho provato solo su iPad2 su iOS 6.1.

fonte

2013-02-08 12:20:48 Karlsson

HTML5 Video in iPad non funziona dopo DOM cambia

risposta

Problemi correlati