HTML5视频标签的视频文件在运行时间流畅切换

Question

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

我的磁盘上有 n 个文件：

1.mp4

2.mp4

...

n-1.mp4

n.mp4

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

1.mp4

文件结束后，我想要相同的 HTML 视频标签开始播放文件：

2.mp4

依此类推，直到到达 n.mp4 并播放到最后。

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

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

您认为这种情况的理想解决方案是什么？（请注意，提前将这 n 个文件合并为一个不是一种选择，因为这些文件是动态创建的，只有在用户按下 HTML 视频标签上的播放后我才知道文件的确切数量）。

Answer 1

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

Answer 2

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

Note: Not tested, it could be in the comment but I think it would be too long for the comment

在您的模板中添加以下代码

<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>

在您的组件和 ngAfterViewInit 生命周期钩子中从“@angular/core”导入ViewChild, ElementRef, Renderer2

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

HTML5视频标签的视频文件在运行时间流畅切换

Switch the video file for the HTML5 video tag in run-time smoothly

html

javascript

video-streaming

html5-video

angular