多个文件的 HTML 视频播放器答案

【问题标题】：HTML video player for multiple files多个文件的 HTML 视频播放器
【发布时间】：2020-05-11 09:00:51
【问题描述】：

这就是我面临的问题。我有《行尸走肉》第 3 季，其中包含 16 个 .mp4 视频。我制作了一种非常简单的方法，可以在浏览器中使用 HTML 母版页和每个剧集的播放按钮来播放它们。然后，单击它会打开另一个 HTML 页面，其中包含该剧集的视频帧。所以在我的第 3 季文件夹中，我有一个 Index.html 页面，然后还有 16 个用于相关视频的页面。我想知道是否有更优雅的方式来做到这一点？

我真正想要的是“第 3 季第 1 集”的链接，点击它会打开该视频，但不必为了播放一个视频而有 16 个额外的 html 页面。有没有办法通过“索引”页面和“播放器”页面来播放请求的视频？这是可以用 PHP 完成的吗？因此，单击“第 3 季第 1 集”时，它将在播放器页面中拉出一个名为 S03E01.mp4 的视频。那么对于“第 3 季第 2 集”，它将打开相同的播放器页面但打开 S03E02.mp4？

非常感谢！

【问题讨论】：

尝试更改 src 的 video 元素？
AJAX？ stackoverflow.com/questions/1516202/…

标签： javascript php jquery html video

【解决方案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之后的文字

【讨论】：

嘿。谢谢回复。如果我向您展示我的文件结构可能会有所帮助。我有如下：index.html、player.php，然后是所有的视频。所以S03E01.mp4，S03E02.mp4，S03E03.mp4等等，一直到16。我试过你建议的方法，它不加载视频。它只显示视频播放器框，仅此而已。再次感谢。
你尝试了哪一个？如果是第二个，它应该适用于您的文件结构。你能把你的 index.html 的 <a ...> 行和 player.php 文件的 <video ...> 行之一发给我吗？
嘿。解决它！这是我自己的错。我忘记更改季节的名称，这意味着它没有找到文件！谢谢您的帮助！它完美无瑕！

【解决方案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 开始，播放完毕后，将转到下一个，依此类推。您可以使用 nArr[x]

处的 mp4 数组放置在屏幕控制图像上（就像 Netflix 那样）

如果您想跳过几个节目而不浏览其间的所有节目，那么您需要在某处添加剧集的下拉列表。并执行“onclick”跳转功能来播放特定剧集 mp4。

【讨论】：