В соответствии с:
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0 должен поддерживать элемент видео HTML5. Мне не удалось заставить это работать с помощью Motorola Droid и не смогли успешно просмотреть видео на любой из примеров примеров видео HTML5. Поскольку в настоящее время не поддерживается QuickTime или Flash, это единственное, что я могу придумать для встраивания видео mp4 на веб-страницу. Кому-нибудь повезло с этим?
Я только что немного экспериментировал с этим, и из того, что я могу сказать, вам нужно три вещи:
Посмотрите демо на этой странице: 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, и он отлично работает.
Римский ответ работал отлично для меня - или, по крайней мере, он дал мне то, что я ожидал. Открытие видео в собственном приложении телефона в точности совпадает с тем, что делает iPhone.
Возможно, стоит подправить вашу точку зрения и ожидать, что видео будет воспроизводиться в полноэкранном режиме в собственном приложении и будет кодироваться для этого. Это разочаровывает то, что щелкнуть видео недостаточно, чтобы заставить его играть так же, как iPhone, но, видя, что для его запуска требуется только атрибут onclick, это не конец света.
Мой совет, FWIW, должен использовать изображение плаката и сделать очевидным, что он будет воспроизводить видео. В настоящий момент я работаю над проектом, который делает именно это, и клиенты довольны этим, - а также, что они бесплатно получают версию Android-приложения бесплатно, потому что контракт был предназначен только для iPhone.
Только для иллюстрации рабочий тег для Android работает ниже. Приятно и просто.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
Здесь я расскажу, как мой друг решил проблему отображения видео в HTML в Nexus One:
Я никогда не мог сделать видеоролик встроенным. На самом деле многие люди в Интернете прямо упоминают, что встроенная видеоигра в формате HTML поддерживается с Honeycomb, и мы сражались с Froyo и Gingerbread... Также для небольших телефонов я считаю, что играть в полноэкранный режим очень естественно - иначе не так много видно, Таким образом, цель состояла в том, чтобы открыть видео в полноэкранном режиме. Однако предлагаемые решения в этом потоке не сработали для нас - нажатие на элемент ничего не вызвало. Кроме того, были показаны элементы управления видео, но ни один плакат не был показан, поэтому пользовательский интерфейс был еще более странным. Итак, что он сделал, было следующее:
Вывести собственный код в HTML для вызова через javascript:
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
Сам код имел функцию, которая вызывала собственную активность для воспроизведения видео:
public class JavaScriptInterface {
private Activity activity;
public JavaScriptInterface(Activity activiy) {
this.activity = activiy;
}
public void startVideo(String videoAddress){
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
activity.startActivity(intent);
}
}
Затем в самом HTML он продолжал терпеть неудачу, чтобы видео-тег работал, воспроизводя видео. Таким образом, наконец, он решил перезаписать событие onclick видео, сделав его реальным. Это почти сработало для него - за исключением того, что плакат не был показан. Здесь самая странная часть - он продолжал получать ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" каждый раз, когда устанавливал атрибут poster тега. Наконец, он нашел проблему, которая была очень странной - оказалось, что он сохранил подтекст source в теге video, но никогда не использовал его. И довольно странно, что это вызывало проблему. Теперь посмотрим его определение раздела video:
<video width="320" height="240" controls="controls" poster='poster.gif' onclick="playVideo('file:///sdcard/test.3gp');" >
Your browser does not support the video tag.
</video>
Конечно, вам также нужно добавить определение функции javascript в начало страницы:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
Я понимаю, что это не просто решение для HTML, но это лучшее, что мы могли сделать для телефона Nexus One. Все кредиты для этого решения идут в Димитар Златков Димитров.
Если вы вызываете вручную 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>
указав мой браузер Android android на html5test.com, сообщает мне, что элемент видео поддерживается, но ни один из перечисленных видеокодеков... Кажется, немного бессмысленно поддерживать элемент видео, но нет кодеков??? если что-то не так с этой тестовой страницей.
однако, я нашел такую же ситуацию с аудиоэлементом: элемент поддерживается, но нет аудиоформатов. см. здесь:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
Ничего не работало для меня, пока я не закодировал видео должным образом. Попробуйте это руководство для правильных настроек ручного тормоза: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Возможно, вам нужно закодировать видео специально для устройства, например:
<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>
Ниже приведены примеры конфигураций кодирования:
Попробуйте h.264 в контейнере mp4. У меня был большой успех с ним на моем Droid X. Я использовал zencoder.com для преобразования формата.
Это работает для меня:
<video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>
Только когда .mp4 находится сверху, а видеофайл не большой.
Он должен работать, но следить за разрешением: Android 2.0 и webkit
Холст работает прямо из коробки, в то время как Geolocation, похоже, не работает все в эмуляторе. Конечно, у меня есть чтобы отправить его, чтобы получить его работа, поэтому я понятия не имею, что это было бы по-настоящему на самом телефоне. я может сказать то же самое с видео тег. Есть проблемы с этим не на самом деле играет видео, НО я думаю, что это видео более высокое разрешение, чем Эмулятор может справиться. Хорошо знать больше как только кто-то попробует это на Motorola Droid или другое Android-устройство следующего поколения
Это может не точно ответить на ваш вопрос, но мы используем формат файла 3GP или 3GP2. Лучше даже использовать протокол rtsp, но браузер Android также распознает формат файла 3GP.
Вы можете использовать что-то вроде
self.location = URL_OF_YOUR_3GP_FILE
для запуска видеопроигрывателя. Файл будет передан по потоку, а после окончания воспроизведения обработка вернется в браузер.
Для меня это решает множество проблем с текущей реализацией видеотега на устройствах Android.
После долгих исследований, на многих разных устройствах, до сих пор я пришел к простому выводу, что MP4 гораздо менее поддерживается, чем формат MOV.
Итак, я использую формат MOV, который поддерживается всеми устройствами Android и Apple, во всех браузерах.
Я обнаружил, что устройство является мобильным устройством или настольным браузером, и установите SRC соответственно:
if (IsMobile()) {
$('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
$('#vid').attr('src', '/uploads/' + name + '.webm');
}
function IsMobile() {
var isMobile = false; //initiate as false
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
return isMobile;
}
В соответствии с: fooobar.com/questions/65900/...
Это должно работать с простым Javascript:
var myVideo = document.getElementById('myVideoTag'); myVideo.play(); if (typeof(myVideo.webkitEnterFullscreen) != "undefined") { // This is for Android Stock. myVideo.webkitEnterFullscreen(); } else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") { // This is for Chrome. myVideo.webkitRequestFullscreen(); } else if (typeof(myVideo.mozRequestFullScreen) != "undefined") { myVideo.mozRequestFullScreen(); }Вы должны вызвать play() перед полноэкранной инструкцией, иначе в Android-браузере он просто войдет в полноэкранный режим, но он будет не начинайте играть. Протестировано с последней версией Android-браузера, Chrome, Safari.
Я тестировал его на Android 2.3.3 и 4.4.
HTML5 поддерживается как на телефонах Google (Android), таких как Galaxy S, так и на iPhone. Однако iPhone не поддерживает Flash, поддерживаемые телефонами Google.