2017-01-04 6 views
0

Ich versuche, ein statisches HTML5-Video in meiner Angular App anzuzeigen. Es spielt ohne Probleme in Chrome, aber nicht in Safari oder Firefox.HTML5 Video wird nicht auf Safari & Firefox mit Angular.js gerendert

<video class="masthead-video w100 m-w100" autoplay loop muted> 
    <source src="public/img/test.mp4" type="video/mp4"> 
    <source src="public/img/test.webm" type="video/webm"> 
    <source src="public/img/test.ogv" type="video/ogg"> 
    Your browser does not support the video tag. 
</video> 

Laden des Markup in einen Browser als einfache HTML (keine Winkel oder andere Markup) erlaubt es auf Safari und Firefox normalerweise ohne Probleme zu spielen.

Ive versuchte mit statt (obwohl ich nicht seit ich keine dynamischen Pfade verwenden sollte), aber es hat nicht geholfen.

Kennt jemand Probleme bei der Verwendung von HTML5-Video mit Angular.js?

+0

'Es spielt ohne Probleme in Chrome, aber nicht auf Safari oder Firefox' - also welche Probleme bekommen Sie bei Firefox? Nützliche Informationen in der Browser ** Entwickler ** Tools-Konsole? –

+0

Ich bekomme ein paar "Ressource konnte nicht geladen werden" Fehler [Fehler] Fehler beim Laden der Ressource: Der Server reagierte mit einem Status von 404 (Not Found) (angular.min.js.map, Zeile 0) 'aber seine Suche eckige Dateien mit '.map' Erweiterungen ... Ich weiß nicht warum. eckig und alle anderen Funktionen laden ohne Probleme nichtsdestotrotz – yevg

+0

das sollte kein Problem sein - .map-Dateien sind hilfreich für die Fehlersuche minimized js. Eine Sache der Anmerkung: Sie haben die Frage "Javascript" markiert - noch haben Sie keine Javascript geschrieben –

Antwort

0

Verwenden Sie $sce für Trust-Quelle URL.

$scope.trustSrc = function (src) { 
       return $sce.trustAsResourceUrl(src); 
      }; 

    $scope.src= public/img/test.mp4; 


Html Content 



<video class="masthead-video w100 m-w100" autoplay loop muted> 
     <source ng-src="{{trustSrc(src)}}" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 

auf diese Weise für Ihren Code.

Verwandte Themen