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?
Respostas:
Acabei de fazer algumas experiências com isso e, pelo que posso dizer, você precisa de três coisas:
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();"/>controlsatributo, o evento onclick é ignorado quando você pressiona pause (então o vídeo realmente é pausado), mas de alguma forma quando você clica em reproduzir nada acontece - você tem que clicar no vídeo (não no botão de reprodução real) para que o vídeo seja retomado.
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:
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_FILEpara 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.