Question

我正在开发Angular [4+]应用程序。在我的一个HTML模板中，我有一个HTML5视频标签。

我在磁盘上有n个文件：

1.mp4

2.mp4

...

n-1.mp4

n.mp4

用户按下“播放”按钮后，我希望视频开始播放第一个文件：

1.mp4

文件结束后，我希望使用相同的HTML视频标签开始播放文件：

2.mp4

依次类推，直到到达n.mp4并播放到结束为止。

我希望文件的切换尽可能平滑，没有延迟，没有加载时间，就像HTML视频标签播放单个文件而不切换n个文件一样。

我想到的唯一解决方案是更改HTML视频标签的src属性，并可能实现一些缓冲区，以便如果x.mp4即将到达末尾，则x + 1文件已经开始加载。关于如何实现这一点的任何想法？

您认为此方案的理想解决方案是什么？（请注意，将这n个文件预先组合到一个文件中是不可行的，因为这些文件是动态创建的，只有在用户按下HTML video标签上的播放按钮后，我才知道确切的文件数量。）

Answer 1

您可以尝试在视频上使用ended事件

注意：未经测试，可能在评论中，但我认为评论太长了

在模板中添加以下代码

<video #video width="256" height="192"  id="myVideo" controls autoplay>
 <source #source src="{{count}}.mp4" id="mp4Source" type="video/mp4">
 Your browser does not support the video tag.
</video>

从“ @ angular / core”中将ViewChild, ElementRef, Renderer2导入组件和ngAfterViewInit生命周期挂钩中

count = 1;
@ViewChild('video') video: ElementRef;
@ViewChild('source') source: ElementRef;

constructor(private rd: Renderer2){}

ngAfterViewInit() {
 let player = this.video.nativeElement;
 let mp4Vid = this.source.nativeElement;
 this.rd.listen(player, 'ended', (event) => {
  if(!event) {
    event = window.event;
  }

 this.count++;
 this.rd.setAttribute(mp4Vid, 'src', `${this.count}.mp4`)
 player.load();
 player.play();
  })
}

希望这对您有帮助，并为进一步提供参考ended event for video

Answer 2

您可以尝试在视频上使用[hidden]属性，可以检查它是否缓冲了视频。制作完一个视频后，您可以将视频设置为hidden = true，将下一个视频设置为hidden = false。并使用autoplay = true来播放它而无需用户单击播放。

在运行时平稳地切换HTML5视频标签的视频文件

2 个答案: