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视频元素是使用客户指令构建的：

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属性，因此不应该开始下载源文件。

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

似乎每当$ sce用于将域或文件的来源列入白名单时，浏览器只会下载整个文件，而不是它是视频元素的来源，因此preload属性应该很荣幸。

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

Answer 1

你绝对应该使用preload而不是ng-attr-preload。
检查元块是否位于文件的末尾。如果是这种情况，请查看此帖子，了解如何修复它：Why do webkit browsers need to download the entire html5 video (mp4) before playing?

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

1 个答案: