AngularJS下载HTML5视频元素的完整视频文件

我正在使用AngularJS构建一个应用程序，其主页显示用户5个视频。然后，用户可以单击其中任何一个开始播放

浏览器当前正在下载页面中显示的每个html5视频元素的所有源视频文件。这种情况发生在Chrome和FireFox上，但在IE11上没有

这是应用程序的代码

AngularJS应用程序初始化

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(']]]');
});

我使用$sceDelegateProvider将不同的来源列入白名单，因为视频源文件是通过CDN提供的（CDN的域名明显不同于我页面的uri）

html5视频元素是使用客户指令构建的：

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){             

            }); 
        });
    },
}
});

app.directive（“aVideo”，函数（$http）{
返回{
模板：“”，
范围：{
职位：“=”，
},
链接：函数（范围、元素、属性）{
$（元素）。查找（“视频”）。打开（“播放”，函数（）{
$http.post（'/post/'+scope.post.creative.cuid+'/views？\u csrf='+csrfToken）
.成功（功能（数据）{
})
.error（函数（错误）{
}); 
});
},
}
});

请注意，视频元素都设置了preload=metadata属性，因此不应开始下载源文件

如上所示，源文件取自作用域对象“[[[post.creative.media.uri]]”。通过调试，我逐渐意识到触发下载的是resourceUrlWhitelist方法。如果删除白名单，则视频文件将不再下载（但由于$sce不安全错误，也不会显示在浏览器中）。另外，如果我在每个“post”对象上使用$sce“resourceUrl”方法设置此uri，那么浏览器将下载整个文件

似乎，每当使用$sce将域或文件源列入白名单时，浏览器只会下载整个文件，而不知道它是视频元素的源，因此应遵守“预加载”属性

我想从社区获得关于如何解决这个问题的信息，因为每次用户下载我的主页时，他们的浏览器都会下载大约500mb他们不需要的视频数据

您肯定应该使用预加载而不是ng attr preload

检查元块是否位于文件末尾。如果这是您的情况，请查看此帖子，了解如何解决此问题：

---

您在此处使用

ng attr

是否有原因：

ng attr preload=“metadata”

？在这种情况下，属性的值不会更改，因此您应该只能够使用常规属性：

preload=“metadata”

。我想知道动态设置值w/

ng attr

是否是问题的一部分（即：设置时已经太迟了）。没有具体原因，但它不会改变行为。这段代码将几个html5视频元素加载到网页中，angularjs应用程序将所有视频源文件作为一个文件下载。所以，我浏览网页，即使你不播放任何视频，你的浏览器也会不必要地下载大约5GB的数据。@米迦勒：我真的很想知道为什么你认为这个问题是重复的。请澄清一下，因为我编辑了问题（您删除的编辑），我坚信这些问题解决了完全不同的问题。谢谢。@luis您的编辑无效，没有添加任何内容到您的问题中；这本应该作为一个评论。话虽如此，我不认为这是一个重复的问题，并投票重开它。您的问题有3个重新打开投票，因此只需要再打开2个。当您在呈现页面上检查DOM时，源代码是什么样子的，您可以将其粘贴到这里吗？