HTML5视频:Android不通过CloudFront播放MP4

HTML5视频:Android不通过CloudFront播放MP4,android,html,video,Android,Html,Video,我们正在我们的网站上实现移动视频功能,并且一直很难通过CloudFront在Android上播放视频(生活在S3上) 我们正在为播放器使用通用的“人人视频”样式的标记,使用3种视频编码(使用Zencoder编程编码的mp4/webm/ogv)和闪存回退。这似乎适用于iPhone,但不适用于Android 根据我们使用平面HTML文件进行的测试,Android似乎不会显示“播放”按钮,除非mp4上没有查询字符串参数(如下面CloudFront URL上的参数)。如果删除这些查询字符串变量,将显示“

我们正在我们的网站上实现移动视频功能,并且一直很难通过CloudFront在Android上播放视频(生活在S3上)

我们正在为播放器使用通用的“人人视频”样式的标记,使用3种视频编码(使用Zencoder编程编码的mp4/webm/ogv)和闪存回退。这似乎适用于iPhone,但不适用于Android

根据我们使用平面HTML文件进行的测试,Android似乎不会显示“播放”按钮,除非mp4上没有查询字符串参数(如下面CloudFront URL上的参数)。如果删除这些查询字符串变量,将显示“播放”按钮。当然,如果单击,视频将不会播放

我们认为编码设置不是罪魁祸首,因为我们编码的mp4将在Android的HTML测试页面中播放,在视频标签中,源指向本地mp4文件

下面是一些示例标记(参数值已删除)。非常感谢您提供的任何见解或建议




更新:

答案指向这一点,这确实证实了我的猜测,即Android正试图从URL的文件扩展名中确定正确的元素。这篇文章确实提到了一个bug,它将使用扩展来代替type属性,但是它在Android2.3中得到了修复。但是,您的HTML不包含type属性,因此我猜即使是Android2.3也会退回到扩展hack,在这种情况下,它可能会遇到我怀疑的下面的查询参数错误

您可以通过将type属性添加到.mp4source元素中,并验证它现在是否可以在Android 2.3上运行来快速测试这一点。然而,即使这样做了,它仍然不能解决您在安卓2.2及更低版本上的问题。为此,您仍然可以尝试下面的方法


如果Android代码查看URL中的文件扩展名以确定使用哪个元素,我不会感到惊讶。如果执行此操作的代码在搜索文件扩展名之前没有剥离查询参数(正如它应该的那样),那么它会感到困惑,因为它找不到任何可以识别的扩展名。这将解释您观察到的症状(没有播放按钮)

验证这一点的一种方法是更改此行:

<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.mp4?Expires=XXXXXXXXXX&Policy=XXXXXXXXXX&Signature=XXXXXXXXXX&Key-Pair-Id=XXXXXXXXXX" />



如果我猜对了,这将导致Android代码正确显示Play按钮。当然,我不知道这个伪参数的存在是否会混淆CloudFront,因此视频可能仍然无法播放。但是,CloudFront可能会忽略该查询参数。

更新:

答案指向这一点,这确实证实了我的猜测,即Android正试图从URL的文件扩展名中确定正确的元素。这篇文章确实提到了一个bug,它将使用扩展来代替type属性,但是它在Android2.3中得到了修复。但是,您的HTML不包含type属性,因此我猜即使是Android2.3也会退回到扩展hack,在这种情况下,它可能会遇到我怀疑的下面的查询参数错误

您可以通过将type属性添加到.mp4source元素中,并验证它现在是否可以在Android 2.3上运行来快速测试这一点。然而,即使这样做了,它仍然不能解决您在安卓2.2及更低版本上的问题。为此,您仍然可以尝试下面的方法


如果Android代码查看URL中的文件扩展名以确定使用哪个元素,我不会感到惊讶。如果执行此操作的代码在搜索文件扩展名之前没有剥离查询参数(正如它应该的那样),那么它会感到困惑,因为它找不到任何可以识别的扩展名。这将解释您观察到的症状(没有播放按钮)

验证这一点的一种方法是更改此行:

<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.mp4?Expires=XXXXXXXXXX&Policy=XXXXXXXXXX&Signature=XXXXXXXXXX&Key-Pair-Id=XXXXXXXXXX" />


如果我猜对了,这将导致Android代码正确显示Play按钮。当然,我不知道这个伪参数的存在是否会混淆CloudFront,因此视频可能仍然无法播放。但是,CloudFront可能会忽略该查询参数。

请查看此页面:
这里:
希望这会有帮助

更新: 在android开发者网站上查看android支持的视频格式。您试图显示*.mp4视频,但这还不够。尝试将视频转换为较低质量(如网站底部所示)。这取决于设备-有时分辨率或帧速率太高而静止-无法显示格式良好的视频。

查看此页面:
这里:
希望这会有帮助

更新:
在android开发者网站上查看android支持的视频格式。您试图显示*.mp4视频,但这还不够。尝试将视频转换为较低质量(如网站底部所示)。这取决于设备-有时分辨率或帧速率太高而静止-无法显示格式良好的视频。

上面(或下面-无论这篇文章在哪里结束!)提供的链接将有所帮助,尤其是最后一个链接


Android支持MP4播放,但您必须删除type属性,我认为首先要放MP4源代码。Play还需要通过JavaScript实现。Android也不会显示视频的第一个静止画面,只是一个视频图标,但它确实支持poster属性。

上面(或下面-无论这篇文章在哪里结束!)提供的链接会有所帮助,尤其是
<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.mp4?Expires=XXXXXXXXXX&Policy=XXXXXXXXXX&Signature=XXXXXXXXXX&Key-Pair-Id=XXXXXXXXXX&__bogusparam=.mp4" />
<video id="video" autobuffer height="240" poster="bbb_poster-360x240.jpg" width="360">
        <source src="BigBuck.m4v">
        <source src="BigBuckBunny.mp4" type="video/mp4">
        <source src="BigBuck.webm" type="video/webm">
        <source src="BigBuck.theora.ogv" type="video/ogv">
        <source src="BigBuckBunny.ogg" type="video/ogg">
</video>
<video id="videoTag" class="video-js" width="640" height="480" controls poster='/images/poster.gif'>
<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.mp4?Expires=XXXXXXXXXX&amp;Policy=XXXXXXXXXX&amp;Signature=XXXXXXXXXX&amp;Key-Pair-Id=XXXXXXXXXX" />
<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.webm?Expires=1XXXXXXXXXX&amp;Policy=XXXXXXXXXX&amp;Signature=XXXXXXXXXX&amp;Key-Pair-Id=XXXXXXXXXX" />
<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.ogv?Expires=XXXXXXXXXX&amp;Policy=XXXXXXXXXX&amp;Signature=XXXXXXXXXX&amp;Key-Pair-Id=XXXXXXXXXX" />
<object id='flash_fallback_1' class='vjs-flash-fallback' width='640' height='480' type='application/x-shockwave-flash' data='http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf'>
<param name='movie' value='http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf' />
<param name='allowfullscreen' value='true' />
<param name='flashvars' value='config={"playlist":["%2fimages%2fspacer.gif", {"url": "https%3a%2f%2fdi8df8d1ooc3o.cloudfront.net%2f43391_1309888197%2fvideo.mp4%3fExpires%3d1309892359%26Policy%3deyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kaThkZjhkMW9vYzNvLmNsb3VkZnJvbnQubmV0LzQzMzkxXzEzMDk4ODgxOTcvZWNoby1oZXJld2VhcmUubXA0IiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxMzA5ODkyMzU5fX19XX0_%26Signature%3dcp-wUUSN3EqQ0A%7ewaa5VitBeoMf0wjf5kELID9w8pP8kLp6dkZ3%7ea7H9Sp6uqBrNOkMDr4dMuvwnICBozH0eLLcc4LA7fd2jX5hMru1ORVjc8B%7ey1zNaj1ZlLeuCy6YV5zfBAzd9jVh6DGKVadp-S%7eLHXQiVin3N4GXwBnxZ-No_%26Key-Pair-Id%3dAPKAIAAZWMFF53NY4OMA","autoPlay":false,"autoBuffering":true}]}' />
<img src='/images/poster.gif' alt='Poster Image' title='No video playback capabilities.' />