Question

我们正在我们的网站上实施移动视频功能，并且难以通过CloudFront在Android上播放视频（在S3上生活）。

我们正在为播放器使用通用的“Video For Everybody”风格标记，使用3个视频编码（使用Zencoder以编程方式编码的mp4 / webm / ogv）和Flash后备。这似乎适用于iPhone，但不适用于Android。

从我们使用平面HTML文件的测试中看来，除非mp4上有 no 查询字符串参数，否则Android不会显示“播放”按钮（如下面的CloudFront网址上的那些参数））。如果删除了这些查询字符串变量，则会出现“播放”按钮。如果点击，视频将无法播放，当然。

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

这是一些示例标记（参数值Xed out）。非常感谢您提供的任何见解或建议。

<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&Policy=XXXXXXXXXX&Signature=XXXXXXXXXX&Key-Pair-Id=XXXXXXXXXX" />
<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.webm?Expires=1XXXXXXXXXX&Policy=XXXXXXXXXX&Signature=XXXXXXXXXX&Key-Pair-Id=XXXXXXXXXX" />
<source src="https://di8df8d1ooc3o.cloudfront.net/43391_1309888197/video.ogv?Expires=XXXXXXXXXX&Policy=XXXXXXXXXX&Signature=XXXXXXXXXX&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.' />

Answer 1

你可以试试这个：

<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>

Answer 2

<强>更新

@ania的答案指向此link from DiveIntoHTML5，这确实证实了我的猜测，即Android正在尝试从网址的文件扩展名中确定正确的源元素。文章确实提到有一个错误，将使用扩展名而不是类型属性，但它已在Android 2.3中修复。但是，您的HTML不包含类型属性，所以我猜甚至Android 2.3也会回退到扩展黑客，在这种情况下它可能会遇到我怀疑在下面的查询参数错误。

您可以通过将类型属性添加到.mp4 源元素并验证它现在是否适用于Android 2.3来快速测试。但是，即使它确实如此，它仍然无法解决您在Android 2.2及更低版本上的问题。为此，您可能仍会尝试以下方法。

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

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

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

到

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

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

Answer 3

请看这页：http://diveintohtml5.ep.io/video.html#android
在这里：http://www.broken-links.com/2010/07/30/encoding-video-for-android/
希望它会有所帮助!!

<强>更新使用android支持的视频格式检查android开发者网站。您正试图显示* .mp4视频，但这还不够。尝试将视频转换为较低质量（如底部网站所示）。这取决于设备 - 有时分辨率或帧速率太高而且仍然 - 具有良好格式的视频无法显示。

Answer 4

上面提到的那些链接（或者下面 - 这篇帖子最终的地方！）会有所帮助，特别是最后一个。

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

Answer 5

Android Chrome（4.2）不会播放位于需要身份验证的服务器上的MP4或受密码保护的文件夹。如果不需要身份验证，MP4将从HTTPS服务器播放。

此外，您可以提供受保护的HTML页面（需要登录），如果它有一个指向另一个不需要密码的文件夹的视频标签，MP4将会播放。

除了告诉人们使用Firefox for Android之外，我无法找到解决方案 - 它甚至会从受保护的位置播放WebM视频。

Answer 6

不确定这是否是问题，但您的HTML语法不正确。在属性引号内，您需要对＆符号进行HTML编码。试试这个：

<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.' />

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

6 个答案: