javascript - HTML video player for multiple files - Stack Overflow

admin管理员组

文章数量:1384812

So here is the problem I am faced with. I have Season 3 of The Walking Dead that consists of 16 .mp4 videos. I have made a very simple way of playing them in browser with a HTML master page and a play button for each episode. Then, on click it will open another HTML page with the video frame for that episode. So in my Season 3 folder, I have an Index.html page and then 16 more pages that are for the relevant videos. I was wondering if there is a more elegant way of doing this?

What I would really like is to have is a link for 'Season 3 Episode 1' and on click it will open that video but without having to have 16 extra html pages just to play one video. Is there a way to do this with an 'Index' page and then a 'Player' page that will play the video requested? Is this something that could be done with PHP? So on click for 'Season 3 Episode 1', it will pull a video called S03E01.mp4 in the player page. Then for 'Season 3 Episode 2' it will open the same Player page but open S03E02.mp4?

Many thanks in advance!

So here is the problem I am faced with. I have Season 3 of The Walking Dead that consists of 16 .mp4 videos. I have made a very simple way of playing them in browser with a HTML master page and a play button for each episode. Then, on click it will open another HTML page with the video frame for that episode. So in my Season 3 folder, I have an Index.html page and then 16 more pages that are for the relevant videos. I was wondering if there is a more elegant way of doing this?

What I would really like is to have is a link for 'Season 3 Episode 1' and on click it will open that video but without having to have 16 extra html pages just to play one video. Is there a way to do this with an 'Index' page and then a 'Player' page that will play the video requested? Is this something that could be done with PHP? So on click for 'Season 3 Episode 1', it will pull a video called S03E01.mp4 in the player page. Then for 'Season 3 Episode 2' it will open the same Player page but open S03E02.mp4?

Many thanks in advance!

• javascript
• php
• jquery
• html
• video

Share Improve this question Follow edited Jan 5, 2016 at 21:24 ZGingerAssassin asked Jan 3, 2016 at 16:15 ZGingerAssassinZGingerAssassin 4311 gold badge22 silver badges77 bronze badges 2

• Tried changing src of video element ? – guest271314 Commented Jan 3, 2016 at 16:20
• AJAX? stackoverflow./questions/1516202/… – Esteban Rincon Commented Jan 3, 2016 at 16:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

What you can do in only one page is this html :

<video controls autoplay>
    <source src="S01E01.mp4">
    <source src="S01E02.mp4">
    <source src="S01E03.mp4">
    <source src="S01E04.mp4">
</video>

This allows you to have a sort of playlist

Else in your index page you could have things like this :

<a href="player.php?ep=E01&s=S02" target="_blank">Season 2 Episode 1</a>
<a href="player.php?ep=E02&s=S01" target="_blank">Season 1 Episode 2</a>
<a href="player.php?ep=E03&s=S03" target="_blank">Season 3 Episode 3</a>
<a href="player.php?ep=E04&s=S01" target="_blank">Season 1 Episode 4</a>

target="_blank" will open the player in a new tab/window. And in your player.php file :

<video src="<?php echo($_GET['s']); echo($_GET['ep']); ?>.mp4" controls autoplay></video>

The video source will be the text after ?s= + the text after ?ep= + .mp4

Lets say you have on your html

<div id="elvideo"></div>

Then you could do this

<script>
var str = "S03E01.mp4,S03E02.mp4,S03E03.mp4,....,S03E0(n).mp4";
var n = str.includes(","); 
if (n) {
var nArr = str.split(',');
    document.getElementById('elvideo').innerHTML ="<video id='videoElement' width=100% controls controlsList='nodownload' autoplay playsinline><p>Tu navegador no funciona, actualizalo</p></video>";
var videoPlayer = document.getElementById('videoElement');
videoPlayer.src = "http://pathtoyour/file/video/"+nArr[0];
i = 1;
videoPlayer.onended = function(){
    if (i < nArr.length) {
        videoPlayer.src = "http://pathtoyour/file/video/"+nArr[i]
       i++
    }
  }
}
</script>

This will start with first mp4 and when it finish playing, will go to next one and so on. You could place on screen control image (as Netflix does) to go back and forward using your array of mp4 at nArr[x]

If you want to skip several programs without going thru all the programs in between, then you need to add a dropdown list of the episodes somewhere. and do an "onclick" jump function to play that specific episode mp4.

本文标签： javascriptHTML video player for multiple filesStack Overflow