Reputation: 726
I'm trying to play multiple video files in one html player as if it's a single file.
For now, I found a script to play videos one after the other in the same player :
<video id="videoPlayer" autoplay autobuffer controls></video>
<script>
var videoPlayer = document.getElementById('videoPlayer')
var vArray = [
"my-first-video.mp4",
"my-second-video.mp4",
"my-thrid-video.mp4",
]
videoPlayer.src = vArray[0]
i = 1
videoPlayer.onended = function(){
if (i < vArray.length) {
videoPlayer.src = vArray[i]
i++
}
}
</script>
The problemes are :
there is a small cut between each video
the progress bar is not global for all the videos but for each one of them
The point is that users don't realise that there are many videos playing in the payer.
How can I manage to make this ? Is it possible only with the video HTML tag ? Or are there video player to do this ?
Thanks
Upvotes: 5
Views: 3399
Reputation: 316
You can join the files as a temporary or permanent output.mp4 file and then run that video on your script. If the files are small, it takes a few seconds. I have join huge files, and did not take too long.
For ffmpeg you can create a list from your array and issue the command
ffmpeg -f concat -safe 0 -i mylist.txt -c copy output.mp4
List must be with this format on plain txt (you can create the file in your server using your array):
file my-first-video.mp4
file my-second-video.mp4
file my-thrid-video.mp4
if you don not want to create a list, you can create directly from files on a folder, it goes from first mp4 listed with "ls" and ends with the last mp4 found.
ffmpeg $(for f in *.mp4 ; do echo -n "-i $f "; done) -filter_complex "$(i=0 ; for f in *.mp4 ; do echo -n "[$i:v] [$i:a] " ; i=$((i+1)) ; done && echo "concat=n=$i:v=1:a=1 [v] [a]")" -map "[v]" -map "[a]" output.mp4
Then you can use that output.mp4 simulate one only file without users figure it out. Hope it works for you Regards.
Upvotes: 0
Reputation: 726
I found another way to achieve what I wanted to do, I directly merge the videos together with ffmpeg using this module: https://github.com/ArsalanDotMe/VideoStitch
Upvotes: 1
Reputation: 1
Try This :` This is an HTML code in which you can add more than one video at a time on your page.
<video width="400" controls autoplay>
<source src="my-third-video.mp4" type="video/mp4">
</video>
<video width="400" controls autoplay>
<source src="my-second-video.mp4" type="video/mp4">
</video>
<video width="400" controls>
<source src="my-third-video.mp4" type="video/mp4">
</video>
Upvotes: 0