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

Question

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

浏览器当前正在为页面中显示的每个html5视频元素下载所有源视频文件.这种情况发生在Chrome和FireFox上,但不适用于IE 11.

这是应用程序的代码

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提供的(其域名明显不同于我的页面的uri).

html5视频元素使用customer指令构建:

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

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

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

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

似乎每当使用$ sce将域或文件的来源列入白名单时,浏览器就会下载整个文件,而不是相应的事实,即它是视频元素的来源,因此应该遵守preload属性.

我想从社区获得有关如何解决此问题的意见,因为每次用户下载我的主页时,他们的浏览器都会下载大约500mb他们不需要的视频数据.

Answer 1

1. 你绝对应该使用 preload 而不是 ng-attr-preload。

2. 检查元块是否位于文件末尾。如果您遇到这种情况，请查看这篇文章以了解如何修复它：Why do webkit browsers need to download the full html5 video (mp4) before play?