webentwicklung-frage-antwort-db.com.de

Android HTML5-Video - funktioniert beim Klicken auf Wiedergabe, aber nicht video.play ()

Ich verstehe, dass HTML5-Videos auf Android nicht automatisch abgespielt werden können. Wie es aussieht, funktioniert mein Video auf dem Gerät nur, wenn der Benutzer auf die Wiedergabetaste klickt.

<video width="640px" height="360px" src="media/video/Moments_of_Everyday_Life.mp4" controls id="video"></video>


<script type="text/javascript">
    $(function(){
        var video  = document.getElementById('video');
        video.play();
    });
</script>

Es funktioniert jedoch auf meinem Desktop.

Warum sollte das nicht funktionieren? Und was ist der Unterschied zwischen dem Klicken auf Play und der Verwendung von .play()?

androidhtml5html5-video
11
Harry

Nach stundenlangem Suchen und Testen von "Lösungen" hat dies für mich funktioniert! Gelöst von Angry Fridges (vielen Dank dafür).

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

bemerkte beide autoplay und stummgeschaltet , sie werden beide benötigt.

Dadurch konnte das Video sowohl auf dem Computer als auch auf dem Android-Handy abgespielt werden.

2
JenniferG

Ich habe es geschafft zu arbeiten! Jetzt kann HTML5-Video inline mit "Autoplay" abgespielt werden! Verdammt, das hat Zeit gekostet! Ok das habe ich getan:

<div id=content>
    <video width="1280px" height="720px" src="file:///Android_asset/videos/Moments_of_Everyday_Life.mp4"></video>
</div>

Hinweis: Einige Leute sagen, dass sie es zum Funktionieren bringen, wenn sie Poster hinzufügen und/oder vorladen. Ich habe das mit und mit raus gebracht.

Javascript spielt das Video automatisch ab:

<script type="text/javascript">
    $(function(){
        function callback () {
            document.querySelector('video').src = document.querySelector('video').src
            document.querySelector('video').play();
        }
        window.addEventListener("load", callback, false);

    });
</script>

Ich hoffe, das kann irgendjemandem helfen, ich habe jetzt seit einer Woche damit zu kämpfen!

Nur um es klar auszudrücken:

arbeiten an:

Android 4.0.4 Samsung 10.1 Tablet Browser für native Geräte

1
Harry

Ich habe bei KitKat festgestellt, dass Sie mit Firefox Videos programmgesteuert abspielen können.

Chrome funktioniert auch, wenn Sie chrome: // flags aufrufen und die Option "Gestenanforderung für Medienwiedergabe deaktivieren" aktivieren.

1
lane

Ich habe die folgenden Entdeckungen über HTML5-Videos unter Android 4.0 und höher gemacht.

Um diese Tests durchzuführen, habe ich eine Sandbox-App erstellt, die aus einer in/assets gespeicherten HTML-Seite bestand.

HTML: 

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 Video Test</title>
    </head>

    <body>

        <video preload="metadata"><source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"></video>

        <script> 
          var myvideo = document.getElementsByTagName('video')[0];

          myvideo.addEventListener('loadeddata', function() {
            console.log("** RECEIVED loadeddata **");
            myvideo.play();//this first play is needed for Android 4.1+
          }, false);

          myvideo.addEventListener('canplaythrough', function() {
            console.log("** RECEIVED canplaythrough **");
            myvideo.play();//this second play is needed for Android 4.0 only
          }, false);

        </script>

    </body>
</html>

Java: ("/assets/html5video.html") 

private WebView mWebView;
private ProgressBar mProgressBar;

@SuppressLint("NewApi")
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.videotest);

    // progress bar
    mProgressBar = (ProgressBar) findViewById(R.id.videotest_progressbar);
    mProgressBar.setProgress(0);
    mProgressBar.setVisibility(View.VISIBLE);

    // webview
    mWebView = (WebView) findViewById(R.id.videotest_webview);
    mWebView.getSettings().setJavaScriptEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
    {
        //NOTE: this is required only for Android 4.2.2+
        mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

    mWebView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress) {
            Log.i(TAG, "Progress = "+progress);
            mProgressBar.setProgress(progress);
        }
    });
    mWebView.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            Toast.makeText(TestActivity.this, "Problem loading webpage", Toast.LENGTH_LONG).show();
            mProgressBar.setVisibility(View.GONE);
        }
        public void onPageFinished(WebView view, String url) {
            mProgressBar.setVisibility(View.GONE);
        }
    });
}

@Override
protected void onResume() {
    super.onResume();
    mWebView.loadUrl("file:///Android_asset/html5video.html");
}

Android 4.0.3 HINWEIS

Ich bin immer wieder auf die nervige Ausnahme Java.lang.Throwable: EventHub.removeMessages(int what = 107) is not supported before the WebViewCore is set up. gestoßen. Zum Glück hatte dies keine Auswirkungen auf die Videowiedergabe.

1
Someone Somewhere

Es würde nicht aus dem gleichen Grund funktionieren, aus dem Browser Aufrufe an window.open() blockieren, da Webentwickler durch das Zulassen der Funktion die Benutzerpräferenz untergraben könnten, Medien nicht automatisch abzuspielen (oder Popup-Fenster zu öffnen).

Der Unterschied zwischen der Klickwiedergabe und der Verwendung dieser Methode ist genau das, was Sie gesagt haben: der Klick. Diese Art von Aufrufen ist in Klickereignissen zulässig, jedoch nicht generell.

1
robertc

Ich habe hier einige Ratschläge befolgt, vor allem von @JenniferG, aber ich musste noch zwicken, um eine schöne Erfahrung zu machen ... Hier sind die wichtigsten Punkte

  • lade die audio Tags, wie von @JenniferG erwähnt
  • verwenden Sie die entsprechende Methode, um Zugriff auf DOM-Elemente zu erhalten. Verwenden Sie für React refs
  • aktivieren Sie die Stummschaltung und stellen Sie die Lautstärke vor dem Abspielen ein
  • play() Methode gibt ein Versprechen zurück ( zumindest in Chrome ); Verwenden Sie catch, um Fehler angemessen zu behandeln
  • achten Sie darauf, play() nicht aufzurufen, während der Ton abgespielt wird. In diesem Fall schlägt dies fehl
  • benutzer muss mit der Seite interagieren, bevor die Wiedergabe ordnungsgemäß funktioniert (siehe Hinweis unten)

Hinweis: Wenn der Benutzer nicht auf eine Schaltfläche klickt, wird eine solche Fehlermeldung angezeigt

play () ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagiert hat.

Zusammengefasst ist hier eine Beispielkomponente React), die als angemessener Ausgangspunkt dienen sollte (sie ist erfunden, sollte aber die Möglichkeiten veranschaulichen).

class AudioPlayer extends React.Component
{
    constructor(props) {
        super(props);
        this.audioRef = React.createRef();
        this.state = {
            interacted: false,
            firstSoundPlayed: false,
            secondSoundPlayed: false,
        };
    }

    playAudio = () => {
        const node = this.audioRef.current;
        node.muted = false;
        node.volume = 1.0;
        node
            .play()
            .catch((e) => {
                console.error('caught audio error: ', e.message);
            });
    }

    handleClick = () => {
        this.setState({
            interacted: true,
        });
        setTimeout(() => {
            this.playAudio();
            this.setState({
                firstSoundPlayed: true,
            });
            setTimeout(() => {
                this.playAudio();
                this.setState({
                    secondSoundPlayed: true,
                });
            }, 6000);
        }, 4000);
    }

    renderStartup = () => (
        <p>
            Please give me permission to play sounds...
            <button onClick={this.handleClick}>Grant permission</button>
        </p>
    )

    renderScreen = () => (
        <div>
            <p>I will play a sound as many times as I want now!</p>
            <p>A sound is about to play...</p>
        </div>
    )

    renderSecondSound = () => (
        <div>
            <p>Soon it will play again...</p>
        </div>
    )

    renderSummary = () => (
        <div>
            <p>Hope you found this demo useful...</p>
        </div>
    )

    render = () => {
        const {
            interacted,
            firstSoundPlayed,
            secondSoundPlayed,
        } = this.state;

        return (
        <div>
            <audio
                autoPlay
                muted
                src="https://freesound.org/data/previews/33/33245_65091-lq.mp3"
                ref={this.audioRef}
            />
            {interacted === false ? this.renderStartup() : null}
            {interacted === true && firstSoundPlayed === false ? this.renderScreen() : null}
            {interacted === false || firstSoundPlayed === false || secondSoundPlayed === true ? null : this.renderSecondSound()}
            {secondSoundPlayed === false ? null : this.renderSummary()}
        </div>);
    }
}

ReactDOM.render(
    <AudioPlayer />,
    document.getElementById('react')
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>
0
quickshiftin

Oder Sie können Ihr WebView wie folgt einfach initialisieren:

webview.setWebViewClient(new WebViewClient() {
    // autoplay when finished loading via javascript injection
    public void onPageFinished(WebView view, String url) { mMessageContentView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); }
});

Das oben genannte funktioniert gut für mich.

0
FractalBob