【发布时间】：2021-05-09 03:13:31
【问题描述】：
我有一台几乎没用的旧的第一代 iPad，我想把它变成一个视频播放器。我正在努力制作一个简单的 HTML5 视频播放列表页面，我可以在 Safari 中加载并让它连续播放。虽然单独播放我的 MP4 视频文件没有问题，但我无法说服他自动加载和播放下一个视频。
为了提供更多详细信息，我希望将此 iPad 与我的视频文件和此 HTML 文件所在的 NAS/Web 服务器位于同一本地网络中。 HTML文件是index.html，位于http://192.168.86.11/internal/，我所有的视频文件都是编号文件，在同一个文件夹中。 iPad 将通过 WiFi 获取内容，因为它没有其他任何东西。
我在最后提供了源代码。为了稍微调试一下，我放置了一个 DIV，我用各种文本进行了更新。首先，我只想循环播放 2 个视频文件，441.mp4 和 1127.mp4。第一个视频播放正常（前提是我手动启动它），但无论我尝试什么，第二个视频都没有。事件顺序如下：
- 我在 Safari 中加载 HTML 页面；调试显示
loaded, video loaded，视频播放器显示播放按钮，等待按下它； - 我按下播放按钮；
can play文本被添加到调试中，视频开始播放； - 视频结束；以下内容被添加到调试文本中：
finished, loading http://192.168.86.11/internal/1127.mp4, video loaded，但是下一个视频没有开始。
那么，无论如何，有没有这样的事情是可能的，还是我在追逐独角兽？我不太清楚（在互联网上搜索了很多之后）这是否真的可能（我已经看到关于视频自动加载/自动播放在移动设备上不起作用的各种讨论，尤其是苹果的；但毕竟，我确实开始了在第一个视频上手动播放，所以我不会把它放在“自动播放”问题桶中）。
如果可能的话，谁能解释一下我在这里没有做什么（对）？
更多信息：
- iPad 型号是 A1219（在后盖上），MB292LL（在软件中），运行 iOS 5.1.1 (9B206) ... 这是我能拥有的最高版本，它不会更新任何东西较新；
- iPad 已重置为出厂默认设置，因此不存在因软件安装/卸载/错误配置导致的可能缺陷；
- 所有视频文件（尤其是这 2 个）都可以完美地单独运行，它们已经使用 ffmpeg 使用自定义命令进行了转换，特别是为了使它们能够与此 iPad 一起使用；单独（和手动），它们玩得很好；
- 欢迎任何想法，我可以使用任何网络库/解决方案，但我更喜欢更简单的解决方案；
- 我在另一个 stackoverflow 帖子中读到，一些 Apple 移动产品不希望自动播放大于 3 MB 的文件；虽然这对我来说是个问题，但这两个测试文件只有 1 MB，所以这应该不是问题；
- 在其他设备上一切正常，如预期的那样，例如 Android 6 + Chrome 87（我什至不需要按任何东西，自动播放实际上从一开始就可以工作）。
非常感谢！
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
</head>
<body style="background: #000; margin: 0; position: relative;">
<div id="hDebug" style="color: #FFF; position: absolute; top: 0; left: 0; z-index: 999;">loaded</div>
<video autoplay muted playsinline controls style="width: 100%; position: absolute; bottom: 0;" id="hVideo">
<source src="" type="video/mp4" id="hVideoFile">
nope
</video>
<script type="text/javascript">
var arrPlaylist = [441, 1127];
var nCursor = 0;
var hVideo = document.getElementById('hVideo');
var hVideoFile = document.getElementById('hVideoFile');
var hDebug = document.getElementById('hDebug');
function VideoEnded()
{
hDebug.innerHTML = hDebug.innerHTML + ', finished';
nCursor++;
if (nCursor >= arrPlaylist.length) nCursor=0;
hVideoFile.src = 'http://192.168.86.11/internal/' + arrPlaylist[nCursor] + '.mp4';
hDebug.innerHTML = hDebug.innerHTML + ', loading http://192.168.86.11/internal/' + arrPlaylist[nCursor] + '.mp4';
hVideo.load();
}
function AutoPlay()
{
hDebug.innerHTML = hDebug.innerHTML + ', video loaded';
hVideo.play();
}
function CanPlay()
{
hDebug.innerHTML = hDebug.innerHTML + ', can play';
hVideo.play();
}
// load the first file
hVideo.addEventListener('ended', VideoEnded);
hVideo.addEventListener('loadstart', AutoPlay);
hVideo.addEventListener('canplaythrough', CanPlay);
hVideoFile.src = 'http://192.168.86.11/internal/' + arrPlaylist[nCursor] + '.mp4';
hVideo.load();
// bottom align the player
var hBody = document.getElementsByTagName("BODY")[0];
hBody.style.height = window.innerHeight + 'px';
</script>
</body>
</html>
【问题讨论】：
标签： javascript html ios ipad html5-video