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

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 属性。

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

Answer 1

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

检查是否元区块位于文件的末尾。如果这是您的情况，请查看有关如何解决此问题的帖子:Why do webkit browsers need to download the entire html5 video (mp4) before playing?