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

【问题标题】：AngularJS downloads full video file for HTML5 video elementAngularJS 下载 HTML5 视频元素的完整视频文件
【发布时间】：2015-03-11 21:52:08
【问题描述】：

我正在使用 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 属性应该很荣幸。

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

【问题讨论】：

您在这里使用ng-attr 是否有原因：ng-attr-preload="metadata"？在这种情况下，属性的值不会改变，因此您应该能够使用常规属性：preload="metadata"。我想知道使用ng-attr 动态设置值是否是问题的一部分（即：设置时为时已晚）。
没有具体原因，但不会改变行为。此代码将几个 html5 视频元素加载到网页中，并且 angularjs 应用程序将所有视频源文件作为一个下载。所以我浏览到该页面，即使你不播放任何视频，你的浏览器也会不必要地下载大约 5GB 的数据。
@michael：我真的很想了解您为什么认为这个问题是重复的。希望对此进行澄清，因为我编辑了问题（您删除的编辑），我坚信这些问题解决了完全不同的问题。谢谢。
@luis 您的编辑无效，没有为您的问题添加任何内容；它应该作为评论留下。话虽如此，我不认为这个问题是重复的，并投票决定重新打开它。您的问题有 3 个重新打开投票，因此只需再重新打开 2 个。
当你检查渲染页面上的 DOM 时，源代码是什么样的，你能把它粘贴到这里吗？

标签： angularjs angularjs-directive html5-video

【解决方案1】：

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

【讨论】：