Question

我正在使用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>

首先，出现意外情况＆＃34;＆lt;视频＆＃34;通过角度插入视频元素。其次，你可以看到有一个＆＃39; ng-src＆＃39;和一个＆＃39; src＆＃39; html中的属性都返回给浏览器。最后，＆＃39; preload＆＃39;属性未受到尊重，因为网络跟踪显示通过此指令在页面上生成的所有视频元素（总共3个）完全并行预加载。

所以我正在寻找有关如何正确设置AngularJS指令以显示视频元素的指导。我特别期待“预载”＃39;要被尊重的属性，因为预加载所有视频元素会消耗客户端上过多的带宽。

Answer 1

您的模板中有拼写错误。开头标记的>末尾不存在。可能是这样，尤其是preload是最后一个属性吗？

BTW，ng-属性不会被Angular清理掉，因此，它们在生成的HTML中的存在是正常的。

<强>更新

根据this article，您无法依赖preload属性来强制执行预加载行为。

AngularJS指令上HTML5视频的预加载属性不起作用

1 个答案: