移动设备上无法播放HTML5音频

6
亲爱的HTML5开发者,
我在使用HTML5音频时遇到了一些困难...所以让我们深入研究一下。
谢谢!
ap  = "<audio width='200' height='30' preload='auto' controls autobuffer>";
ap += "<source src='util/blob_audio.php?i=" + w + "&ogg=1' type='audio/ogg' />";
ap += "<source src='util/blob_audio.php?i=" + w + "&mp3=1' type='audio/mpeg' />";
ap += "</audio>";

我正在JavaScript中生成它,当需要时该方法返回它。我想我不必提到"w"变量,那是一个参数(YouDon'tSay),它可以正常工作。
这应该没问题,对吧?它们在桌面上出现了,但在移动设备上有问题(我已经在iPad2、Android 3.2.1平板电脑和Android 2.3.6智能手机上进行了测试)。
在iPad 2上显示:"无法播放音频文件"。Droid显示默认的音频元素,但没有音量控制,视觉上它表明正在播放-从开头跳到结尾。
PHP头文件看起来像这样(在blob_audio.php中)(我们将音频作为二进制大对象存储在数据库中[别问我为什么,这不是我的主意])。
header("Content-Type: audio/ogg"); // this is inside of a condition, this is the "ogg" part of it
header('Content-Length: ' . $length);
header('Content-Disposition: inline');
header('X-Pad: avoid browser bug');
header('Cache-Control: no-cache');

这在桌面上能够完美运行,但可能由于mp3和ogg格式不支持ARM架构的CPU而出现问题。这种情况可能会发生在mp3格式上吗?有人能否提供想法?=)

谢谢, Ben


我们在这里进行了一场辩论,关于在MP3中使用f * cking AVR / VBR / CBR编码是否重要。 这重要吗? 在2012年? - benqus
3个回答

16

好的,我们解决了这个问题。

所以这里是事实(见下面列出的):

iStuffs的问题 -> 我们正在使用安全连接(HTTPS)。这会影响iShit HTML5音频处理。他们需要一些“中间证书” - 可能用于认证或我不知道 - 在服务器证书链之间。因此,在我们的测试服务器上通过SSL无法正常工作。谁知道...在正常部署时可以工作。但是,Android就来了,小心!

Android很有趣,因为(如文档所述- _O ),Droid不支持低于3.1版本的任何通过SSL的媒体格式。这完全是“与人类搞砸”的行为。我不明白为什么在21世纪让一个系统通过安全的连接播放任何多/媒体会是这样一个问题。这肯定是某种版权法的狗屎,我又要呕吐了。

如果你想知道我们做了什么来解决这个问题:

我们发现,如果我们真的想使我们的应用程序跨浏览器和“跨设备兼容”(我不知道这是否是正确的命名方式,但我相信您懂的 ;)),我们需要从SSL中“取出”音频(多媒体)。

因此,为了简单起见,我们为我们的音频文件创建了一个简单的HTTP子域(层次结构中的单独文件夹),并通过该子域+验证/验证脚本文件使其可访问。因此,所有内容都在HTTPS下,但多/媒体在HTTP下分开。

任何f * cking设备上随时都可以正常工作。我知道这是一个“更大”的解决方案,但这是我们测试这些事物的任何设备最“可实现”的解决方案。


我必须点赞voy。如果可以的话,我会点两次。一是因为你的回答很有用,二是因为你让人发笑:D。 - leojg

0

在编程中,你应该使用AAC而不是MP3

看起来你的内容类型被硬编码为audio/ogg - 当请求MP3/M4A时,你需要确保设置正确。


因此,iPad和Android平板电脑都支持mp3格式,但AAC仅适用于iPad。根据使用平板电脑访问www.html5test.com的结果,目前仍然支持mp3格式。抱歉,硬编码的ogg格式在条件语句中。您可以在我的问题的JavaScript部分看到GET参数“ogg = 1”和“mp3 = 1”。因此,我们基于这些检查格式。 - benqus

0

没有"autobuffer"属性。根据文档,这里是可能的属性:

src
crossorigin
preload
autoplay
mediagroup
loop
muted
controls

type 属性提供媒体资源的类型,以帮助用户代理在获取媒体资源之前确定是否可以播放该媒体资源。如果指定,则其值必须是有效的 MIME 类型。某些 MIME 类型定义的 codecs 参数可能需要指定资源的编码方式(根据[RFC4281])。

以下列表显示了如何在 type 属性中使用 codecs=MIME 参数的一些示例,不仅适用于音频,还适用于视频文件。

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Theora video and Vorbis audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Theora video and Speex audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
Vorbis audio alone in Ogg container
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Speex audio alone in Ogg container
<source src='audio.spx' type='audio/ogg; codecs=speex'>
FLAC audio alone in Ogg container
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Dirac video and Vorbis audio in Ogg container

请参阅http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element以获取更多详情。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接