Angular - capture last

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

create one directive, which will have `elment.on('load',function(){ //here you code of hiding thumb icon }) ` & `elment.on('unload',function(){ //here you code of showing thumb icon }) `I'm not sure it will work or not but you could try this — Pankaj Parkar, May 02 '15 at 10:57
@pankajparkar actually one more problem is how to capture the thumb i think the only way is to get it on a canvas... — itsme, May 02 '15 at 11:00
I think for getting thumbnail of video you could refer this http://stackoverflow.com/a/29881347/2435473 — Pankaj Parkar, May 02 '15 at 11:02
@pankajparkar i am trying something out, i'll wait also for some more suggestions, thank you very much! — itsme, May 02 '15 at 13:00
could you create some fiddle /plunkr so that I can try something — Pankaj Parkar, May 02 '15 at 13:02

score 1 · Accepted Answer · answered May 02 '15 at 16:41

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.

answered May 02 '15 at 16:41

Darnell Campbell

335
5
8

this it's a good solution, but sometimes layered video produce a flashing screen, but i understand there is not so much i can do, thanks :) – itsme May 09 '15 at 09:39

Angular - capture last frame as video poster/thumb

1 Answers1

Angular - capture last