HTML5视频无法使用AngularJS ng-src标记

Question

AngularJS ng-src不适用于这个小提琴中的HTML5视频元素:http://jsfiddle.net/FsHah/5/

查看视频元素,src标记正在填充正确的src uri,但视频无法播放.

这是AngularJS 不支持的,这是什么解决方法？

Answer 1

只需创建一个过滤器:

app.filter("trustUrl", ['$sce', function ($sce) {
        return function (recordingUrl) {
            return $sce.trustAsResourceUrl(recordingUrl);
        };
    }]);

在视图文件中:

<audio src="{{Your_URL | trustUrl}}" audioplayer controls></audio>

Answer 2

这似乎是AngularJS中的一个错误:https://github.com/angular/angular.js/issues/1352

替换源代码<video ng-src="{{src}}" controls></video>似乎是目前至少将源加载到视频中的唯一方法.希望有人来修复此问题或提供某种解决方法.

Answer 3

要播放视频,我刚刚使用以下方法有一个名为play的按钮,在按钮的ng-click中你必须写这个

 var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();

在ng-repeat使用索引中播放视频.希望能帮助到你.

Answer 4

从视频标记中删除源标记并尝试此操作..

<video controls preload=auto ng-src="{{videoURL| trustUrl}}" poster="{{thumbnailUrl}}"></video>

并在您的角度应用程序中创建这样的过滤器

 app.filter("trustUrl", function($sce) {
            return function(Url) {
                console.log(Url);
                return $sce.trustAsResourceUrl(Url);
            };
        });