Pochwar
Pochwar

Reputation: 726

play multiple files as one in video html tag

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 :

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

Answers (3)

Luis H Cabrejo
Luis H Cabrejo

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

Pochwar
Pochwar

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

Aryaja Nair
Aryaja Nair

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

Related Questions