HTML5 视频：Android 无法通过 CloudFront 播放 MP4

Question

We are in the process of implementing mobile video functionality on our site, and have been having difficulties getting video (living on S3) to play on the Android through CloudFront.

We're using generic 'Video For Everybody'-style markup for the player, using 3 video encodings (mp4/webm/ogv programatically encoded using Zencoder) with a Flash fallback. This seems to work for iPhones, but not for the Android.

From our testing using a flat HTML file, it appears that the Android will not display a 'play' button unless there are no query string parameters on the mp4 (like those on the CloudFront URLs below). If these querystring variables are removed, the 'play' button will appear. The video will not play if clicked however, of course.

We are thinking encoding settings are not the culprit as mp4s we have encoded will play in the Android in an HTML test page, inside a video tag with a source pointed at the mp4 file locally.

Here is some sample markup (parameter values Xed out). Thanks very much in advance for any insight or suggestions you can provide.

---

<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

can you try this:

<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

Android Chrome (4.2) won't play an MP4 located on a server requiring authentication or in a password protected folder. MP4 will play from an HTTPS server if it does not require authentication.

Furthermore, you can serve up an HTML page that is protected (requiring log in) and if it has a video tag that points to another folder that does not require a password, the MP4 will play.

I have not been able to find a solution except to tell people to use Firefox for Android - it will play the WebM video even from a protected location.

Answer 3

Not sure if this is the problem, but your HTML syntax is incorrect. You need to HTML encode the ampersands when within attribute quotes. Try this:

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

Answer 4

Update:

The answer from @ania points to this link from DiveIntoHTML5 , which indeed confirms my guess that Android is trying to determine the right source element from the file extension of the URL. The article does mention that there was a bug where the extension will be used instead of the type attribute, but it was fixed in Android 2.3. However, your HTML does not include the type attribute, so I guess even Android 2.3 will fall back to the extension hack, in which case it likely hits the query params bug I suspect below.

You can quickly test this by adding the type attribute to the.mp4 source element and verifying if it now works on Android 2.3. However, even if it does, it still does not solve your issue on Android 2.2 and lower. For that you might still try the approach below.

---

I wouldn't be surprised if Android code looks at the file extension in the URL to determine which source element to use. If the code that does this does not strip the query parameters (as it should) before it searches for the file extension, it'll get confused as it won't find any extension it recognizes. This would explain the symptoms you are observing (the absence of the Play button).

One way to verify this would be to change this line:

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

to

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

If I have guessed it properly, this should cause the Android code to show the Play button properly. Of course, I don't know if the presence of this bogus parameter would confuse CloudFront, so the video still might not play. However, there's a chance CloudFront would just ignore that query parameter.

Answer 5

Look at this page: http://diveintohtml5.ep.io/video.html#android
And here: http://www.broken-links.com/2010/07/30/encoding-video-for-android/
Hope it will help!!

Update: Check on android developer site with video formats supported by android. You are trying to show *.mp4 video but it is not enough. Try to convert your video to lower quality(as shown on the website on the bottom). It depends on device - sometimes resolution or frame rate is too high and still - video which has good format cannot be shown.

Answer 6

Those links provided by ania above (or below - wherever this post ends up,) will help. especially the last one.

Android support MP4 playback but you must remove the type attribute and I think put the MP4 source first. Play also needs to be implemented via JavaScript. Android will not display the first still of the video either, just a video icon, but it does support the poster attribute.