Wie kann ich feststellen, ob das HTML5-Autoplay-Attribut unterstützt wird?

Question

Wie kann ich am besten erkennen, ob das HTML5-Videoelement eines Browsers Autoplay unterstützt?

Auf dem aktuellen iOS Safari, zum Beispiel, Autoplay ist deaktiviert .

Aktualisierung: Ich habe die Webseite jetzt so gestaltet, dass sie unabhängig davon funktioniert, ob Autoplay unterstützt wird. Wenn nun die Seite geladen wird, wird ein Initialisierungsvideo wird angezeigt. Auf einem iPad wird dem Benutzer eine große Wiedergabetaste angezeigt. Sobald die Wiedergabe ausgelöst wurde, wird das Video ausgeblendet. Danach wird die Wiedergabe des Videoplayer von JavaScript aus gesteuert werden kann, was ich eigentlich brauche.

Answer 1

Der Grund, warum das obige Skript und die Modernizr-Erkennung nicht zuverlässig sind, könnte darin liegen, dass sie nicht alle von Apple festgelegten Beschränkungen erfüllen:

• Das Video muss sein gedämpft
• Das Video muss auf Inline-Wiedergabe eingestellt sein
• Das Video muss haben eine Größe (0x0 px wird fehlschlagen)
• Das Video muss sein im Ansichtsfenster sichtbar (keine Opazitätseffekte, display: none oder visible: hidden)

Ich kam mit winzigen jQuery-Plugin zu erkennen Autoplay. Mal sehen, ob es zuverlässiger ist:

(function ($) {
   $.extend({
      'canVideoautoplay' : function ( callback ) {

         var testStarted = false;
         try {

            var playsinline = navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
            if (!playsinline) {
               return callback(false);
            }

            var src = 'data:video/mp4;base64,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';
            var $video = $('<video src="'+src+'" controls playsinline muted width="20" height="20" style="position:fixed;z-index:1000;top:0;left:0"></video>');
            $('body').prepend($video);

            testStarted = true;
            $video[0].play();

            $video[0].onplay = function() {
               this.playing = true;
            };

            $video[0].oncanplay = function() {
               if ($video[0].playing) {
                  callback(true);
               } else {
                  callback(false);
               }
               $video[0].pause();
               $video.remove();
            };
         } catch(e) {}

         if (!testStarted) {
            callback(false);
         }
      }
   });
})(jQuery);

Sie können ihn wie folgt verwenden:

$(function () {
   $.canVideoautoplay(function ( canAutoplay ) {
      alert('Can we autoplay? ' + canAutoplay);
   });
});

Answer 2

Der Autoplay-Test von Modernizr hat einige Probleme mit der Zuverlässigkeit, wie hier beschrieben: https://github.com/Modernizr/Modernizr/issues/1095

Sie können die Unterstützung für die automatische Wiedergabe von Videos erkennen, indem Sie prüfen, ob sich der Pausenstatus eines Videoelements ändert, nachdem es programmatisch abgespielt wurde. Dies allein kann in einigen mobilen Browsern zu falsch negativen Ergebnissen führen, daher sollte eine Promise-Prüfung hinzugefügt werden, um diese Fälle abzudecken.

Diese Methode funktioniert in allen gängigen Browsern (Desktop und Handy), außer bei Android <= 4.0 und Windows Phone, wo sie ein falsches Ergebnis liefert.

Hier ist die Erkennungsfunktion:

var supports_video_autoplay = function(callback) {

  if (typeof callback !== "function") return false;

  var v = document.createElement("video");
  v.paused = true;
  var p = "play" in v && v.play();

  callback(!v.paused || ("Promise" in window && p instanceof Promise));

};

Verwendung:

supports_video_autoplay(function(supported) {
  if (supported) {
    // video autoplay supported!
  } else {
    // no video autoplay support :(
  }
});

Live-Test: https://codepen.io/paulorely/pen/QveEGy

Answer 3

Dies funktioniert am besten, um die automatische Wiedergabe zu überprüfen.

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
  playPromise.then(function() {
    // Automatic playback started!
  }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  });
}

Entnommen von hier.

HTML5 video.play gibt ausstehende Versprechen zurück

Answer 4

Vielleicht antworte ich ein bisschen spät, aber ich habe gerade eine Lösung getestet, die für mich gut funktioniert:

var loadStarted = false;

video.onloadstart = function(){
    loadStarted = true;
};

function checkRunning(){
    if(!loadStarted) removeVideo();
}

setTimeout(checkRunning, 1000);

Das setTimeout ist nicht sehr sauber, aber die Gesamtlösung ist so super einfach!

Answer 5

Vielleicht finden Sie es nützlich. Ich habe alle in diesem Thread vorgeschlagenen Kommentare in dieser Lösung zusammengefasst: https://github.com/kaufguy/autoplay-detector

Demo hier: https://kaufguy.github.io/autoplay-detector/

Außerdem habe ich es auf das Inline-Spiel beschränkt.

var MUTE_DELAY_PORTION = 25;

var isAutoplaySupported = function (callback, timeout) {
    var called = false;
    if (!callback) {
        return;
    }
    if (!isPlaysinline()) {
        return callback({ autoplay: false, muted: false });
    }
    checkAutoplay(false, function () { testHandler(false); });
    setTimeout(function () {
        checkAutoplay(true, function () { testHandler(true); });
    }, timeout / MUTE_DELAY_PORTION);
    var testHandler = function (mute) {
        if (!called) {
            called = true;
            callback({ autoplay: true, muted: mute });
        }
    };
    setTimeout(function () {
        if (!called) {
            called = true;
            callback({ autoplay: false, muted: false });
        }
    }, timeout);
};

var checkAutoplay = function (mute, callback) {
    var video = document.createElement('video');
    video.ontimeupdate = function () {
        if (video.currentTime != 0) {
            return callback();
        }
        ;
    };
    video.autoplay = true;
    video.muted = mute;
    video.setAttribute('webkit-playsinline', 'webkit-playsinline');
    video.setAttribute('playsinline', 'playsinline');
    video.src = 'data:audio/mpeg;base64,/+MYxAAAAANIAUAAAASEEB/jwOFM/0MM/90b/+RhST//w4NFwOjf///PZu////9lns5GFDv//l9GlUIEEIAAAgIg8Ir/JGq3/+MYxDsLIj5QMYcoAP0dv9HIjUcH//yYSg+CIbkGP//8w0bLVjUP///3Z0x5QCAv/yLjwtGKTEFNRTMuOTeqqqqqqqqqqqqq/+MYxEkNmdJkUYc4AKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq';
    video.style.display = 'none';
    video.load();
    video.play();
    return video;
};

var isPlaysinline = function () {
    return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
};

isAutoplaySupported(function(autoplayResult){
    //do somthing
}, 400)

Funktioniert bei mir...