MP4 视频在桌面上工作,而不是在移动设备上

MP4 video working on desktop, not on mobile devices

我在下面嵌入了一个视频URL:https://www.speurtochten.nl/over-ons/ 我用 Premiere Pro CC 制作,将其导出为 H.264。

我在 WordPress 中使用的代码:[video src="https://speurtochten.nl/sbsfilm.mp4"][/video]

我尝试上传几个虚拟视频 (http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4),它们在桌面和移动设备上都运行良好 phone。

在我的 iPhone 上,我得到 "Error loading this resource"。

接受并同意关于这是边界编码的评论 question/answer,我将尝试提供一个答案,但在编码上下文(ish...)内,或者至少参考工具开发人员通常可能会用来调试此类问题。

调试此类问题很棘手,但它可以帮助使用调试器工具 - 您可以将手机 phone 附加到 Mac/PC 并使用 Chrome 或 Safari 开发人员工具来查看控制台和网络流量,以尝试查看此类错误的原因。示例 link(在撰写本文时正确,但在 link breaks/moves 的情况下,摘要是:附加设备,启用 USB 调试;单击设备选项卡中的检查按钮以打开工具进行检查设备)在此处获取 Chrome 开发者工具的说明:

在您的情况下这样做会表明网站加载正常(预计会出现不相关的 HTTPS css 问题)。

您还可以查看页面源代码并找到视频 URL,然后从工具 window 打开一个选项卡,直接在移动浏览器上播放视频。

在您的情况下,视频无法播放。

如果 mediaelement.js 查看页面源代码,您还可以看到正在使用的视频播放器 - 除了视频标签之外,大多数网络视频播放还使用某种形式的 HTML5/javascript 播放器。

此播放器是开源的 (https://github.com/mediaelement/mediaelement),因此可以在 GitHub 上检查代码,它提供了非常容易地在存储库的整个版本中搜索文本字符串的能力。检查错误字符串或什至部分错误字符串会很快显示此错误不是由播放器生成的(或者不是当前版本生成的 - 如果您想要一丝不苟,您可以确保并检查您的网页中使用的任何版本)。

这表明问题出在底层浏览器或设备视频支持本身。

下载视频并使用 ffprobe (https://ffmpeg.org/ffprobe.html) 查看其属性显示输出包括以下内容:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'sbsfilm.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: mp42mp41
    creation_time   : 2017-11-23T19:23:40.000000Z
  Duration: 00:02:06.93, start: 0.000000, bitrate: 10311 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709), 1920x1080 [SAR 1:1 DAR 16:9], 9989 kb/s, 25 fps, 25 tbr, 25k tbn, 50 tbc (default)

这里的关键信息是 'High' 部分,这意味着它是一个 H.264 High profile 视频。 H.264 有不同的配置文件和许多不同的潜在设置和选项,因此我们不能只说设备可以播放 H.264,而是需要查看更多细节。

查看 Android 支持的媒体类型(在撰写本文时再次...)显示 High Profile 不在列出的支持类型中(https://developer.android.com/guide/topics/media/media-formats.html):

这很可能是您的问题 - 如果您将视频重新编码为 H.264 Main 或 Baseline 配置文件并重试,视频应该可以在移动设备上运行(最受支持的是 baseline,但不提供与 Mainline 一样压缩良好,因此您可能想要尝试找到最适合您需求的匹配项)。

最近遇到了这个问题。视频文件是隔行扫描的。一旦我将其渲染为渐进式,就可以了。