我正在使用 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 的视频数据。
最佳答案
关于AngularJS 下载 HTML5 视频元素的完整视频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27930651/