mediaelement.js 不适用于我在 iPhone 上的 hls

Question

这是我的 m3u8 文件： cat 8.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:YES
#EXT-X-MEDIA-SEQUENCE:1131
#EXT-X-TARGETDURATION:5
#EXTINF:4.950, no desc
1545049888215.ts
#EXTINF:4.950, no desc
1545049893218.ts

我将它作为静态文件提供给http://104.248.205.68:31339/8.m3u8

我使用 mediaelemnts.js 来运行这个 hls 视频：jsfiddle

html:

<video width="240" height="160"  
    id="player1" src="http://104.248.205.68:31339/8.m3u8" 
    controls="controls" autoplay preload="auto" muted ></video>

js:

  $('video').mediaelementplayer({});

它在 chrome mac os 桌面上运行良好。但不适用于 iphone 8+（safari 和 chrome）。控制台中没有错误。视频没播放，黑屏。在视频的全屏模式下 - 相同。

同时，如果我在网上随便找了一个m3u8，用mediaelemnts.js播放，在iPhone上运行良好（至少全屏模式）jsfiddle 2。

所以我猜我的 m3u8 文件有问题，因为其他 m3u8 可以在 iPhone 上运行。

如果我在 Iphone 上加载问题页面时打开网络选项卡，我看到它正在下载文件但由于某种原因没有显示视频。

更新

我检查了 android:galaxy s5 和galaxy s9+ in chrome: 都可以。

更新 2

带有 ts 文件和 m3u8 的 Zip 存档：http://104.248.205.68:31339/8.m3u8.zip

Answer 1

在检查媒体文件 [1] 时，可以发现 PMT（节目映射表）表示流中有音频，但实际上不存在音频的 TS 数据包（即没有音频数据）。

看起来播放器等待音频 TS 数据包以便为音频和视频建立一个公共缓冲区，然后才开始播放。由于流缺少永远不会发生的音频数据。要备份它，您可以使用ffmpeg 使用以下命令从媒体片段中删除音轨，并发现一旦执行此操作即可播放。

ffmpeg -i 1545049893218.ts -an -vcodec copy 1545049893218-v.ts

此外，此问题仅在 iOS 上的 Safari 和 Chrome 中出现的原因是，在这些情况下，mediaelement.js 正在使用浏览器的本机功能来播放 HLS，而不是使用的 JavaScript 播放器（如 hls.js）其他平台（例如桌面上的 Chrome），并且更能容忍此类问题。

[1] 例如使用http://thumb.co.il/ 或ffprobe

---

编辑：

虽然上述内容可能足以使其在较旧的 Apple 移动设备上运行 - 我在 iPhone 6 iOS10 上进行了测试 - 较新的设备似乎更具限制性。官方HLS Authoring Spec表示

8.11。您必须在直播/线性播放列表中提供至少 6 个片段。

这似乎不是某些 iOS 版本的硬性要求。但是，为确保它适用于所有版本，应满足这些要求。

我在 iOS12 的 iPhone X 上做了一个快速测试，发现如果播放列表中至少提供 3 个片段，只需复制最后一个片段条目即可播放。