Comment la lecture automatique HTML5 vidéo mp4 sur Android?

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

Je sais iOS avait désactivé la fonction de jeu automatique pour réduire la bande passante utilisateur, alors comment puis-je
autoplay HTML5 vidéo mp4 sur Android ?

J'avais déjà mis en autoplay dans le code HTML5, mais il ne fonctionne 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>

D'ailleurs, j'ai résolu le problème que l'utilisateur cliquez sur l'image de superposition peut jouer la vidéo.
Grâce 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>

Grâce

Joe

Si vous voulez jouer la vidéo en cliquant sur l'affiche, puis créer une superposition d'image , tandis que le onclick sur l'image de superposition de lire la vidéo
Grâce Karthi, j'avais créé une superposition d'image. elle fonctionne.
Depuis Android 4.2+ le lecture automatique de html5, l'attribut de la vidéo n'est pas pris en charge. La vidéo va seulement commencer à jouer après que l'utilisateur clique sur elle. Pour gérer cela, vous pouvez utiliser Modernizr "videoautoplay" fonction (modernizr.com/download?videoautoplay-setclasses) qui ajoute la classe "videoautoplay" ou "non-videoautoplay" sur la balise html.
Soins pour accepter AngryFridges réponse de? C'est au moins une solution partielle.

InformationsquelleAutor Joe Yan | 2012-01-31

5

Je ne pense pas que la lecture automatique fonctionne sur Android, mais l'acquisition d'une vidéo à jouer peut être fâcheusement délicat. - Je vous suggérer de donner cette article a lire: Faire de la Vidéo HTML5 de travail sur les téléphones Android.
- Aujourd'hui, l'ajout de muted pour la vidéo muette, comme décrit dans la AngryFridges réponse de fournit au moins une solution partielle.
InformationsquelleAutor Ian Devlin
28

Vous pouvez ajouter le "coupé" et "autoplay" attributs pour activer la lecture automatique pour les appareils android.

par exemple

HTML:
```
<video id="video" class="video" autoplay muted >
```
- Merci. ! C'est la bonne réponse à partir de maintenant. l'ajout de "en sourdine" fonctionne comme un charme. pas d'autres options sont disponibles dès maintenant en tant que navigateur requiert que l'utilisateur d'un geste sur le jeu vidéo autrement, ne peuvent pas.
- Pour une vidéo sans le son c'est la solution parfaite, merci!
- pour le chrome 51, android 7 cela ne fonctionne pas
- Cette solution ne fonctionne pas pour Chrome > 50
- Vérifier developers.google.com/web/updates/2016/07/autoplay, semble cesser de fonctionner
InformationsquelleAutor AngryFridges
22

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 pas être un moyen d'auto-démarre plus.

Ce qu'il fait en sorte que la première fois qu'ils touchent l'écran de lecture de la vidéo. Il va également supprimer lui-même lors de la première exécution, de sorte que vous pouvez éviter de multiples auditeurs addition.
- Wow, votre réponse est très intéressante. Bien travaillé ici. Je vous remercie.
- Merci James, il a travaillé comme un charme.
- Merci pour ce très intelligent et solution minimale.
- Sur google chrome sur android, cela semble également avoir été bloqué, malheureusement.
InformationsquelleAutor james2doyle

Android a en fait une API pour cela! La méthode est setMediaPlaybackRequiresUserGesture(). Je l'ai trouvé après beaucoup de creuser dans la vidéo en autoplay et beaucoup de tentatives de hacks de la SORTE. 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);
    }
}

C'est une bonne réponse, mais ce n'est pas le Javascript.

InformationsquelleAutor brendan

4

Remarque importante: sachez que si Google Chrome Données de Veille est activé dans les paramètres de google Chrome, puis la lecture automatique sera désactivée.

InformationsquelleAutor Brendan
3

De lecture automatique ne fonctionne que la deuxième fois.
sur android 4.1+, vous devez avoir un certain type d'événement utilisateur pour obtenir la première lecture() pour travailler. Une fois que cela s'est passé ensuite autostart œuvres.

C'est ainsi que l'utilisateur est en reconnaissant qu'ils sont à l'aide de la bande passante.

Il y a une autre question que répond cette .
Autostart vidéo html5 en utilisant android 4 navigateur
- c'est de la connerie, mais merci pour la confirmation de cette question pour moi.
InformationsquelleAutor Leo
3

Dans Android 4.4 et ci-dessus, vous pouvez supprimer la nécessité d'une action de l'utilisateur tant que le HTML5 Vidéo composante vie dans votre propre WebView
```
webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
```
Pour obtenir la vidéo en lecture automatique, vous auriez encore besoin d'ajouter de lecture automatique de l'élément vidéo:
```
<video id='video' controls autoplay>
  <source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
</video>
```
- D'où vient la webview venir dans ce cas? Sens, si ce n'est pas JS, alors s'il vous plaît l'indiquer.
InformationsquelleAutor Darren Hicks

similaire à KNaito réponse, la suite fait le truc pour moi

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

InformationsquelleAutor Martin

0

Sur 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ù le html est
```
    <video id="video" src="sample.mp4" poster="image.jpg" controls></video>
```
Cela fonctionne bien. Mais Dans Android 4.4, il ne fonctionne pas.
- Dans la section 4.4, vous pouvez utiliser: webview.getSettings().setMediaPlaybackRequiresUserGesture(false); en code natif.
- qu'est-ce que "evt"? est-ce une des quelques réponses cibler PhoneGap et les amis, sans reconnaître que c'?
InformationsquelleAutor KNaito
0

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

J'ai simplement incluse dans mon config.xml

InformationsquelleAutor ethanpil
0
```
<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>
```
- J'ai essayé plusieurs attributs que vous avez ajouté ci-dessus, mais aucun de rendre la vidéo en lecture automatique sur mon Samsung votre tablette ou téléphone Android. (muted fait le truc pour moi, comme décrit dans une autre réponse.)
InformationsquelleAutor Nahid Sheikh

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

JS:

 var bg = document.getElementById ("bg"); 
 function playbg() {
   bg.play(); 
 }

HTML:

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

*"Fichiers/neige.mp4" est juste l'exemple d'url

InformationsquelleAutor Walt Peter

Pouvez ajouter muted tag.

<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

InformationsquelleAutor Rajilesh Panoli

-1

Chrome l'a désactivé. https://bugs.chromium.org/p/chromium/issues/detail?id=159336
Même le jQuery play() est bloqué. Ils veulent de l'utilisateur pour lancer en sorte de la bande passante peut être sauvé.
- jQuery n'ont jamais eu un play méthode. Tout play méthode que vous appelez n'est pas fourni par jQuery.
InformationsquelleAutor Ali Sadiq

Vous devez vous connecter pour publier un commentaire.