Ich erstelle eine Anwendung mit AngularJS, deren Homepage dem Benutzer 5 Videos anzeigt. Der Benutzer kann dann auf irgendeinen von ihnen klicken, um die Wiedergabe zu starten.AngularJS lädt die komplette Videodatei für das HTML5-Videoelement
Der Browser lädt derzeit ALLE Quellvideodateien für jedes HTML5-Videoelement, das auf der Seite angezeigt wird. Dies geschieht auf Chrome und Firefox, aber nicht auf IE 11.
Hier ist der Code für die App
AngularJS App Initialisierung
var app = angular.module("hdv", ['ngCookies', 'infinite-scroll']).config(function ($interpolateProvider, $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://*.vo.msecnd.net/**',
'https://*.domain.com/**'
]);
$interpolateProvider.startSymbol('[[[').endSymbol(']]]');
});
ich die $ sceDelegateProvider verwenden unterschiedliche Ursprünge Whitelist , da die Videoquelldateien über CDNs bereitgestellt werden (deren Domänennamen sich offensichtlich von der URL meiner Seite unterscheiden).
Die html5 Video-Elemente werden mit einem Kunden Richtlinie gebaut:
app.directive("aVideo", function($http){
return {
template: '<video controls width="100%" ng-attr-poster=[[[post.creative.media.poster]]] ng-attr-preload="metadata" ng-src="[[[post.creative.media.uri]]]" ng-attr-type="[[[post.creative.media.contentType]]]"></video>',
scope:{
post: "=",
},
link: function(scope, element, attrs) {
$(element).find("video").on("play", function() {
$http.post('/post/' + scope.post.creative.cuid + '/views?_csrf=' + csrfToken)
.success(function(data){
})
.error(function(error){
});
});
},
}
});
Beachten Sie, dass die Videoelemente alle die Vorspannung = Metadaten-Attribut gesetzt haben, so die Quelldatei herunterzuladen soll nicht gestartet werden.
Wie Sie oben sehen können, wird die Quelldatei vom Scope-Objekt "[[[post.creative.media.uri]]]" übernommen. Durch das Debugging wurde mir klar, dass es die Methode resourceUrlWhitelist ist, die den Download auslöst. Wenn ich die Whitelisting entferne, werden die Videodateien nicht mehr heruntergeladen (werden aber aufgrund von $ sce unsicheren Fehler auch nicht im Browser angezeigt). Wenn ich dieses URI mit der Methode $ sce "resourceUrl" für jedes "post" -Objekt einstelle, lädt der Browser die gesamte Datei herunter.
Es scheint, dass, wenn $ sce verwendet wird, um eine Domain oder den Ursprung einer Datei zu whitelist, der Browser nur die gesamte Datei herunterlädt, ohne dass die Quelle eines Videoelements und somit das Preload-Attribut ist sollte geehrt werden.
Ich möchte gerne Informationen von der Community erhalten, wie dieses Problem gelöst werden kann. Jedes Mal, wenn Benutzer meine Homepage herunterladen, laden ihre Browser etwa 500 MB Videodaten herunter, die sie nicht benötigen.
Gibt es einen Grund, den Sie mit 'ng-attr' hier:' ng-attr-Vorspannung = „Metadaten“ '? In diesem Fall ändert sich der Wert des Attributs nicht, daher sollten Sie nur ein reguläres Attribut verwenden können: 'preload =" metadata "'. Ich frage mich, ob das Setzen des Wertes dynamisch mit "ng-attr" Teil des Problems ist (d. H .: wenn es eingestellt ist, ist es zu spät). –
Kein spezifischer Grund, aber es ändert nicht das Verhalten. Dieser Code lädt mehrere html5-Videoelemente in die Webseite und die angularjs-App lädt ALLE Videoquelldateien als eine Datei herunter. Wenn ich also auf die Seite blicke, wird Ihr Browser unnötigerweise ungefähr 5 GB Daten herunterladen, selbst wenn Sie kein Video abspielen. –
@michael: Ich würde wirklich gerne verstehen, warum Sie diese Frage für eine Duplikate halten. Ich würde mich über eine Klarstellung darüber freuen, dass ich die Frage bearbeitet habe (Bearbeiten, die Sie gelöscht haben), und ich bin fest davon überzeugt, dass diese Fragen ganz andere Probleme ansprechen. Vielen Dank. –