web-dev-qa-db-de.com

hTML5 Video Problem mit Chrom

Ich möchte ein html5-Video auf meiner Webseite verwenden. Hier der Code:

<video id="vid" width="100%" autoplay loop>
  <source src="video/video.webm" type="video/webm">
  <source src="video/video.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

Das Problem ist, dass, wenn ich webm als Videoquelle verwende:

<source src="video/video.webm" type="video/webm">

es funktioniert gut auf chrom und FF ..__, aber sobald ich mp4 hinzufüge:

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

Chrome zeigt einen schwarzen Bildschirm und den Text "Warten auf Video" darauf, aber Safari und FF zeigen es wie erwartet. 

Alle Vorschläge, um es auf all diesen Browsern zum Spielen zu bringen, würden uns freuen.

8
Ramtin Gh

Dies ist eine Lösung, die ich für meinen Fall gefunden habe.

Betten Sie zuerst das Video in Ihre HTML ein:

<video id="videoId" width="100%" autoplay loop>
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

Stellen Sie dann fest, ob der Browser chrom ist:

var isChrome = !!window.chrome; 
var isIE = /*@[email protected]*/false;

Wenn es verchromt ist, ersetzen Sie das Video durch die webm-Version . (Für diejenigen, die selbst nicht mit dem Problem konfrontiert sind: Wenn Sie sowohl mp4 als auch webm einbetten, wird von Chrome keine von ihnen abgespielt nur "webm")

if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}

Und in Bezug auf IE: In meinem Fall habe ich das HTML5-Video durch ein Bild ersetzt:

if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
} 
6
Ramtin Gh

Ich hatte das gleiche Problem und konnte es mit keiner der vorgeschlagenen Lösungen entweder oben oder in anderen Threads lösen (das Aktualisieren der Version von Google Chrome oder das Deaktivieren der Chrome-Hardwarebeschleunigung funktionierte ebenfalls nicht.)

Am Ende haben wir die Videodatei in ein anderes mp4-Format konvertiert.

Es stellte sich heraus, dass ich das ursprüngliche mp4 mit einem MP4 VIDEO-Encoder konvertiert hatte, obwohl ich dies mit einem H.264-Normal-Encoder hätte tun sollen. 

Hier ist der vollständige Code:

<video width="320" height="240" controls>
  <source src="video/Ruby.ogv" type="video/ogg" />
  <source src="video/Ruby.webm" type="video/webm" />
  <source src="video/Ruby-iPad.mp4" type="video/mp4" />
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle">
            <param name="movie" value="video/Ruby.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="false" />
            <param name="loop" value="false" />
            <param name="menu" value="true" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby">
                <param name="movie" value="video/Ruby.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#cccccc" />
                <param name="play" value="false" />
                <param name="loop" value="false" />
                <param name="menu" value="true" />
            <!--<![endif]-->
                <img src="video/Ruby.jpg" alt="No video playback capabilities" />
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>

Der obige Code ist eine Anpassung der Methode "Video für alle". Weitere Informationen finden Sie unter http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/

Ich verwende eine alte Version von Wondershare Video Converter, aber Sie können denselben Job auch von kostenlosen Online-Diensten ausführen, z. B. http://video.online-convert.com/

4
Carme

Stellen Sie sicher, dass Sie über einen HTML5-Doctype verfügen:

<!DOCTYPE html>

Dies hat das Problem für mich behoben.

3
Miki

Tauschen Sie die beiden aus, setzen Sie zuerst mp4 und anschließend webm und sehen Sie, was passiert. Ich habe das,

<div id="ModelVideo">
  <video max-width="100%" controls autoplay muted>
    <source src="movie1.mp4" type="video/mp4">
    <source src="movie1.webm" type="video/webm" controls>
    Your browser does not support the video tag.
  </video>
</div>

und meiner funktioniert gut in chrom, mein mp4 ist das, aber kann nicht in den anderen Browsern getestet werden, obwohl mein Dreamweaver auch in Safari testet, und beide funktionieren gut.

(lache nicht, arbeite noch an der website )

Vielleicht können Sie mich wissen lassen, wie ich die Lautstärke erfolgreich kontrollieren kann, mit der scheinbar Probleme auftreten.

2
Bat Sheva Sida

Das Problem bei Chrome ist, dass das Video nach dem Herunterladen nicht abgespielt wird.

Sie können es lösen, indem Sie ein kleines Javascript-Snippet hinzufügen:

this.interval = setInterval(function(){
  this.countForVideo = document.getElementById('vid').readyState;
  if(this.countForVideo == 4){
    document.getElementById('vid').play();
    clearInterval(this.interval);
  }
},2000);

Dadurch wird geprüft, ob das Video alle 2 Sekunden heruntergeladen wird. Wenn das Video heruntergeladen wird, wird es abgespielt und das Intervall gestoppt.

0
Pavan Gadagi