Angular - 捕获最后<video>帧作为视频海报/拇指

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 索引，使下一个视频元素位于顶部，然后播放第二个视频元素。