上传的视频无法在移动浏览器中播放,但正在桌面浏览器上播放

时间:2015-07-22 16:09:19

标签: video mobile browser nginx video-streaming

我已经设置了一个服务器(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. 我从手机上拍摄的视频(三星s4和iPhone 6)以及用ffmpeg编码的视频不能在移动浏览器上播放,只能在桌面浏览器上播放。
  4. 但是,在亚马逊s3上托管的相同视频(我从手机上拍摄)的网址在所有浏览器(甚至非编码视频)上都能很好地播放。

3 个答案:

答案 0 :(得分:3)

官方文档tells

流媒体和AAC播放器兼容性

  

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

FFmpeg提供了选项'-movflags + faststart',涵盖了在编码过程中可以使用的功能:

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

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

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

答案 1 :(得分:1)

我检查了视频本身,看起来很不错,如果下载到桌面并在Mac上使用Chrome或Safari打开就可以正常播放。

它也可以使用您在Mac上的Chrome上提供的链接(54.169.222.113/video/62)在网上播放,但不能在Safari上播放。它还可以在默认浏览器和Chrome中使用Android平板电脑和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论坛上提出它。

答案 2 :(得分:0)

我通过使用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