Element <video> HTML5 na Androida

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?

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.

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();"/>

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.

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>

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/

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

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

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.

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.

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

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.

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.

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

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

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.