【问题标题】:Uploaded videos are not playing in mobile browser but are playing on desktop broswer上传的视频不在移动浏览器中播放,而是在桌面浏览器中播放
【发布时间】:2015-07-22 16:09:18
【问题描述】:

我已经设置了一个服务器(gunicorn 和 nginx)来使用 Python/Django 上传视频,并在浏览器中观看它们。我使用的视频播放器是 videojs。所有视频都是 h.264 mp4。视频大小在 5-40 MB 之间。

视频上传正常,我也可以在台式机和笔记本电脑浏览器上观看上传的视频。

问题是我无法在移动设备上观看相同的视频(在桌面浏览器上播放)。

我收到此错误:

无法加载此视频,原因可能是服务器或网络出现故障,或者格式不受支持。

怎么了?

更新

但是,我在移动设备中测试了带有 webm 视频的移动浏览器,而 Opera 和 Chrome 可以完美地播放视频。这是我用于 webm 的命令:

ffmpeg -i test2.mov -codec:v libvpx -quality good -cpu-used 0 -b:v 600k -maxrate 600k -bufsize 1200k -qmin 10 -qmax 42 -vf scale=-1:480 -threads 4 -codec:a vorbis -b:a 128k -strict -2 test2_webmmm.webm

这适用于 h.264 mp4(仅适用于 firefox):

ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -b:a 96k output.mp4

更新

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'faststart.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.40.100
  Duration: 00:03:36.56, start: 0.046440, bitrate: 350 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yu
v420p, 640x360 [SAR 1:1 DAR 16:9], 249 kb/s, 23.98 fps, 23.98 tbr, 24k tbn, 47.9
5 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, flt
p, 96 kb/s (default)
    Metadata:
      handler_name    : SoundHandler

更新

以下是我沿途收集的一些要点:

  1. 我从 YouTube 下载并上传到服务器上的一些视频没有编码,在所有浏览器上都可以很好地播放。
  2. 但是,如果我对相同的视频(YouTube 视频)进行编码并将其上传到服务器上,它不会在移动设备上播放,而只能在桌面浏览器上播放。
  3. 我从手机(Samsung s4 和 iPhone 6)拍摄并使用 ffmpeg 编码的视频无法在移动浏览器上播放,只能在桌面浏览器上播放。
  4. 但是,托管在 Amazon s3 上的相同视频(我从移动设备上获取)的 URL 在所有浏览器(甚至是未编码的视频)上都可以正常播放。

【问题讨论】:

  • H.264 基线 + AAC?
  • @Anatoly 是的。我使用了这个命令ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -b:a 96k output.mp4。虽然有一件事,视频在 firefox 移动浏览器中播放得很好,但在 android chrom 和 ios safari 上却没有。
  • 您能提供其中一个视频的链接吗?
  • @Robin 你能复制粘贴 ffprobe output.mp4 的结果吗?
  • @Mick 是的,你可以在这里找到它54.169.222.113/video/62

标签: video mobile browser nginx video-streaming


【解决方案1】:

什么官方文档tells:

流媒体和 AAC 播放器兼容性

默认情况下,当使用 libfdk_aac 编码 AAC 文件时,元数据 ('moov' atom) 写在音频流 ('mdat' atom) 之后 文件的结尾。为了启用编码文件的流式传输 'moov' 原子必须在 'mdat' 原子之前移动。另外一些 AAC 播放器实现在解码此类文件时存在问题。

FFmpeg 提供了选项“-movflags +faststart”,涵盖了可在编码期间使用的功能:

ffmpeg -i input.wav -c:a libfdk_aac -movflags +faststart output.m4a

现有的 m4a 文件可以使用“qt-faststart”程序进行修改,该程序与 FFmpeg 一起在 'tools' 目录中分发

qt-faststart input.m4a output.m4a

所以你可以试试这个:

ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -movflags +faststart output.mp4

【讨论】:

  • 我会测试一下并告诉你。谢谢。
  • 我刚刚测试了你给我的命令尝试,但它仍然是一样的。它对你有用吗?
  • 好的,让我们这样做:你上传 AVI 原件,我尝试使用不同的选项进行转换
  • 实际上我正在从 mov 和 mp4 文件中进行转换,这就足够了吗?
  • 我通过两遍编码解决了我的问题。在第二遍中,我使用了qtfaststart,它现在可以工作了。谢谢。
【解决方案2】:

我检查了视频本身,它看起来很好,如果下载到桌面并在 Mac 上用 Chrome 或 Safari 打开会正常播放。

它还可以使用您在上面提供的链接 (54.169.222.113/video/62) 从 Web 上播放,在 Mac 上的 Chrome 上很好,但在 Safari 上不行。它还将通过默认浏览器和 Chrome 中的 Android 平板电脑 (Samsung Note) 上的网络链接播放。

不过,视频本身可以在 Safri 的桌面上正常播放。这样做会绕过您的网站,包括您的脚本和 HTML 以及 video.js 播放器。

查看 videojs.com 网站,他们使用的 video.js (4.12.11) 版本与您相同,但是当您查看源代码时,他们的行数似乎不同,实际上情况并非如此具有相同的版本号。很可能他们只是添加了一些开发更改以进行测试,但我认为值得重新访问您的 HTML 和 video.js 再次设置并尝试将其与 videojs.com 站点尽可能匹配(其中我认为您将其用作起点,因为它很接近但目前并不完全相同)。

更新

好的 - 我完全按照您在上面提供的链接 1437658474_37_faststart.mp4 下载了视频,并将其作为简单的静态文件添加到本地 Web 服务器中。

视频在以下通过网络连接到服务器的客户端可以正常播放:

  • Mac Safari
  • Mac Chrome
  • Android 标准和 chrome 浏览器
  • iPhone Safari

我还编辑了 videos.com 页面(在本地使用浏览器工具)并添加了您的视频,但它不会播放。

您的视频在某些浏览器上似乎存在一个微妙的问题,在使用 videojs 时会表现出来 - 使用您的网站可以很容易地证明该问题:

  • 视频永远不会在 MAC 上的 Safari 上播放
  • 视频始终在 MAC 上的 Chrome 上播放

除非您设法以某种方式离线解决了问题(如果是这样,请告诉我们,因为这是一个有趣的问题!),我认为值得在 videojs 论坛上提出它。

【讨论】:

  • 54.169.222.113/media/uploaded_files/1437658474_37_faststart.mp4 的视频仍然无法在移动设备上播放
  • @Anatoly - 奇怪,这不是我所看到的。我刚刚使用默认浏览器在三星 Note 10 上播放了 54.169.222.113/video/62/ 并且播放正常。您可能使用的是 iOS 设备吗?
  • @Mick 哦,是吗。然后我会从video js中得到确切的代码,试一试就会告诉你。
  • @Mick 我确实有 iOS 设备女巫应该支持带有流的那种容器:h.264 和 AAC
  • @Mick 我按照你的要求更换了视频播放器,但还是一样。
【解决方案3】:

我通过使用qtfaststart (python) 进行两遍编码解决了我的问题。起初我使用-movflags +faststart,但不知道为什么它不起作用。但现在它几乎适用于所有浏览器。

这是我使用的代码:

第一关

ffmpeg -i mobile.mp4 -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -movflags +faststart mobile-output.mp4

第二遍

qtfaststart mobile-output.mp4 qt-mobile-output.mp4

【讨论】:

    猜你喜欢
    • 2021-05-14
    • 1970-01-01
    • 1970-01-01
    • 2014-11-21
    • 2018-07-09
    • 1970-01-01
    • 2013-12-28
    • 2016-01-05
    • 2013-03-05
    相关资源
    最近更新 更多