HTML5 элемент <video> на Android

В соответствии с:

http://developer.android.com/sdk/android-2.0-highlights.html

Android 2.0 должен поддерживать видеоэлемент HTML5. Мне не удалось заставить это работать с помощью Motorola Droid, и мне не удалось успешно просмотреть видео ни на одной из страниц с примерами видео HTML5. Поскольку в настоящее время нет поддержки QuickTime или Flash, это единственное, что я могу придумать для встраивания видео в формате mp4 на веб-страницу. Кому-нибудь повезло с этим?

Я только что поэкспериментировал с этим, и, насколько я могу судить, вам понадобятся три вещи:

1. Вы не должны использовать атрибут type при вызове видео.
2. Вы должны вручную вызвать video.play ()
3. Видео должно быть закодировано по довольно строгим параметрам; использование настройки 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, и он отлично работает.

Ответ Романа сработал для меня - или, по крайней мере, он дал мне то, чего я ожидал. Открытие видео в собственном приложении телефона происходит точно так же, как и на 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 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

Возможно, вам нужно кодировать видео специально для устройства, например:

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

Вот несколько примеров используемых здесь конфигураций кодирования:

https://supportforums.motorola.com

Попробуйте 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

Canvas работает прямо из коробки, в то время как геолокация, похоже, вообще не работает в эмуляторе. Конечно, я должен отправить ему фиктивные места, чтобы заставить его работать, поэтому я понятия не имею, как это будет выглядеть на реальном телефоне. То же самое могу сказать и с тегом видео. Есть проблемы с тем, что он фактически не воспроизводит видео, НО я думаю, что это факт, что видео имеет более высокое разрешение, чем то, что может обрабатывать эмулятор. Мы узнаем больше, когда кто-то попробует это на Motorola Droid или другом Android-устройстве следующего поколения.

Возможно, это не совсем ответ на ваш вопрос, но мы используем формат файла 3GP или 3GP2. Лучше даже использовать протокол rtsp, но браузер Android также распознает формат файла 3GP.

Вы можете использовать что-то вроде

self.location = URL_OF_YOUR_3GP_FILE

для запуска видеоплеера. Файл будет передан в потоковом режиме, и после завершения воспроизведения обработка будет возвращена браузеру.

Для меня это решает множество проблем с текущей реализацией тегов видео на устройствах Android.

Согласно: https://stackoverflow.com/a/24403519/365229

Это должно работать с простым 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.

После долгих исследований на множестве различных устройств я пришел к простому выводу, что 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;
}

Я попытался использовать этот .mp4формат для воспроизведения видео на устройствах Android, но у меня ничего не вышло. Поэтому после некоторых проб и ошибок я преобразовал видео в .webmформат и следующий код без лишнего javascript или JQuery:

<video id="video" class="video" muted loop autoplay>
    <source src="../media/some_video.webm" type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

Он работал на более старом устройстве Android (по крайней мере, несколько лет назад по состоянию на 2020 год).

HTML5 поддерживается на телефонах Google (Android), таких как Galaxy S и iPhone. Однако iPhone не поддерживает Flash, который поддерживают телефоны Google.