Elemento HTML5 <video> no Android

De acordo com:

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

O Android 2.0 deve suportar o elemento de vídeo HTML5. Não consegui fazer isso funcionar usando um Motorola Droid e não consegui visualizar um vídeo com êxito em nenhuma das páginas de exemplo de vídeo HTML5 que existem. Uma vez que atualmente não há suporte para QuickTime ou Flash, esta é a única outra coisa que posso pensar para incorporar vídeo mp4 em uma página da web. Alguém já teve sorte com isso?

Acabei de fazer algumas experiências com isso e, pelo que posso dizer, você precisa de três coisas:

1. Você não deve usar o atributo type ao chamar o vídeo.
2. Você deve chamar manualmente video.play ()
3. O vídeo deve ser codificado com alguns parâmetros bastante restritos; usar a configuração do iPhone no Handbrake com o botão 'Web Optimized' marcado geralmente resolve.

Dê uma olhada na demonstração nesta página: http://broken-links.com/tests/video/

Isso funciona, AFAIK, em todos os navegadores de desktop habilitados para vídeo, iPhone e Android.

Aqui está a marcação:

<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 eu tenho isso no JS:

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

Eu testei isso em um Samsung Galaxy S e funciona bem.

A resposta de Roman funcionou bem para mim - ou pelo menos me deu o que eu esperava. Abrir o vídeo no aplicativo nativo do telefone é exatamente igual ao que o iPhone faz.

Provavelmente, vale a pena ajustar seu ponto de vista e esperar que o vídeo seja reproduzido em tela inteira em seu próprio aplicativo, e codificar para isso. É frustrante que clicar no vídeo não seja suficiente para reproduzi-lo da mesma forma que o iPhone faz, mas visto que é necessário apenas um atributo onclick para iniciá-lo, não é o fim do mundo.

Meu conselho, FWIW, é usar uma imagem de pôster e deixar claro que o vídeo será reproduzido. Estou trabalhando em um projeto no momento que faz exatamente isso, e os clientes estão felizes com isso - e também que eles estão obtendo a versão Android de um aplicativo da web gratuitamente, é claro, porque o contrato era apenas para um aplicativo da web para iPhone.

Apenas para ilustração, uma tag de vídeo Android funcional está abaixo. Bom e simples.

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

Incluo aqui como um amigo meu resolveu o problema de exibição de vídeos em HTML no Nexus One:

Nunca fui capaz de fazer o vídeo rodar embutido. Na verdade, muitas pessoas na internet mencionam explicitamente que a reprodução de vídeo inline em HTML é suportada desde o Honeycomb, e estávamos lutando com Froyo e Gingerbread ... Também para telefones menores, acho que jogar em tela cheia é muito natural - caso contrário, não é muito visível . Então o objetivo era fazer o vídeo abrir em tela cheia. No entanto, as soluções propostas neste tópico não funcionaram para nós - clicar no elemento não acionou nada. Além disso, os controles de vídeo foram mostrados, mas nenhum pôster foi exibido, então a experiência do usuário foi ainda mais estranha. Então o que ele fez foi o seguinte:

Exponha o código nativo ao HTML para ser chamado via javascript:

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

O próprio código tinha uma função que chamava atividade nativa para reproduzir o vídeo:

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

Então, no próprio HTML, ele continuava falhando em fazer a tag de vídeo funcionar na reprodução do vídeo. Assim, finalmente ele decidiu sobrescrever o onclickevento do vídeo, fazendo com que ele fizesse a reprodução real. Isso quase funcionou para ele - exceto que nenhum pôster foi exibido. Aí vem a parte mais estranha - ele continuava recebendo ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"toda vez que configurava o posteratributo da tag. Finalmente, ele encontrou o problema, que era muito estranho - descobriu-se que ele havia mantido a sourcesubtag na videotag, mas nunca a usou. E estranho o suficiente exatamente isso estava causando o problema. Agora veja sua definição da videoseção:

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

Claro, você também precisa adicionar a definição da função javascript no cabeçalho da página:

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

Sei que esta não é uma solução puramente HTML, mas é o melhor que conseguimos fazer para o tipo de telefone Nexus One. Todos os créditos por esta solução vão para Dimitar Zlatkov Dimitrov.

Se você ligar manualmente video.play(), deve funcionar:

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

apontar meu navegador android 2.2 para html5test.com , me diz que o elemento de vídeo é compatível, mas nenhum dos codecs de vídeo listados ... parece um pouco inútil para oferecer suporte ao elemento de vídeo, mas nenhum codec? a menos que haja algo errado com essa página de teste.

no entanto, encontrei o mesmo tipo de situação com o elemento de áudio: o elemento é compatível, mas não há formatos de áudio. Veja aqui:

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

Nada funcionou para mim até que codifiquei o vídeo corretamente. Experimente este guia para obter as configurações corretas do freio de mão: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

Talvez você precise codificar o vídeo especificamente para o dispositivo, por exemplo:

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

Existem alguns exemplos de configurações de codificação que funcionaram aqui:

https://supportforums.motorola.com

Experimente h.264 em um contêiner mp4. Tive muito sucesso com ele no meu Droid X. Tenho usado zencoder.com para conversões de formato.

Isso funciona para mim:

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

Somente quando o .mp4 está no topo e o arquivo de vídeo não é muito grande.

Deve funcionar, mas observe a resolução: Android 2.0 e webkit

O Canvas funciona imediatamente, enquanto a geolocalização parece não funcionar no emulador. Claro, tenho que enviar locais fictícios para fazê-lo funcionar, então não tenho ideia de como isso seria em um telefone real. Posso dizer a mesma coisa com a tag de vídeo. Há problemas em não reproduzir o vídeo, mas acho que é o fato de o vídeo ter uma resolução mais alta do que o emulador pode suportar. Saberemos mais quando alguém tentar isso em um Motorola Droid ou outro dispositivo Android de última geração

Isso pode não responder exatamente à sua pergunta, mas estamos usando o formato de arquivo 3GP ou 3GP2. Melhor até usar o protocolo rtsp, mas o navegador Android também reconhecerá o formato de arquivo 3GP.

Você pode usar algo como

self.location = URL_OF_YOUR_3GP_FILE

para acionar o player de vídeo. O arquivo será transmitido e após o término da reprodução, o tratamento é retornado ao navegador.

Para mim, isso resolve muitos problemas com a implementação atual de tags de vídeo em dispositivos Android.

De acordo com: https://stackoverflow.com/a/24403519/365229

Isso deve funcionar, com Javascript simples:

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

Você deve acionar play () antes da instrução em tela cheia, caso contrário, no navegador Android, ele apenas irá para tela cheia, mas não começará a jogar. Testado com a versão mais recente do navegador Android, Chrome, Safari.

Eu testei no navegador Android 2.3.3 e 4.4.

Depois de muita pesquisa, em muitos dispositivos diferentes, até agora, cheguei à conclusão simples de que MP4é muito menos compatível do que o MOVformato. Portanto, estou usando o MOVformato, que é compatível com todos os dispositivos Android e Apple, em todos os navegadores. Detectei se o dispositivo é um dispositivo móvel ou um navegador de desktop e configurei o de SRCacordo:

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

Tentei usar o .mp4formato para reproduzir um vídeo em dispositivos Android, mas não deu certo. Portanto, após algumas tentativas e erros, converti o vídeo no .webmformato e no seguinte código sem javascript ou 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>

Funcionou em um dispositivo Android mais antigo (pelo menos alguns anos em 2020).

O HTML5 é compatível com os telefones Google (Android), como Galaxy S e iPhone. No entanto, o iPhone não oferece suporte a Flash, que os telefones do Google oferecem.