HTML5 <видео> элемент на Android
Да, я закончил тем, что переопределил/admin/jsi18n/url.
Вот то, что я добавил в своем urls.py. Удостоверьтесь, что это выше/admin/url
(r'^admin/jsi18n', i18n_javascript),
И здесь является функцией i18n_javascript, которую я создал.
from django.contrib import admin
def i18n_javascript(request):
return admin.site.i18n_javascript(request)
8 ответов
Я просто немного поэкспериментировал с этим, и, насколько я могу судить, вам нужны три вещи:
- Вы не должны использовать атрибут type при вызове видео.
- Вы должны вручную вызывать video.play()
- Видео должно быть закодировано в соответствии с довольно строгими параметрами; использование настроек iPhone в Handbrake с отмеченной кнопкой 'Web Optimized' обычно помогает.
Посмотрите демонстрационный пример на этой странице: http://broken-links.com/tests/video/
Это работает, AFAIK, во всех настольных браузерах с поддержкой видео, iPhone и Android.
Вот разметка:
<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>
И вот это в JS:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Я протестировал это на Samsung Galaxy S и все работает нормально.
Должно работать, но смотрите разрешение: Android 2.0 и webkit
Canvas работает прямо из коробки, а геолокация не работает на все в эмуляторе. Конечно, у меня есть отправить им фиктивные места, чтобы доставить работа, поэтому я понятия не имею, что это будет как на реальном телефоне. я могу сказать то же самое с видео тег. С этим проблем нет на самом деле проигрываю видео, НО я думаю дело в том, что видео более высокое разрешение, чем то Эмулятор справится. Мы узнаем больше как только кто-нибудь попробует это на Motorola Droid или другое Android-устройство следующего поколения
Может быть, вам нужно кодировать видео специально для устройства, например:
<video id="movie" width="320" height="240" autobuffer controls>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>
Вот несколько примеров конфигураций кодирования, которые работали здесь:
Если вы вручную вызываете video.play () , он должен работать:
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
enableVideoClicks();
}
function enableVideoClicks() {
var videos = document.getElementsByTagName('video') || [];
for (var i = 0; i < videos.length; i++) {
// TODO: use attachEvent in IE
videos[i].addEventListener('click', function(videoNode) {
return function() {
videoNode.play();
};
}(videos[i]));
}
}
</script>
</head>
<body onload="init()">
<video src="sample.mp4" width="400" height="300" controls></video>
...
</body>
</html>
Ответ Романа отлично сработал для меня - или, по крайней мере, он дал мне то, что я ожидал. Открытие видео в родном приложении телефона - это точно то же самое, что делает iPhone.
Возможно, стоит скорректировать свою точку зрения и ожидать, что видео будет воспроизводиться в полноэкранном режиме в собственном приложении, и кодировать для этого. Расстраивает, что щелчка по видео недостаточно, чтобы оно воспроизводилось так же, как на iPhone, но поскольку для его запуска требуется только атрибут onclick, это не конец света.
Мой совет, FWIW, - использовать изображение плаката и сделать очевидным, что оно будет воспроизводить видео. В данный момент я работаю над проектом, в котором именно так и сделано, и клиенты довольны - а также тем, что они получают версию веб-приложения для Android бесплатно, конечно, потому что контракт был только на веб-приложение для iPhone.
Для примера ниже приведен рабочий видеотег для Android. Хорошо и просто.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
Возможно, это не совсем ответ на ваш вопрос, но мы используем формат файла 3GP или 3GP2. Лучше даже использовать протокол rtsp, но браузер Android также распознает формат файла 3GP.
Вы можете использовать что-то вроде
self.location = URL_OF_YOUR_3GP_FILE
для запуска видеопроигрывателя. Файл будет передан в потоковом режиме, и после завершения воспроизведения обработка будет возвращена браузеру.
Для меня это решает множество проблем с текущей реализацией тегов видео на устройствах Android.
указание моего браузера Android 2.2 на html5test.com , говорит мне, что элемент видео поддерживается, но ни один из перечисленных видеокодеков ... кажется немного бессмысленным для поддержка видеоэлементов, но без кодеков ??? если что-то не так с этой тестовой страницей.
однако я обнаружил такую же ситуацию с элементом audio: элемент поддерживается, но нет аудиоформатов. см. здесь:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
У меня ничего не получалось, пока я правильно не закодировал видео. Попробуйте это руководство для правильной настройки ручного тормоза: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694