HTML5 видео: Android не воспроизводит MP4 через CloudFront

Question

Мы внедряем функцию мобильного видео на нашем сайте, и у нас возникли трудности с воспроизведением видео (живого на S3) на Android через CloudFront.

Мы используем универсальную разметку в стиле «Видео для всех» для проигрывателя, используя 3 кодировки видео (mp4 / webm / ogv, программно кодируемые с помощью Zencoder) с резервной версией Flash. Кажется, это работает для iPhone, но не для Android.

Из нашего тестирования с использованием плоского HTML-файла выяснилось, что Android не будет отображать кнопку воспроизведения, если в mp4 нет параметров строки запроса no (как в URL-адресах CloudFront ниже) , Если эти переменные строки запроса будут удалены, появится кнопка воспроизведения. Видео, конечно, не будет воспроизводиться, если щелкнуть по нему.

Мы думаем, что настройки кодирования не являются причиной, поскольку кодированные mp4s будут воспроизводиться в Android на тестовой странице HTML, внутри видео-тега с источником, локально указавшим на файл mp4.

Вот примерная разметка (значения параметров выделены Xed). Большое спасибо заранее за любые идеи или предложения, которые вы можете предоставить.

---

<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

Не уверен, что это проблема, но ваш синтаксис 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.' />

Answer 3

Android Chrome (4.2) не будет воспроизводить MP4, расположенный на сервере, требующем аутентификации, или в папке, защищенной паролем.MP4 будет воспроизводиться с HTTPS-сервера, если он не требует аутентификации.

Кроме того, вы можете открыть защищенную HTML-страницу (требующую входа в систему), и если у нее есть видео-тег, указывающий на другую папку, котораяпароль не требуется, MP4 будет воспроизводиться.

Мне не удалось найти решение, кроме как попросить людей использовать Firefox для Android - он будет воспроизводить видео WebM даже из защищенного места.

Answer 4

Эти ссылки, предоставленные Анией выше (или ниже - где бы ни заканчивался этот пост!), Помогут, особенно последняя.

Android поддерживает воспроизведение MP4, но вы должны удалить атрибут type, и я думаю, что источник MP4 стоит первым. Игра также должна быть реализована с помощью JavaScript. Android также не будет отображать первый кадр видео, только значок видео, но он поддерживает атрибут poster.

Answer 5

Посмотрите на эту страницу: http://diveintohtml5.ep.io/video.html#android
А здесь: http://www.broken -links.com / 2010/07/30 / encoding-video-for-android /
Надеюсь, это поможет !!

Обновление: Проверьте на сайте разработчика Android с видео форматов, поддерживаемых Android. Вы пытаетесь показать * .mp4 видео, но этого недостаточно. Попробуйте конвертировать видео в более низкое качество (как показано на веб-сайте внизу). Это зависит от устройства - иногда разрешение или частота кадров слишком высоки, но видео в хорошем формате не может быть показано.

Answer 6

Обновление:

Ответ от @ ania указывает на эту ссылку с DiveIntoHTML5 , которая действительно подтверждает мое предположение, что Android пытаетсяопределить правильный source элемент из расширения файла URL.В статье упоминается, что была ошибка, когда вместо атрибута type будет использоваться расширение, но оно было исправлено в Android 2.3.Однако ваш HTML не содержит атрибута type , поэтому я думаю, что даже Android 2.3 вернется к расширению хака, и в этом случае он, вероятно, попадет в ошибку параметров запроса, которую я подозреваю ниже.

Вы можете быстро проверить это, добавив атрибут type к элементу .mp4 source и проверив, работает ли он сейчас на Android 2.3.Однако, даже если это произойдет, это все равно не решит вашу проблему на Android 2.2 и ниже.Для этого вы все равно можете попробовать следующий подход:

---

Я не удивлюсь, если код Android смотрит на расширение файла в URL, чтобы определить, какой элемент source использовать.Если код, который делает это, не удаляет параметры запроса (как и должно быть) до того, как он ищет расширение файла, он будет сбит с толку, поскольку не найдет расширение, которое он распознает.Это объяснило бы симптомы, которые вы наблюдаете (отсутствие кнопки Play).

Один из способов проверить это - изменить эту строку:

<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 просто проигнорирует этот параметр запроса.