Elemento <video> HTML5 su Android


90

Secondo:

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

Android 2.0 dovrebbe supportare l'elemento video HTML5. Non sono stato in grado di farlo funzionare utilizzando un Motorola Droid e non sono stato in grado di visualizzare correttamente un video su nessuna delle pagine di esempio video HTML5 disponibili. Dato che attualmente non c'è supporto per QuickTime o Flash, questa è l'unica altra cosa a cui riesco a pensare per incorporare video mp4 in una pagina web. Qualcuno ha avuto fortuna con questo?


2
Ho anche un droide e non sono riuscito a riprodurre video html5. Anche il sito "video per tutti" non funziona.
haxney

"video per tutti" reindirizzato a qualche stupida prima pagina per me - non potevo nemmeno tentare di visualizzare se non l'unica demo su quella pagina!
jmans

Posiziona i video nel file system interno / esterno e accedi ad esso. Esempio: - <video controls = 'controls'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </video>
Ravikiran

Risposte:


78

Ho appena fatto alcuni esperimenti con questo e da quello che posso dire hai bisogno di tre cose:

  1. Non devi utilizzare l' attributo type quando chiami il video.
  2. Devi chiamare manualmente video.play ()
  3. Il video deve essere codificato secondo alcuni parametri piuttosto rigidi; utilizzare l'impostazione iPhone su freno a mano con il pulsante "Ottimizzato per il Web" selezionato di solito fa il trucco.

Dai un'occhiata alla demo in questa pagina: http://broken-links.com/tests/video/

Questo funziona, AFAIK, in tutti i browser desktop abilitati ai video, iPhone e Android.

Ecco il markup:

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

E ho questo nella JS:

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

L'ho provato su un Samsung Galaxy S e funziona bene.


1
La demo sembra non funzionare sul mio Nexus One (non succede nulla quando tocco "Riproduci")
itsadok

1
A proposito, il collegamento che hai fornito non funziona su un Nexus One 2.3.3, messaggio: questo video non può essere riprodotto
Panthro

@RafaelRoman ho incluso e la risposta, che, si spera il lavoro in Nexus One (almeno lo ha fatto per me): stackoverflow.com/a/8952025/1108032
Boris Strandjev

Non riesco a farlo funzionare sul mio tablet 4.0.4. Penso che il nativo sia la strada da percorrere
Harry

1
Non funziona su Android 5.x, il video è nero finché non si fa clic su Play
FiringSquadWitness

9

La risposta di Roman ha funzionato bene per me - o almeno, mi ha dato quello che mi aspettavo. L'apertura del video nell'applicazione nativa del telefono è esattamente la stessa di ciò che fa l'iPhone.

Probabilmente vale la pena modificare il tuo punto di vista e aspettarti che il video venga riprodotto a schermo intero nella sua applicazione e codificare per questo. È frustrante che fare clic sul video non sia sufficiente per riprodurlo allo stesso modo dell'iPhone, ma visto che richiede solo un attributo onclick per avviarlo, non è la fine del mondo.

Il mio consiglio, FWIW, è di utilizzare un'immagine poster e rendere ovvio che riprodurrà il video. Al momento sto lavorando a un progetto che fa esattamente questo, ei clienti ne sono contenti - e anche che stanno ottenendo gratuitamente la versione Android di un'app Web, ovviamente, perché il contratto era solo per un App web per iPhone.

Solo a scopo illustrativo, di seguito è riportato un tag video Android funzionante. Bello e semplice.

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

ci sono strani problemi con questo sui browser desktop - in Chrome e Firefox, se usi l' controlsattributo, l'evento onclick viene bypassato quando premi Pausa (quindi il video viene effettivamente messo in pausa), ma in qualche modo quando fai clic su Riproduci non succede nulla-- è necessario fare clic nel video (non sul pulsante di riproduzione effettivo) per riprendere il video.
Kip

Funziona. Posso riprodurre video h264 su Android. I file hanno il suffisso mp4.
neoneye

8

Qui includo come un mio amico ha risolto il problema della visualizzazione dei video in HTML in Nexus One:

Non sono mai riuscito a riprodurre il video in linea. In realtà molte persone su Internet menzionano esplicitamente che la riproduzione di video in linea in HTML è supportata da Honeycomb, e stavamo litigando con Froyo e Gingerbread ... Anche per i telefoni più piccoli penso che giocare a schermo intero sia molto naturale, altrimenti non è molto visibile . Quindi l'obiettivo era quello di rendere il video aperto a schermo intero. Tuttavia, le soluzioni proposte in questo thread non hanno funzionato per noi: il clic sull'elemento non ha attivato nulla. Inoltre sono stati mostrati i controlli video, ma non è stato visualizzato alcun poster, quindi l'esperienza dell'utente è stata ancora più strana. Quindi quello che ha fatto è stato il seguente:

Esponi il codice nativo all'HTML per essere richiamabile tramite javascript:

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

Il codice stesso aveva una funzione che chiamava attività nativa per riprodurre il video:

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

Quindi nello stesso HTML ha continuato a fallire nel far funzionare il tag video riproducendo il video. Così, alla fine, ha deciso di sovrascrivere l' onclickevento del video, facendogli fare la riproduzione vera e propria. Questo ha quasi funzionato per lui - tranne per il fatto che nessun poster è stato visualizzato. Ecco la parte più strana: continuava a ricevere ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"ogni volta che impostava l' posterattributo del tag. Alla fine ha trovato il problema, il che era molto strano: si è scoperto che aveva mantenuto il sourcesottotag nel videotag, ma non lo ha mai usato. E abbastanza strano proprio questo stava causando il problema. Ora guarda la sua definizione della videosezione:

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

Ovviamente è necessario aggiungere anche la definizione della funzione javascript in testa alla pagina:

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

Mi rendo conto che questa non è una soluzione puramente HTML, ma è il meglio che siamo riusciti a fare per il tipo di telefono Nexus One. Tutti i crediti per questa soluzione vanno a Dimitar Zlatkov Dimitrov.


Ho dovuto aggiungere la funzione javascript playVideo (videoName) con riferimento a JSInterface per farlo funzionare - potrebbe non essere evidente alle persone che non hanno usato questa tecnica prima. Inoltre ho preferito costruire il percorso completo con getExternalDirectory () nella funzione startVideo con solo il nome del file passato da Javascript. Ha funzionato per me, tranne per il fatto che l'immagine del poster scompare quando l'attività video si chiude e WebView torna a fuoco (il mio WebView è incorporato in un ViewPager). Grazie.
alan-p

Grazie per i commenti. Ho aggiunto lo script di chiamata javascript, annuncio anche completamente d'accordo con il commento sulla costruzione del percorso video, tuttavia presumo che questo sia qualcosa che tutti possono risolvere per le proprie esigenze,
Boris Strandjev

Ho avuto anche l'errore "Valore nullo o vuoto per l'host dell'intestazione". Era il tag sorgente inutilizzato. Questo tag sorgente viene effettivamente utilizzato dall'app ios (app phonegap), quindi ora sto inserendo il tag sorgente solo su ios e funziona bene. grazie per l'aiuto con questo strano problema.
Guillaume Gendre

5

Se lo chiami manualmente video.play()dovrebbe funzionare:

<!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
Questo mi porta a un'icona del film su cui posso fare clic per visualizzare l'MP4 nell'app video, ma ancora non mi dà il video in linea.
jmans

Il video in linea è supportato a partire da Android 3.1.
Roman Nurik

Qualcuno può confermare che funziona su un dispositivo a nido d'ape +? Non sono riuscito a farlo funzionare su 3.2. Riesco a sentire il suono e non vedo alcun video.
dongshengcn

4

puntando il mio browser Android 2.2 su html5test.com , mi dice che l'elemento video è supportato, ma nessuno dei codec video elencati ... sembra un po 'inutile supportare l'elemento video ma nessun codec ??? a meno che non ci sia qualcosa di sbagliato in quella pagina di test.

tuttavia, ho riscontrato lo stesso tipo di situazione con l'elemento audio: l'elemento è supportato, ma nessun formato audio. Vedere qui:

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


lo stesso per me con html5test.com su SGS 2.1update1. Hai già trovato un modo per incorporare il video? Quando apro il sito di test broken-links.com/tests/video e faccio clic sull'icona di riproduzione, il video viene riprodotto ma non incorporato (come su desktop / Firefox) ma si apre nel lettore multimediale.
Mathias Conradt,

Lo stesso qui sul mio LG Optimus Black ... ma la demo sui collegamenti interrotti funziona. Proverò a codificare con il freno a mano.
Molo

4

Niente ha funzionato per me finché non ho codificato correttamente il video. Prova questa guida per le impostazioni corrette del freno a mano: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694


Risolto il problema anche per me. Ma mpeg4 non ha funzionato per altri browser, quindi ho creato 2 livelli video. Prima mpeg4 e poi h264: <video width = "480" height = "386" loop autoplay con audio disattivato playsinline> <source src = "assets / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 per Android - -> <source src = "assets / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 per tutto il resto -> <img alt = "" src = "assets / chat_letter.png"> <! - immagine come riserva per IE8 -> </video>
yodalr

1

Forse devi codificare il video specificamente per il dispositivo, ad esempio:

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

Ci sono alcuni esempi di configurazioni di codifica che hanno funzionato qui:

https://supportforums.motorola.com


1

Prova h.264 in un contenitore mp4. Ho avuto molto successo con esso sul mio Droid X. Ho utilizzato zencoder.com per le conversioni di formato.


1

Questo funziona per me:

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

Solo quando il file .mp4 è in cima e il file video non è troppo grande.


0

Dovrebbe funzionare, ma guarda la risoluzione: Android 2.0 e webkit

Canvas funziona immediatamente, mentre la geolocalizzazione sembra non funzionare affatto nell'emulatore. Ovviamente devo inviarlo in posizioni fittizie per farlo funzionare, quindi non ho idea di come sarebbe su un telefono reale. Posso dire la stessa cosa con il tag video. Ci sono problemi con il fatto che non riproduce effettivamente il video, MA penso che sia il fatto che il video ha una risoluzione più alta di quella che l'emulatore può gestire. Ne sapremo di più quando qualcuno lo proverà su un Motorola Droid o un altro dispositivo Android di nuova generazione


Proverò a scherzare con la risoluzione, ma sto usando un dispositivo reale e il flusso video (una webcam) è piuttosto basso.
jmans

0

Questo potrebbe non rispondere esattamente alla tua domanda, ma stiamo utilizzando il formato di file 3GP o 3GP2. Meglio anche usare il protocollo rtsp, ma il browser Android riconoscerà anche il formato file 3GP.

Puoi usare qualcosa di simile

self.location = URL_OF_YOUR_3GP_FILE

per attivare il lettore video. Il file verrà riprodotto in streaming e al termine della riproduzione, la gestione viene restituita al browser.

Per me questo risolve molti problemi con l'attuale implementazione dei tag video sui dispositivi Android.


Ciao, ho provato questo utilizzando Android WebView, ma non funziona, ci sono altre impostazioni che devo fare? Sto usando il codice in questo link .
Kris

No, non conosco nessun altro modo per ottenere questo risultato.
leviatano

0

Secondo: https://stackoverflow.com/a/24403519/365229

Questo dovrebbe funzionare, con un semplice 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();
}

Devi attivare play () prima dell'istruzione a schermo intero, altrimenti nel browser Android andrà a schermo intero ma non inizierà la riproduzione. Testato con l'ultima versione del browser Android, Chrome, Safari.

L'ho testato su browser Android 2.3.3 e 4.4.


0

Dopo molte ricerche, su molti dispositivi diversi, fino ad ora, sono giunto alla semplice conclusione che MP4è molto meno supportato del MOVformato. Quindi, sto usando il MOVformato, che è supportato da tutti i dispositivi Android e Apple, su tutti i browser. Ho rilevato che il dispositivo è un dispositivo mobile o un browser desktop e ho impostato di SRCconseguenza:

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

Ho provato a utilizzare il .mp4formato per riprodurre un video su dispositivi Android ma non è andato bene. Quindi, dopo alcuni tentativi ed errori, ho convertito il video nel .webmformato e nel seguente codice senza javascript o JQuery extra:

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

Funzionava su un dispositivo Android più vecchio (almeno alcuni anni a partire dal 2020).


-4

HTML5 è supportato su entrambi i telefoni Google (Android) come Galaxy S e iPhone. iPhone tuttavia non supporta Flash, che i telefoni Google supportano.


I telefoni Google hanno rilasciato Flash in Android 4.0 (ICS) e comunque questa domanda non riguardava l'iPhone.
greg.kindel
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.