Reputation: 947
I'm working on an Angular [4+] application. In one of my HTML templates I have a HTML5 video tag.
I have n files located on the disk:
1.mp4
2.mp4
...
n-1.mp4
n.mp4
Once the user pressed the Play button, I want the video to start playing the first file:
1.mp4
Once the file ends, I want the same HTML video tag to start playing the file:
2.mp4
and so on till it reaches the n.mp4 and play it to it's end.
I want that the switching of the files would be as smooth as possible, with no latency, no loading time, as if the HTML video tag plays a single file without switching n files.
The only solution I have in mind is changing the src attribute of the HTML video tag, and maybe implement some buffer so that if the x.mp4 is about to reach it's end, the x+1 file already starts loading. Any ideas on how to implement this?
What do you think is the ideal solution for this scenario? (Note that combining those n files into one in advance is not an option, cause those files are created dynamically, and I know the exact amount of files only once the user has pressed play on the HTML video tag).
Upvotes: 1
Views: 1865
Reputation: 659
You can try to use ended
event on video
Note: Not tested, it could be in the comment but I think it would be too long for the comment
In your template add following code
<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>
import ViewChild, ElementRef, Renderer2
from '@angular/core' in your component and in ngAfterViewInit lifecycle hook
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();
})
}
Hope this might help you and for further reference ended event for video
Upvotes: 1
Reputation: 343
You can try to use the [hidden] attribute on the videos, you can check if it buffers the video. Once one video is done you can set the video to hidden = true and the next video to hidden = false. And use the autoplay = true in order to play it without having the user click on play.
Upvotes: 0