Element <video> HTML5 na Androida


90

Według:

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

Android 2.0 powinien obsługiwać element wideo HTML5. Nie udało mi się to uruchomić przy użyciu Motorola Droid i nie udało mi się z powodzeniem wyświetlić wideo na żadnej z przykładowych stron wideo HTML5. Ponieważ obecnie nie ma wsparcia dla QuickTime ani Flash, jest to jedyna inna rzecz, o której mogę pomyśleć, aby osadzić wideo mp4 na stronie internetowej. Czy ktoś miał z tym szczęście?


2
Mam również Droida i nie udało mi się odtworzyć filmów HTML5. Nawet witryna „wideo dla wszystkich” nie działa.
haxney

„wideo dla wszystkich” przekierowało na jakąś głupią dla mnie stronę główną - nie mogłem nawet spróbować obejrzeć, ale jedyne demo na tej stronie!
jmans

Umieść filmy w wewnętrznym / zewnętrznym systemie plików i uzyskaj do niego dostęp. Przykład: - <video controls = 'controls'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </video>
Ravikiran,

Odpowiedzi:


78

Właśnie przeprowadziłem z tym pewne eksperymenty iz tego, co mogę powiedzieć, potrzebujesz trzech rzeczy:

  1. Nie możesz używać atrybutu type podczas wywoływania wideo.
  2. Musisz ręcznie wywołać funkcję video.play ()
  3. Wideo musi być zakodowane według dość ścisłych parametrów; użycie ustawienia iPhone'a na hamulcu ręcznym z zaznaczonym przyciskiem „Optymalizacja internetowa” zwykle załatwia sprawę.

Obejrzyj demo na tej stronie: http://broken-links.com/tests/video/

Działa to, AFAIK, we wszystkich przeglądarkach komputerowych z obsługą wideo, iPhone'ach i Androidach.

Oto znaczniki:

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

Mam to w JS:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

Przetestowałem to na Samsungu Galaxy S i działa dobrze.


1
Wydaje się, że wersja demonstracyjna nie działa na moim Nexusie One (nic się nie dzieje, gdy
klikam

1
Przy okazji, podany przez Ciebie link nie działa na Nexus One 2.3.3, wiadomość: tego filmu nie można odtworzyć
Panthro

@RafaelRoman Dodałem i odpowiedziałem, że mam nadzieję, że zadziała w Nexusie One (przynajmniej mi się udało): stackoverflow.com/a/8952025/1108032
Boris Strandjev

Nie mogę uruchomić tego na moim tablecie 4.0.4. Myślę, że język ojczysty to najlepszy wybór
Harry,

1
Nie działa na Androidzie 5.x, wideo jest czarne do momentu kliknięcia odtwarzania
FiringSquadWitness

9

Odpowiedź Romana działała dobrze dla mnie - a przynajmniej dała mi to, czego się spodziewałem. Otwieranie wideo w natywnej aplikacji telefonu przebiega dokładnie tak samo, jak w przypadku iPhone'a.

Prawdopodobnie warto dostosować swój punkt widzenia i oczekiwać, że wideo będzie odtwarzane na pełnym ekranie we własnej aplikacji i kodowanie do tego. To frustrujące, że kliknięcie wideo nie wystarcza, aby odtworzyć go w taki sam sposób, jak robi to iPhone, ale ponieważ do jego uruchomienia potrzebny jest tylko atrybut onclick, to nie jest koniec świata.

Moja rada, FWIW, to użycie obrazu plakatu i pokazanie, że odtworzy wideo. W tej chwili pracuję nad projektem, który właśnie to robi, a klienci są z tego zadowoleni - a także, że dostają wersję aplikacji internetowej na Androida za darmo, ponieważ umowa dotyczyła tylko Aplikacja internetowa na iPhone'a.

Dla ilustracji poniżej działający tag wideo na Androida. Ładnie i prosto.

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

są z tym dziwne problemy w przeglądarkach na komputery stacjonarne - w Chrome i Firefox, jeśli użyjesz controlsatrybutu, zdarzenie onclick jest pomijane po naciśnięciu pauzy (więc wideo faktycznie zostaje wstrzymane), ale w jakiś sposób po kliknięciu przycisku odtwarzania nic się nie dzieje - musisz kliknąć wideo (nie przycisk odtwarzania), aby wznowić odtwarzanie.
Kip

To działa. Mogę odtwarzać filmy h264 na Androidzie. Pliki mają rozszerzenie mp4.
neoneye

8

Oto, jak mój znajomy rozwiązał problem wyświetlania filmów w HTML w Nexus One:

Nigdy nie udało mi się odtworzyć wideo w tekście. Właściwie wiele osób w Internecie wspomina wyraźnie, że odtwarzanie wideo w kodzie HTML jest obsługiwane od Honeycomb, a my walczyliśmy z Froyo i Gingerbread ... Również w przypadku mniejszych telefonów uważam, że granie na pełnym ekranie jest bardzo naturalne - w przeciwnym razie niewiele widać . Celem było więc, aby wideo było otwarte na pełnym ekranie. Jednak proponowane rozwiązania w tym wątku nie zadziałały u nas - kliknięcie na element nic nie wyzwoliło. Ponadto pokazano elementy sterujące wideo, ale żaden plakat nie został wyświetlony, więc wrażenia użytkownika były jeszcze dziwniejsze. Więc co zrobił, było następujące:

Wyświetlaj kod natywny w kodzie HTML, aby można go było wywołać przez javascript:

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

Sam kod miał funkcję, która nazywała aktywność natywną do odtwarzania wideo:

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);
    }
}

Następnie w samym HTML nie udawało się, aby tag wideo działał odtwarzając wideo. Dlatego w końcu zdecydował się nadpisać onclickwydarzenie z wideo, sprawiając, że zostanie ono odtworzone. To prawie mu się udało - poza tym, że żaden plakat nie został wyświetlony. Oto najbardziej dziwna część - otrzymywał za ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"każdym razem, gdy ustawiał posteratrybut tagu. W końcu znalazł problem, co było bardzo dziwne - okazało się, że zachował sourcesubtag w videotagu, ale nigdy go nie użył. I co było dość dziwne, właśnie to powodowało problem. Teraz zobacz jego definicję videosekcji:

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

Oczywiście musisz też dodać definicję funkcji javascript w nagłówku strony:

<script>
  function playVideo(video){
    window.JSInterface.startVideo(video);
  }
</script>

Zdaję sobie sprawę, że nie jest to wyłącznie rozwiązanie HTML, ale jest to najlepsze, co mogliśmy zrobić dla telefonu typu Nexus One. Wszystkie kredyty za to rozwiązanie należą do Dimitar Zlatkov Dimitrov.


Musiałem dodać funkcję javascript playVideo (videoName) w odniesieniu do JSInterface, aby to działało - może nie być oczywiste dla osób, które wcześniej nie używały tej techniki. Wolałem również zbudować pełną ścieżkę za pomocą getExternalDirectory () w funkcji startVideo z tylko nazwą pliku przekazanego z Javascript. Pracowało dla mnie, z wyjątkiem tego, że obraz plakatu znika, gdy aktywność wideo zostaje zamknięta, a WebView odzyskuje ostrość (mój WebView jest osadzony w ViewPager). Dzięki.
alan-p

Dziękuję za komentarze. Dodałem skrypt rozmowy javascript, ad także całkowicie zgadza się z komentarzem budowy ścieżki wideo, jednak zakładam, to jest coś, każdy może ustalić dla swoich potrzeb,
Boris Strandjev

Wystąpił również błąd „Null lub pusta wartość dla hosta nagłówka”. To był nieużywany znacznik źródłowy. Ten tag źródłowy jest faktycznie używany przez aplikację ios (aplikację phonegap), więc teraz wstawiam tag źródłowy tylko na iOS i działa dobrze. dzięki za pomoc w tej dziwnej sprawie.
Guillaume Gendre

5

Jeśli zadzwonisz ręcznie video.play(), powinno działać:

<!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
To prowadzi mnie do ikony filmu, którą mogę kliknąć, aby wyświetlić MP4 w aplikacji wideo, ale nadal nie daje mi wbudowanego wideo.
jmans

Wideo w treści jest obsługiwane od systemu Android 3.1.
Roman Nurik

Czy ktoś może potwierdzić, że to działa na urządzeniu o strukturze plastra miodu +? Nie mogłem sprawić, żeby działało na 3.2. Słyszę dźwięk i nie widzę obrazu.
dongshengcn

4

wskazanie mojej przeglądarki Android 2.2 na html5test.com , mówi mi, że element wideo jest obsługiwany, ale żaden z wymienionych kodeków wideo ... wydaje się trochę bezcelowy, aby wspierać element wideo, ale bez kodeków ??? chyba że coś jest nie tak ze stroną testową.

Jednak znalazłem taką samą sytuację z elementem audio: element jest obsługiwany, ale nie ma formatów audio. Spójrz tutaj:

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


to samo dla mnie z html5test.com na SGS 2.1update1. Czy znalazłeś już sposób na osadzenie wideo? Kiedy otwieram witrynę testową broken-links.com/tests/video i klikam ikonę odtwarzania, wideo jest odtwarzane, ale nie jest osadzone (jak na komputerze stacjonarnym / Firefox), ale otwiera się w odtwarzaczu multimedialnym.
Mathias Conradt

To samo na moim LG Optimus Black ... ale wersja demonstracyjna z uszkodzonymi linkami działa. Spróbuję zakodować hamulcem ręcznym.
Przystań

4

Nic nie działało, dopóki poprawnie nie zakodowałem wideo. Wypróbuj ten przewodnik, aby poznać prawidłowe ustawienia hamulca ręcznego: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694


U mnie też naprawiono problem. Ale mpeg4 nie działał w innych przeglądarkach, więc stworzyłem 2 warstwy wideo. Najpierw mpeg4, a następnie h264: <video width = "480" height = "386" autoplay loop muted playsinline> <source src = "asset / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 dla Androida - -> <source src = "asset / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 dla wszystkiego innego -> <img alt = "" src = "asset / chat_letter.png"> <! - obraz jako rezerwowy dla IE8 -> </video>
yodalr

1

Może musisz zakodować wideo specjalnie dla urządzenia np:

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

Oto kilka przykładów konfiguracji kodowania, nad którymi pracowaliśmy:

https://supportforums.motorola.com


1

Wypróbuj h.264 w kontenerze mp4. Odniosłem duży sukces na moim Droid X. Używałem zencoder.com do konwersji formatów.


1

To działa dla mnie:

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

Tylko wtedy, gdy .mp4 jest na górze, a plik wideo nie jest zbyt duży.


0

Ma działać, ale uważaj na rozdzielczość: Android 2.0 i webkit

Canvas działa od razu po wyjęciu z pudełka, a Geolokalizacja wydaje się w ogóle nie działać w emulatorze. Oczywiście muszę wysłać fałszywe lokalizacje, aby działał, więc nie mam pojęcia, jak by to wyglądało na prawdziwym telefonie. To samo mogę powiedzieć o tagu wideo. Istnieją problemy z faktycznym odtwarzaniem wideo, ALE myślę, że jest to fakt, że wideo ma wyższą rozdzielczość niż to, co może obsłużyć Emulator. Dowiemy się więcej, gdy ktoś spróbuje tego na Motorola Droid lub innym urządzeniu z Androidem nowej generacji


Spróbuję poradzić sobie z rozdzielczością, ale używam rzeczywistego urządzenia, a strumień wideo (kamera internetowa) jest dość niski.
jmans

0

To może nie do końca odpowiadać na Twoje pytanie, ale używamy formatu plików 3GP lub 3GP2. Lepiej nawet używać protokołu rtsp, ale przeglądarka Androida rozpozna również format pliku 3GP.

Możesz użyć czegoś takiego jak

self.location = URL_OF_YOUR_3GP_FILE

aby uruchomić odtwarzacz wideo. Plik zostanie przesłany strumieniowo, a po zakończeniu odtwarzania obsługa zostanie zwrócona do przeglądarki.

Dla mnie to rozwiązuje wiele problemów z obecną implementacją tagów wideo na urządzeniach z Androidem.


Cześć, próbowałem tego za pomocą Android WebView, ale nie działa, czy muszę zrobić jakieś inne ustawienia? Używam kodu w tym linku .
Kris

Nie, nie znam innego sposobu, aby to osiągnąć.
lewiatan

0

Według: https://stackoverflow.com/a/24403519/365229

To powinno działać, ze zwykłym Javascriptem:

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();
}

Musisz uruchomić play () przed instrukcją pełnoekranową, w przeciwnym razie w przeglądarce Android przejdzie ona po prostu na pełny ekran, ale nie zacznie grać. Przetestowano w najnowszej wersji przeglądarki Android, Chrome, Safari.

Przetestowałem to na przeglądarce Android 2.3.3 i 4.4.


0

Po wielu badaniach, na wielu różnych urządzeniach, do tej pory doszedłem do prostego wniosku, który MP4jest znacznie mniej obsługiwany niż MOVformat. Dlatego używam MOVformatu obsługiwanego przez wszystkie urządzenia z Androidem i Apple we wszystkich przeglądarkach. Wykryłem, że urządzenie to urządzenie mobilne lub przeglądarka na komputerze i ustawiłem SRCodpowiednio:

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

Próbowałem użyć tego .mp4formatu do odtwarzania wideo na urządzeniach z Androidem, ale nie poszło dobrze. Po kilku próbach i błędach przekonwertowałem wideo na .webmformat i następujący kod bez dodatkowego javascript lub 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>

Działał na starszym urządzeniu z Androidem (co najmniej kilka lat od 2020 r.).


-4

HTML5 jest obsługiwany na obu telefonach Google (Android), takich jak Galaxy S i iPhone. Jednak iPhone nie obsługuje Flasha, które obsługują telefony Google.


Telefony Google porzuciły Flash w Androidzie 4.0 (ICS), a to pytanie i tak nie dotyczyło iPhone'a.
greg.kindel
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.