Question

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

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

这是not supported中的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中使用 index 播放视频。希望它有所帮助。

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);
            };
        });

Answer 5

我的回复是迟了几年，但这适用于仍在寻找解决方案的任何人。我遇到过同样的问题。我记得Youtube使用不同的标签 - iframe显示他们的嵌入视频。我应用了我想要的属性并且它有效。

<iframe width="560" height="300" ng-src="{{ video }}" frameborder="0" allowfullscreen controls></iframe>

对于AngularJS的新用户，{{video}}是此页面控件中的$ scope.video变量，该变量包含视频的路径。

Answer 6

解决方法

控制器中的

$scope.mp3 = "http://download.jw.org/audio.mp3"

$scope.$watch('mp3', function() {
       $("audio").attr("src",$scope.mp3)
   });

HTML：

<audio id="mejs" type="audio/mp3" controls="controls"></audio>

Answer 7

这是AngularJS中的默认安全预防措施。请参阅详细信息：https://docs.angularjs.org/api/ng/service/$sce

禁用严格上下文转义＆＃39;你可以在你的app.js文件中定义它

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
      // Completely disable SCE.  For demonstration purposes only!
      // Do not use in new projects.
      $sceProvider.enabled(false);
    });

然而，他们不推荐。但你可以使用像这样的特定控制器：

var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home',    function ($scope, Home) {
$scope.Home = Home.query(); }]).config(function($sceProvider) {
$sceProvider.enabled(false); });

Answer 8

您可以使用ng-media模块。

angular.module('app', ['media'])
    .controller('mainCtrl', function($scope) {
        
        $scope.videoSources = [];
        
        $scope.loadVideos = function() {
            $scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.mp4');
            $scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.webm');
        };
    });

<div ng-app='app'>
  <div ng-controller='mainCtrl'>        
    <video html5-video='{{ videoSources }}'
        autoplay='true' controls='true'>
    </video>
    <br>
    <a href="#" ng-click='loadVideos()'>Load videos</a>
  </div>
</div>

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://caitp.github.io/ng-media/ng-media.js"></script>

Plunker

Answer 9

我认为在将{和}元素添加到页面之后，src属性中的角度填充是什么，因此浏览器会看到URL损坏的元素。我使用ng-if：

解决了这个问题

        <video muted ng-if="foo" loop autoplay>
            <source ng-src="{{foo.media.mp4.url}}">
            <source ng-src="{{foo.media.webm.url}}" type="video/webm">
            <img ng-src="{{foo.media.gif.url}}">
        </video>

这使得元素与foo的存在联系在一起，toolStripComboBox1.SelectedIndex.ToString()是通过AJAX调用填充的范围变量。

Answer 10

只需使用vanilla js（常规javascript）即可完成此工作。如果你正在听取像onended这样的事件，你可能想要使用$ scope重新考虑。$ apply（）。

我的例子：

document.getElementById('video').src = $scope.videos[$scope.videoindex];

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

10 个答案: