Come posso cambiare l'src di un video html5 tramite javascript senza cromato o perdita di memoria?

Question

Sto lavorando a un'applicazione in esecuzione solo su Chrome.

Devo essere in grado di cambiare la sorgente da un video in riproduzione. javascript

Ho usato (& jQuery) per modificare l'attributo src:

$fullscreenVideo.get(0).src = '/video/' + name + '.mp4'; // crash here 
$fullscreenVideo.get(0).load(); 
$fullscreenVideo.get(0).play(); 

Funziona un paio di volte, ma i miei cromo (provato beta & canali dev) finisce per schiantarsi (Pagina non rispondere).

se cerco di creare un nuovo elemento di anteporre ultima codeblock con:

$fullscreenVideo.remove(); 
$fullscreenVideo = $('<video id="video-fullscreen" width="800" height="600" loop="loop"></video>').appendTo("#page-fullscreen > div.fullscreen"); 

ogni video aumento opzione di RAM da 20Mo senza mai indietro.

C'è un modo per rintracciare/prevenire l'aggiornamento di chrome crash en src? C'è un modo per forzare la memoria libera?

Answer 1

Sono stato lo stesso problema.
Ho letto in alcuni forun che è un bug di cromo con perdite di memoria (alcune persone dicono che succede solo in chrome 8 e in chrome 6 funziona bene, ma non l'ho provato).

Ho anche letto che l'uso di un sonno aiuta. Ho provato ed è vero, se metto un po 'di sonno prima di cambiare url atribute e chiamare load() il numero di crash diminuisce. Ma continua a bloccarsi dopo molti cambiamenti.

Quindi, ho provato a utilizzare setTimeout (a differenza del sonno, non affatica la CPU, lasciandola libera di lavorare con Chrome).

E ora funziona. Prova a vedere se il mio codice è d'aiuto.

var videoChangingPending = false; 
function changeMovieSource(url, title){ 

     var $video = $('#video'); 
     try { 
      document.getElementById('video').src = url; 
     } 
     catch (e) { 
      alert(e); 
     }  

     $video.attr('autoplay', 'true'); 
     $video.data('currentTitle', title); 

     document.getElementById('video').load(); 

     videoChangingPending = false; 
}  

function startPlayer(url, title) { 

     if(videoChangingPending == true) 
      return; 



     document.getElementById('video').pause(); 


     videoChangingPending = true; 
     var changeMovieCallback = function(){ changeMovieSource(url, title);} 
     var t = setTimeout(changeMovieCallback, 800); 

} 

Answer 2

Suppongo che il primo modo dovrebbe funzionare correttamente e l'implementazione di Chrome <video> è ancora buggata. Sentiti libero di menzionarlo nei loro forum di segnalazione bug.

Answer 3

stavo sperimentando questo problema in modo tutto quello che ho fatto è stato rimuovere il tag video e poi aggiungere un altro con l'URL corrente "on the fly".

Answer 4

Ho odiato tutte queste risposte perché erano troppo corte o dipendevano da altri framework.

qui è "uno" vanilla JS modo di fare questo, lavorando in Chrome, si prega di verificare in altri browser:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video> 

JS:

var video = document.getElementById('video'); 
var source = document.createElement('source'); 

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4'); 

video.appendChild(source); 
video.play(); 

setTimeout(function() { 
    video.pause(); 

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load(); 
    video.play(); 
}, 3000);