medialement.js 我的 hls 在 iphone 上不工作

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.

上运行nable

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

更新

我检查了 android：chrome 中的 galaxy s5 和 galaxy s9+：两者都有效。

更新 2

包含 ts 文件和 m3u8 的 Zip 压缩包：http://104.248.205.68:31339/8.m3u8.zip

Answer 1

检查媒体文件[1]时发现PMT(Program Map Table)表示流中有音频，但实际上没有音频的TS包(即没有音频数据）存在。

播放器似乎在等待音频 TS 数据包，以便为音频和视频建立一个公共缓冲区，然后才开始播放。由于流缺少从未发生过的音频数据。为了支持这一点，您可以使用 ffmpeg 使用以下命令从媒体片段中删除音轨，并发现执行此操作后播放将正常进行。

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

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

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

编辑：

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

8.11. You MUST provide at least 6 segments in a live/linear playlist.

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

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

medialement.js 我的 hls 在 iphone 上不工作

medialement.js not working for my hls on iphone

http-live-streaming

mediaelement.js

更新

更新 2

编辑：