web-dev-qa-db-de.com

Google Chrome gibt kein HTML5-Video auf dem Handy ab

Ich habe Probleme, ein Video auf meinem Android-Handy in der neuesten Version von Chrome abzuspielen. In anderen Browsern wie dem Puffin-Browser wird das Video abgespielt. Zu Testzwecken habe ich alle gängigen Formate ausprobiert: 

mp4
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video>
<br />
webm
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /></video>
<br />
ogg
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /></video>

https://codepen.io/anon/pen/ozpVNP

 QR Code for CodePen

 Preview on mobile

Laut Mozilla dem ersten Video soll das H.264 + AAC in MP4 abspielen. Ich nehme auch diesen Artikel in Rechnung und versuchte, die Videos zusätzlich durch JavaScript abzuspielen sowie das type-Attribut des ersten video-Tags ohne Erfolg zu entfernen. 

Wie kann ich es in Chrome für Handys einrichten?

8
modiX

Das Problem ist, dass Google möchte, dass Benutzer Medien selbst initiieren. Wenn Sie den Chrome-Browser Ihres Geräts debuggen , erhalten Sie die Warnung "Fehler beim Ausführen von" play "für" HTMLMediaElement ": API kann nur sein initiiert durch eine Benutzergeste. " Das bedeutet, dass Sie die Videoinitialisierung beispielsweise mit einem Klickereignis verknüpfen müssen

7
Jaco

Es scheint keine guten Informationen zu diesem Thema zu geben, also dachte ich, ich würde meine Ergebnisse veröffentlichen.

Ich habe die html5-Videowiedergabe auf Chrome-Desktop und -Mobile auf einem Android 5.0.1 von Samsung S4 mit Chrome 61 und dem eingebetteten Browser sowie Safari 9 und 11 mit einer automatischen JavaScript-Wiedergabe/-Pause in AngularJS (unten) debuggt. Das Video ist in ein Karussell eingebettet, sodass es manchmal sichtbar ist, manchmal nicht. In Summe:

  • Ich würde empfehlen, sowohl die Formate webm (vp8/vorbis) als auch mp4 (h264/aac) zu verwenden. Dies sind die am meisten unterstützten Formate und haben bei gleicher Bitrate eine gleichwertige Qualität. ffmpeg kann beide kodieren.
  • Es sieht so aus, als würde Chrome Mobile webm vorziehen, wenn es möglich ist.
  • Wenn ein Browser eine Datei abspielt, wenn Sie sie an die Datei-URL weiterleiten, bedeutet nicht, dass sie beim Einbetten in ein Video-Tag wiedergegeben wird. Sie wird jedoch darüber informiert, ob das Format und die Codecs unterstützt werden, wenn sie abgespielt werden . Chrome Mobile scheint sehr wählerisch zu sein, wenn es eine Videoquelle mit zu hoher Auflösung gibt.
  • Safari (und wahrscheinlich auch iOS) gibt kein Video wieder, sofern es nicht von einem Server bedient wird, der Byte-Bereiche unterstützt. Apache, Nginx und Amazon S3 unterstützen sie beispielsweise, viele kleinere Webserver (wie WSGI-Server) jedoch nicht.
  • Die Reihenfolge der Videos ist wichtiger als das Quellattribut media. Haben Sie immer ein Video mit niedriger Auflösung. Das folgende Beispiel verwendet 1920 x 1080 und 1280 x 720. Wenn der mobile Browser auf ein Video trifft, das "zu hochauflösend" ist, wird die Verarbeitung der anderen Quellen beendet und das Poster bevorzugt.
  • ein controls-Attribut und ein manuelles Spiel im Vergleich zu einem Durchspielen von JavaScript macht keinen Unterschied.
  • das muted-Attribut hindert Android daran, während der Wiedergabe ein kleines Lautsprechersymbol in der Statusleiste zu platzieren, jedoch außerhalb des Bildschirms, auch wenn das Video kein Audio enthält. Als Randbemerkung würde ich auch über Ihr Publikum nachdenken, wenn Sie Video mit Ton automatisch abspielen möchten. Ich persönlich finde das eine schlechte Idee.
  • das preload-Attribut scheint keinen großen Unterschied zu machen. Der Browser lädt die ausgewählten Video-Metadaten ohnehin automatisch vor.
  • wenn Sie ein type-Quellattribut haben, kann das Video nicht abgespielt werden. Wenn überhaupt, hilft es dem Browser, die Quelle auszuwählen, die für die beste Quelle ausgewählt wird
  • das Ereignis JS video.oncanplay ist der beste Weg, um festzustellen, ob das Video-Tag erfolgreich war. Wenn Sie das nicht erhalten, wird das Video nicht abgespielt, aber der Browser sagt Ihnen nicht warum.

HTML:

<video class="img-responsive-upscale ng-scope"
  video-auto-ctrl loop muted preload poster="0022.png">
  <source src="vid_small.webm" media="(max-width: 1280px)" type="video/webm">
  <source src="vid_small.mp4" media="(max-width: 1280px)" type="video/mp4">
  <source src="vid.webm" media="(max-width: 1920px)" type="video/webm">
  <source src="vid.mp4" type="video/mp4">
  <img src="0022.png" alt="something"
    title="Your browser does not support the <video> tag">
</video>

Javascript:

<script type="text/javascript">
angular.module('myproducts.videoplay', []).directive('videoAutoCtrl',
  function() {
  return {
    require: '^uibCarousel',
    link: function(scope, element, attrs) {
      var video = element[0];
      var canplay = false;
      var rs = ["HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA"];
      var ns = ["NETWORK_EMPTY", "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE"];

      function vinfo() {
        console.log("currentSrc = " + video.currentSrc);
        console.log("readyState = " + rs[video.readyState]);
        console.log("networkState = " + ns[video.networkState]);
        bufinfo();
      }

      function bufinfo() {
        // tr is a TimeRanges object
        tr = video.buffered
        if (tr.length > 0) {
          var ranges = ""
          for (i = 0; i < tr.length; i++) {
            s = tr.start(i);
            e = tr.end(i);
            ranges += s + '-' + e;
            if (i + 1 < tr.length) {
              ranges += ', '
            }
          }
          console.log("buffered time ranges: " + ranges);
        }
      }

      video.onerror = function () {
        console.log(video.error);
      }

      video.oncanplay = function () {
        canplay = true;
        if (!playing) {
          console.log("canplay!");
          vinfo();
        }
      }

      var playing = false;
      function playfulfilled(v) {
        console.log("visible so playing " + video.currentSrc.split('/').pop());
        playing = true;
      }

      function playrejected(v) {
        console.log("play failed", v);
      }

      function setstate(visible) {
        if (canplay) {
          if (visible) {
            p = video.play();
            if (p !== undefined) {
              p.then(playfulfilled, playrejected);
            }
          } else if (playing) {
            video.pause();
            console.log("invisible so paused");
            playing = false;
          }
        } else {
          console.log("!canplay, visible:", visible);
          vinfo();
        }
      }
      // Because $watch calls $parse on the 1st arg, the property doesn't need to exist on first load
      scope.$parent.$watch('active', setstate);
    }
  };
});
</script>
6
racitup
<video autoplay loop autobuffer muted playsinline>
     <source src="video/video-hat.mp4" type="video/mp4">
</video>

Ich hatte ein Problem, bei dem das Video auf meinem Desktop-Chrome und der Desktop-Mobile-Ansicht funktioniert hat, aber nicht auf meinem iPhone. Es stellte sich heraus, dass ich die Eigenschaft "playsinline" zum Video-Tag hinzufügen musste. :]

1
An Le

Das Problem wurde für mich nach dem Ausschalten des "Data save" -Modus in Chrom behoben.