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视频的最后一帧设置为缩略图。

你认为我该如何实现呢？

谢谢，感激任何帮助。

- itsme

---

你尝试使用指令来使用 onload 函数了吗？ - Pankaj Parkar

@pankajparkar 有趣.. 你是什么意思？ - itsme

你还卡在某个地方或需要帮助吗？ - Pankaj Parkar

@pankajparkar 我正在尝试一些东西，我也会等待更多的建议，非常感谢你！ - itsme

你能创建一些 fiddle / plunkr 让我尝试一下吗？ - Pankaj Parkar

Answer 1

不要使用更改src的方式，而是使用两个视频元素，利用z-index进行叠放。

当您想要切换时，暂停当前视频元素，等待第二个视频元素加载（监听loadeddata/canplay/canplaythrough事件）。然后交换z-index，使下一个视频元素处于最上层，接着播放第二个视频元素。

- Darnell Campbell

---

这是一个不错的解决方案，但有时分层视频会产生闪烁的屏幕，但我理解我能做的并不多，谢谢 :) - itsme