HTML5 视频不适用于 AngularJS ng-src 标签

Question

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

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

这是AngularJS 中的not supported，解决方法是什么？

Answer 1

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

要完全禁用“严格上下文转义”，您可以在 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 2

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

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

Answer 3

从视频标签中删除源标签并尝试这个..

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

并在您的 Angular 应用程序中创建一个像这样的过滤器

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

Answer 4

我认为发生的事情是 Angular 在和元素添加到页面后填充 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 的存在相关联，foo 是通过 AJAX 调用填充的范围变量。

Answer 5

只需创建一个过滤器：

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

在查看文件中：

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

Answer 6

您可以使用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 7

只需使用 vanilla js（常规 javascript）即可完成这项工作。 如果您正在收听诸如 onended 之类的事件，您可能需要重新考虑使用 $scope.$apply()。

我的例子：

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

Answer 8

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

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

要在 ng-repeat 中播放视频，请使用 index。 希望有帮助。

Answer 9

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

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

对于 AngularJS 的新手，{{ video }} 是该页面控件中的 $scope.video 变量，它具有视频的路径。

Answer 10

解决方法

在控制器中

$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>