Я использую директиву AngularJS для загрузки элемента видео в приложение AngularJS. Директива выглядит следующим образом:
app.directive("aVideo", function($http){
return {
template: '<video class="col-xs-12 col-sm-12 col-md-12" ng-src="[[[post.creative.media.mediaUri]]]" poster="[[[post.creative.posterUri]]]" controls crossorigin="anonymous" preload="none"</video>',
transclude: true,
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){
});
});
},
}
});
Обратите особое внимание на атрибут шаблона в директиве. Когда браузер отображает страницу, выводится следующий HTML-код:
<video class="col-xs-12 col-sm-12 col-md-12" ng-src="https://xxx.blob.core.windows.net/creatives/6f728304eecc6a4348b87a2be0de0f954cd3.mp4" poster="https://xxx.blob.core.windows.net/creatives/e231b9d1-0df8-4a9f-81fd-70ad676d5698" controls="" crossorigin="anonymous" preload="none" < video src="https://xxx.blob.core.windows.net/creatives/6f728304eecc6a4348b87a2be0de0f954cd3.mp4"></video>
Во-первых, есть неожиданное «‹ видео», вставленное угловым в элемент видео. Во-вторых, вы можете видеть, что в html, возвращаемом браузеру, есть атрибуты 'ng-src' и 'src'. Наконец, атрибут «предварительная загрузка» не соблюдается, поскольку сетевые трассировки показывают мне, что все видеоэлементы, сгенерированные на странице с помощью этой директивы (всего 3), предварительно загружаются полностью параллельно.
Поэтому я ищу руководство о том, как правильно настроить директиву AngularJS для отображения видеоэлементов. Я особенно стремлюсь соблюдать атрибут «предварительная загрузка», поскольку предварительная загрузка всех видеоэлементов потребляет слишком много трафика на клиенте.
