Angular - capture last <video> frame as video poster/thumb

Question

My code is very simple:

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

Now when changing the src I see black video. What I would like to do is set the last frame of the previous src video as the thumbnail while the new src is loading.

How do you think i can achieve this?

Thanks, any help appreciated

Answer 1

Instead of having 1 video element and changing the src, use 2 video elements that are layered on top of each other using z-index.

When you want to switch, pause the current video element, wait for the second video element to load (listen for the loadeddata/canplay/canplaythrough events). Then swap z-indexes so the next video element is on top and then play the second video element.