android - videos - reproducir vídeos html5 en dispositivos móviles
¿Cómo reproducir automáticamente el video HTML5 mp4 en Android? (14)
Android en realidad tiene una API para esto! El método es setMediaPlaybackRequiresUserGesture() . Lo encontré después de una gran cantidad de excavaciones en la reproducción automática de videos y muchos intentos de pirateo de SO. Aquí hay un ejemplo de Blair Vanderhoof :
package com.example.myProject;
import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebSettings;
public class myProject extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html");
WebSettings ws = super.appView.getSettings();
ws.setMediaPlaybackRequiresUserGesture(false);
}
}
Había desarrollado una página móvil por asp.net para reproducir video mp4.
Sé que iOS ha desactivado la función de reproducción automática para minimizar el ancho de banda del usuario, así que ¿cómo puedo reproducir automáticamente el video HTML5 mp4 en Android?
Ya había puesto la reproducción automática en código HTML5, pero no funciona.
El siguiente es mi código:
<video autoplay controls id=''video1'' width=''100%'' poster=''images/top_icon.png'' webkitEnterFullscreen poster preload=''true''>
<source src=''http://192.xxx.xxx.xx/XXXXVM01.mp4'' type=''video/mp4; codecs=''avc1.42E01E, mp4a.40.2'' >
</video>
Además, solucioné el problema de que el usuario que hacía clic en la superposición de imágenes puede reproducir el video. Gracias karthi
Aquí está el código:
<script type="text/javascript">
$(document).ready(function() {
$("#video1").bind("click", function() {
var vid = $(this).get(0);
if (vid.paused) { vid.play(); }
else { vid.pause(); }
});
});
</script>
Gracias
Joe
Aquí hay un complemento para PhoneGap que solucionó el problema por mí: https://build.phonegap.com/plugins/1031
Simplemente lo incluí en mi config.xml
Chrome lo ha desactivado. https://bugs.chromium.org/p/chromium/issues/detail?id=159336 Incluso la reproducción jQuery () está bloqueada. Quieren que el usuario lo inicie para que se pueda guardar el ancho de banda.
En Android 4.1 y 4.2, uso el siguiente código.
evt.initMouseEvent( "click", true,true,window,0,0,0,0,0,false,false,false,false,0, true );
var v = document.getElementById("video");
v.dispatchEvent(evt);
donde html es
<video id="video" src="sample.mp4" poster="image.jpg" controls></video>
Esto funciona bien Pero en Android 4.4, no funciona.
En Android 4.4 y versiones posteriores, puede eliminar la necesidad de un gesto de usuario siempre que el componente de video HTML5 se encuentre en su propio WebView.
webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
Para que el video se reproduzca automáticamente, aún necesitarás agregar reproducción automática al elemento de video:
<video id=''video'' controls autoplay>
<source src=''http://192.xxx.xxx.xx/XXXXVM01.mp4'' type=''video/mp4; codecs="avc1.42E01E, mp4a.40.2"'' >
</video>
La reproducción automática solo funciona la segunda vez. en android 4.1+ tienes que tener algún tipo de evento de usuario para que funcione el primer play (). Una vez que ha sucedido, entonces el inicio automático funciona.
Esto es para que el usuario esté reconociendo que está usando ancho de banda.
Hay otra pregunta que responde a esto. Autostart html5 video usando el navegador de Android 4
No creo que la reproducción automática funcione en Android, pero hacer que un video se reproduzca puede ser molesto. Sugiero leer este artículo: Hacer que el video HTML5 funcione en teléfonos con Android .
Nota importante: tenga en cuenta que si Google Chrome Data Saver está habilitado en la configuración de Chrome, entonces la reproducción automática se desactivará.
Puede agregar etiqueta muted .
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
referencia developers.google.com/web/updates/2016/07/autoplay
Puede agregar los atributos ''silenciado'' y ''reproducción automática'' juntos para habilitar la reproducción automática para dispositivos Android.
p.ej
<video id="video" class="video" autoplay muted >
Similar a la respuesta de KNaito, el siguiente es el truco para mí
function simulateClick() {
var event = new MouseEvent(''click'', {
''view'': window,
''bubbles'': true,
''cancelable'': true
});
var cb = document.getElementById(''player'');
var canceled = !cb.dispatchEvent(event);
if (canceled) {
// A handler called preventDefault.
alert("canceled");
} else {
// None of the handlers called preventDefault.
alert("not canceled");
}
}
Simplifiqué el Javascript para activar el video para comenzar.
var bg = document.getElementById ("bg");
function playbg() {
bg.play();
}
<video id="bg" style="min-width:100%; min-height:100%;" playsinline autoplay loop muted onload="playbg(); "><source src="Files/snow.mp4" type="video/mp4"></video>
</td></tr>
</table>
* "Files / snow.mp4" es solo url de muestra
Use el siguiente código:
// get the video
var video = document.querySelector(''video'');
// use the whole window and a *named function*
window.addEventListener(''touchstart'', function videoStart() {
video.play();
console.log(''first touch'');
// remove from the window and call the function we are removing
this.removeEventListener(''touchstart'', videoStart);
});
Parece que ya no hay una manera de iniciarse automáticamente.
Esto hace que la primera vez que toquen la pantalla se reproduzca el video. También se eliminará a sí mismo en la primera ejecución para que pueda evitar que se acumulen varios oyentes.
<video autoplay controls id=''video1'' width=''100%'' poster=''images/top_icon.png'' webkitEnterFullscreen poster preload=''true''>
<source src=''http://192.xxx.xxx.xx/XXXXVM01.mp4'' type=''video/mp4; codecs=''avc1.42E01E, mp4a.40.2'' >
</video>