javascript - Angular - 捕获最后一个 帧作为视频海报/缩略图

Question

我的代码很简单:

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

现在，当更改 src 时，我看到黑色视频。我想做的是在加载新 src 时将前一个 src 视频的最后一帧设置为缩略图。

你认为我怎样才能做到这一点？

谢谢，感谢任何帮助

Answer 1

不要使用 1 个视频元素并更改 src，而是使用 2 个使用 z-index 相互叠加的视频元素。

当要切换时，暂停当前视频元素，等待第二个视频元素加载(监听loadeddata/canplay/canplaythrough事件)。然后交换 z 索引，使下一个视频元素位于顶部，然后播放第二个视频元素。