angolare - cattura lo scorso <video> fotogramma come poster video/pollice

Question

Il mio codice è molto semplice:

<video ng-controller="Ctrl" ng-src="scopeSRC" autoplay></video> 

.controller('Ctrl', function ($scope, $timeout) { 

    $scope.scopeSRC = 'a_src_url'; 

    $timeout(function() { 
    $scope.scopeSRC = 'new_src_url'; 
    }, 5000); 
}); 

Ora, quando si cambia lo src vedo video nero. Quello che mi piacerebbe fare è impostare l'ultimo fotogramma del precedente video src come anteprima mentre il nuovo src sta caricando.

Come pensi di poter ottenere questo?

Grazie, qualsiasi aiuto apprezzato

Answer 1

Invece di avere 1 elemento video e cambiando lo src, utilizzare 2 elementi video che sono stratificati uno sopra l'altro utilizzando z-index.

Quando si desidera commutare, mettere in pausa l'elemento video corrente, attendere il caricamento del secondo elemento video (ascoltare gli eventi loadeddata/canplay/canplaythrough). Quindi scambia gli z-index in modo che il prossimo elemento video sia in primo piano e poi riproduci il secondo elemento video.