wake-up-neo.net

Wie kann man HTML5-MP4-Videos auf Android automatisch abspielen?

Ich hatte eine mobile Seite von asp.net entwickelt, um mp4-Videos abzuspielen.

Ich weiß, dass iOS die Autoplay-Funktion deaktiviert hat, um die Bandbreite des Benutzers zu minimieren. 

Ich hatte Autoplay bereits in HTML5-Code eingefügt, aber es funktioniert nicht.

Folgendes ist mein 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>

Außerdem hatte ich das Problem behoben, dass der Benutzer auf das Bild-Overlay klicken kann, um das Video abzuspielen. Danke Karthi

hier ist der 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>

Vielen Dank

Joe

androidhtml5html5-video
20
Joe Yan

Ich denke nicht, dass Autoplay auf Android funktioniert, aber das Abspielen eines Videos kann ärgerlich sein. Ich schlage vor, diesen Artikel vorzulesen: HTML5-Video auf Android-Handys funktionieren lassen .

5
Ian Devlin

Sie können die Attribute 'stummgeschaltet' und 'autoplay' zusammen hinzufügen, um die automatische Wiedergabe für Android-Geräte zu aktivieren. 

z.B. 

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

27
AngryFridges

Ich habe folgenden Code verwendet:

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

Es scheint keinen Weg mehr zum automatischen Start zu geben.

Dadurch wird das Video beim ersten Berühren des Bildschirms wiedergegeben. Es wird sich auch beim ersten Durchlauf selbst entfernen, so dass Sie vermeiden, dass sich mehrere Listener addieren.

22
james2doyle

Android hat dafür eigentlich eine API! Die Methode lautet setMediaPlaybackRequiresUserGesture () . Ich habe es gefunden, nachdem ich mich viel mit Video-Autoplay beschäftigt hatte und viele Hacks von SO versucht hatte. Hier ist ein Beispiel aus 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

Wichtiger Hinweis: Beachten Sie, dass die automatische Wiedergabe deaktiviert ist, wenn Google Chrome Data Saver in den Einstellungen von Chrome aktiviert ist.

4
Brendan

In Android 4.4 und höher können Sie die Notwendigkeit einer Benutzergeste entfernen, solange sich die HTML5-Videokomponente in Ihrem eigenen WebView befindet

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

Damit das Video automatisch abgespielt werden kann, müssen Sie dem Videoelement dennoch das automatische Abspielen hinzufügen.

<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

Autoplay funktioniert nur beim zweiten Mal. Unter Android 4.1 muss ein Benutzerereignis vorhanden sein, damit das erste play () funktioniert. Sobald dies geschehen ist, funktioniert der Autostart.

Dies ist so, dass der Benutzer bestätigt, dass er Bandbreite verwendet.

Es gibt noch eine andere Frage, die diese Frage beantwortet . Autostart html5-Video mit dem Android 4-Browser .

2
Leo

Ähnlich wie die Antwort von KNaito tut das Folgende für mich den Trick

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

Ich habe das Javascript vereinfacht, um das Video zu starten.

 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" ist nur ein Beispiel-URL

0
Walt Peter

Kann muted-Tag hinzufügen.

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

referenz 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

In Android 4.1 und 4.2 verwende ich den folgenden Code.

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

wo HTML ist

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

Das funktioniert gut. Aber in Android 4.4 funktioniert es nicht.

0
KNaito

Hier ist ein Plugin für PhoneGap, das das Problem für mich gelöst hat: https://build.phonegap.com/plugins/1031

Ich habe es einfach in meine config.xml eingefügt

0
ethanpil