web-dev-qa-db-fra.com

Comment lire automatiquement les vidéos HTML5 mp4 sur Android?

J'avais développé une page mobile par asp.net pour lire des vidéos au format MP4.

Je sais que iOS avait désactivé la fonction de lecture automatique afin de réduire la bande passante de l'utilisateur. Comment puis-je lire la vidéo au format HTML5 mp4 sur Android? 

J'avais déjà mis la lecture automatique en code HTML5, mais cela ne fonctionnait pas.

Voici mon code:

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

De plus, j'avais résolu le problème suivant: l'utilisateur clique sur la superposition d'images pour pouvoir lire la vidéo ..__ Merci Karthi

voici le code:

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

Merci

Joe

androidhtml5html5-video
20
Joe Yan

Je ne pense pas que la lecture automatique fonctionne sur Android, mais il peut être très difficile de lire une vidéo. Je suggère de lire cet article: Pour que la vidéo HTML5 fonctionne sur les téléphones Android .

5
Ian Devlin

Vous pouvez ajouter les attributs "muet" et "lecture automatique" pour activer la lecture automatique sur les appareils Android. 

par exemple. 

<video id="video" class="video" autoplay muted >

27
AngryFridges

J'ai utilisé le code suivant:

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

Il ne semble plus y avoir de moyen de démarrer automatiquement.

Cela fait en sorte que la vidéo sera lue lors du premier contact avec l'écran. Il se supprimera également lors de la première exécution, afin d'éviter que plusieurs écouteurs ne s'additionnent.

22
james2doyle

Android a en fait une API pour cela! La méthode est setMediaPlaybackRequiresUserGesture () . Je l'ai trouvé après beaucoup de fouilles dans la lecture automatique de vidéos et de nombreuses tentatives de piratage informatique de la part de SO. Voici un exemple 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);
    }
}
7
brendan

Remarque importante: Sachez que si Google Chrome Data Saver est activé dans les paramètres de Chrome, la lecture automatique est désactivée.

4
Brendan

Dans Android 4.4 et les versions ultérieures, vous pouvez supprimer la nécessité d'un geste de l'utilisateur tant que le composant Vidéo HTML5 réside dans votre propre WebView

webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);

Pour que la vidéo soit lue automatiquement, vous devez toujours ajouter la lecture automatique à l'élément 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>
3
Darren Hicks

La lecture automatique ne fonctionne que la deuxième fois. sur Android 4.1+, vous devez avoir une sorte d’événement utilisateur pour que le premier play () fonctionne. Une fois que cela est arrivé, le démarrage automatique fonctionne.

Cela permet à l'utilisateur de reconnaître qu'il utilise de la bande passante.

Il y a une autre question qui répond à cette . Démarrage automatique de la vidéo html5 à l'aide du navigateur Android 4

2
Leo

semblable à la réponse de KNaito, ce qui suit me convient

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");
  }
}
1
Martin

J'ai simplifié le Javascript pour déclencher la vidéo.

 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" est juste un exemple d'URL

0
Walt Peter

Peut ajouter une balise muted.

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

référence https://developers.google.com/web/updates/2016/07/autoplay

0
Rajilesh Panoli
<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>
0
Nahid Sheikh

Dans Android 4.1 et 4.2, j'utilise le code suivant.

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

où html est

    <video id="video" src="sample.mp4" poster="image.jpg" controls></video>

Ça marche bien. Mais dans Android 4.4, cela ne fonctionne pas.

0
KNaito

Voici un plugin pour PhoneGap qui a résolu le problème pour moi: https://build.phonegap.com/plugins/1031

Je l'ai simplement inclus dans mon config.xml

0
ethanpil