首页 文章

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

提问于
浏览 次
-1

我正在研究Angular [4]应用程序 . 在我的一个HTML模板中，我有一个HTML5视频标签 .

我在磁盘上有n个文件：

1.mp4

2.mp4

...

正1.mp4

n.mp4

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

1.mp4

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

2.mp4

等到达n.mp4并播放到它的结尾 .

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

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

您认为这种情况的理想解决方案是什么？ （请注意，将这些n个文件预先组合成一个不是一个选项，因为这些文件是动态创建的，只有当用户按下HTML视频标记上的播放时才知道文件的确切数量） .

javascript angular html5 video-streaming html5-video

2 回答

  • 1

    您可以尝试使用视频上的[hidden]属性，您可以检查它是否缓冲视频 . 完成一个视频后，您可以将视频设置为hidden = true，将下一个视频设置为hidden = false . 并使用autoplay = true以便在没有用户点击播放的情况下播放它 .

    回复于
  • 0

    您可以尝试在视频上使用 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>

    从组件和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

    回复于

相关问题