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


90

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

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

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


2
У меня тоже есть Droid, и мне не удалось воспроизвести видео в формате html5. Не работает даже сайт «видео для всех».
haxney

"видео для всех" перенаправлялось на какую-то глупую для меня главную страницу - я даже не мог попытаться просмотреть, кроме одной демонстрации на этой странице!
jmans

Поместите видео во внутреннюю / внешнюю файловую систему и получите к ней доступ. Пример: - <video controls = 'controls'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </video>
Равикиран

Ответы:


78

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

  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, и он отлично работает.


1
Демоверсия, похоже, не работает на моем Nexus One (когда я
нажимаю

1
Кстати, ссылка, которую вы дали, не работает на 2.3.3 Nexus One, сообщение: это видео не может быть воспроизведено
Panthro

@RafaelRoman Я включил и отвечаю, что, надеюсь, это сработает в Nexus One (по крайней мере, для меня): stackoverflow.com/a/8952025/1108032
Борис Странджев

Я не могу заставить это работать на моем планшете 4.0.4. Я думаю, родной - лучший способ
Гарри,

1
Не работает на Android 5.x, видео остается черным, пока не будет нажата
FiringSquadWitness

9

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

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

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

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

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>

есть странные проблемы с этим в настольных браузерах - в chrome и firefox, если вы используете controlsатрибут, событие onclick обходится, когда вы нажимаете паузу (так что видео фактически приостанавливается), но почему-то, когда вы нажимаете кнопку воспроизведения, ничего не происходит - вы должны нажать на видео (а не на кнопку воспроизведения), чтобы возобновить воспроизведение.
Кип,

Это работает. Я могу воспроизводить видео формата h264 на Android. Файлы имеют суффикс mp4.
neoneye

8

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


Мне пришлось добавить функцию javascript playVideo (videoName) со ссылкой на JSInterface, чтобы это работало - это может быть неочевидно для людей, которые раньше не использовали эту технику. Также я предпочел построить полный путь с помощью getExternalDirectory () в функции startVideo, используя только имя файла, переданного из Javascript. Сработало для меня, за исключением того, что изображение плаката исчезает, когда видеоактивность закрывается, и WebView получает обратно фокус (мой WebView встроен в ViewPager). Благодарю.
alan-p

Спасибо за комментарии. Я добавил скрипт вызова javascript, и также полностью согласен с комментарием о построении видеотракта, однако я предполагаю, что это то, что каждый может исправить для своих нужд,
Борис Странджев

У меня тоже была ошибка «Нулевое или пустое значение для заголовка Host». Это был неиспользованный исходный тег. Этот тег источника фактически используется приложением ios (приложение phonegap), поэтому теперь я вставляю тег источника только на ios, и он работает нормально. спасибо за помощь с этой странной проблемой.
Гийом Жандре

5

Если вы звоните вручную 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>

2
Это приводит меня к значку фильма, на который я могу щелкнуть, чтобы просмотреть MP4 в видео-приложении, но по-прежнему не отображает встроенное видео.
jmans 09

Встроенное видео поддерживается начиная с Android 3.1.
Роман Нурик

Может кто-нибудь подтвердить, что это работает на сотовом + устройстве? Не смог заставить работать на 3.2. Я слышу звук и не вижу видео.
dongshengcn

4

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

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

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


то же самое для меня с html5test.com на SGS 2.1update1. Вы уже нашли способ встроить видео? Когда я открываю тестовый сайт broken-links.com/tests/video и нажимаю значок воспроизведения, видео воспроизводится, но не внедряется (как на рабочем столе / Firefox), а открывается в медиаплеере.
Матиас Конрад,

То же самое здесь на моем LG Optimus Black ... но демо по битым ссылкам работает. Попробую кодировать с ручником.
Pier

4

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


Исправлена ​​проблема и для меня. Но mpeg4 не работал в других браузерах, поэтому я создал 2 видеослоя. Сначала mpeg4, а затем h264: <video width = "480" height = "386" цикл автозапуска без звука playsinline> <source src = "assets / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 для android - -> <source src = "assets / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 для всего остального -> <img alt = "" src = "assets / chat_letter.png"> <! - изображение в качестве запасного варианта для IE8 -> </video>
yodalr

1

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

<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


1

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


1

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

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


0

Он должен работать, но смотрите разрешение: Android 2.0 и webkit

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


Я попробую повозиться с разрешением, но я использую реальное устройство, а видеопоток (веб-камера) довольно низкий.
jmans

0

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

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

self.location = URL_OF_YOUR_3GP_FILE

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

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


Привет, я попробовал это с помощью android WebView, но он не работает, есть ли другие настройки, которые мне нужно сделать? Я использую код из этой ссылки .
Крис

Нет, я не знаю другого способа добиться этого.
левиафан

0

Согласно: 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.


0

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

0

Я попытался использовать этот .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 год).


-4

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


Телефоны Google отказались от Flash в Android 4.0 (ICS), и этот вопрос в любом случае не касался iPhone.
greg.kindel
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.