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

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

89 голосов
/ 10 ноября 2009

Согласно:

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

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

Ответы [ 14 ]

78 голосов
/ 08 июля 2010

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

  1. Вы не должны использовать атрибут type при вызове видео.
  2. Вы должны вручную вызвать video.play ()
  3. Видео должно быть закодировано с довольно строгими параметрами; использование настройки iPhone на Handbrake с установленной кнопкой «Оптимизировано для Web» обычно делает свое дело.

Посмотрите демоверсию на этой странице: 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, и он отлично работает.

9 голосов
/ 05 мая 2010

Ответ Романа отлично сработал для меня - или, по крайней мере, дал мне то, что я ожидал. Открытие видео в собственном приложении телефона точно такое же, как и в iPhone.

Вероятно, стоит скорректировать вашу точку зрения и ожидать, что видео будет воспроизводиться в полноэкранном режиме в собственном приложении, и кодирование для этого. Вызывает разочарование тот факт, что нажатие на видео недостаточно для его воспроизведения точно так же, как для iPhone, но, поскольку для его запуска требуется только атрибут onclick, это еще не конец света.

Мой совет, FWIW, - использовать изображение постера и сделать так, чтобы оно воспроизводило видео. Сейчас я работаю над проектом, который делает именно это, и клиенты довольны им, а также тем, что они получают бесплатную версию веб-приложения для Android, конечно, потому что контракт был заключен только на веб-приложение для iPhone.

Только для иллюстрации ниже приведен рабочий тег видео для Android. Красиво и просто.

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
8 голосов
/ 21 января 2012

Здесь я привожу, как мой друг решил проблему отображения видео в 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. Все кредиты для этого решения идут Димитру Златкову Димитрову.

5 голосов
/ 15 декабря 2009

Если вы вручную позвоните 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>
4 голосов
/ 30 августа 2010

У меня ничего не получалось, пока я не закодировал видео правильно Попробуйте это руководство для правильной настройки ручного тормоза: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

4 голосов
/ 11 августа 2010

указывает моему браузеру Android 2.2 на html5test.com , сообщает, что элемент видео поддерживается, но ни один из перечисленных видеокодеков ... кажется немного бессмысленным поддерживать элемент видео, но нет кодеков ??? если что-то не так с этой тестовой страницей.

однако, я обнаружил такую ​​же ситуацию с аудио элементом: элемент поддерживается, но аудио форматов нет. смотри здесь:

http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/

1 голос
/ 07 марта 2012

Это работает для меня:

<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 находится сверху, а видеофайл не слишком большой.

1 голос
/ 30 марта 2011

Попробуйте h.264 в контейнере mp4. У меня был большой успех на моем Droid X. Я использовал zencoder.com для преобразования форматов.

1 голос
/ 15 декабря 2009

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

<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

0 голосов
/ 04 января 2017

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