用于多个文件的HTML视频播放器

Question

这就是我所面临的问题。我有第三季的“行尸走肉”，由16个.mp4视频组成。我做了一个非常简单的方式，在浏览器中使用HTML母版页和播放按钮来播放每一集。然后，点击它将打开另一个HTML页面与视频帧为该集。因此，在我的第三季文件夹中，我有一个Index.html页面，然后再多16页是为相关的视频。我想知道是否有一种更优雅的方式来做到这一点？

我真正想要的是一个“第三季第一集”的链接，点击它就可以打开视频，但是不需要额外的html页面就可以播放一段视频。有没有办法用一个“索引”页面，然后是一个“播放器”页面来播放所请求的视频？这是PHP可以做的事情吗？因此，在点击“第三季第一集”时，它将在播放器页面中提取一个名为S03E01.mp4的视频。那么对于“第三季第2集”，它将打开同一个玩家页面，但打开第三季第02.mp4？

事先非常感谢！

Answer 1

您只能在一页中完成的是这个html：

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

这允许您有一种播放列表。

在索引页面中，您还可以看到这样的内容：

<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"将在一个新的选项卡/窗口中打开播放器。在您的player.php文件中：

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

视频源是?s=后的文本+ ?ep= + .mp4之后的文本

Answer 2

假设你有你的html

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

那你就可以这么做

<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>

这将从第一个mp4开始，当它完成播放时，将转到下一个，依此类推。您可以在屏幕控制图像上放置(就像Netflix那样)，使用mp4数组在nArrx上来回移动。

如果你想跳过几个节目，而不想在中间浏览所有的节目，那么你需要在某个地方添加一个片段的下拉列表。并做一个“点击”跳转功能，以发挥特定的插曲mp4。