Question

所以这是我面临的问题。我有The Walking Dead的第3季，其中包含16个.mp4视频。我已经用一种非常简单的方式在浏览器中播放它们，每个剧集都有一个HTML母版页和一个播放按钮。然后，点击它将打开另一个HTML页面，其中包含该剧集的视频帧。因此，在我的第3季文件夹中，我有一个Index.html页面，然后是16个相关视频的页面。我想知道是否有更优雅的方式这样做？

我真正想要的是“第3季第1集”的链接，点击它会打开该视频，但不需要16个额外的html页面来播放一个视频。有没有办法通过“索引”页面然后播放要播放视频的“播放器”页面来执行此操作？这可以用PHP完成吗？因此，点击“第3季第1集”，它将在播放器页面中播放名为S03E01.mp4的视频。那么对于'第3季第2集'，它将打开相同的播放器页面但是打开S03E02.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一样）放在 nArr [x]

上以使用mp4数组来回移动

如果您想跳过几个节目而不通过它们之间的所有节目，那么您需要在某处添加情节的下拉列表。并执行“ onclick”跳转功能以播放该特定情节mp4。

多个文件的HTML视频播放器

2 个答案: