HTML5 видео не работает с AngularJS нг-Src тегов

Question

AngularJS ng-src не работает с HTML5 видео элемент в этой скрипкой: http://jsfiddle.net/FsHah/5/

Глядя на видео элемент, то SRC тега заселяется с правильным Src Урия, но видео не воспроизводится.

Это not supported в AngularJS, каково обходное решение для этого?

Answer 1

Просто Создать фильтр:

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

В View File:

<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

Я пробовал с вызовом ajax, и он, похоже, не работает вообще. в то время как я вижу, что $ scope.src имеет правильное значение после вызова ajax, ng-src не получает обновление.

Я пробовал, $ timeout с $ apply и все еще ничего не делал. Кто-нибудь может понять эту проблему?

Answer 4

Для воспроизведения видео я использовал следующий метод есть кнопка называется играть и в нг-нажатии кнопки вы должны написать эту

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

для воспроизведения видео в нг-повторе использования индекс. надеюсь, что это поможет.

Answer 5

обходной

контроллер

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

Мой ответ на несколько лет поздно, но это для тех, кто все еще ищет решение. Я была такая же проблема. Я помнил, что Youtube отображает свои встроенные видео с помощью другого тега - iframe. Я применил свойства, которые я хотел, и это сработало.

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

Для любого нового в AngularJS, то {{видео}} является переменным $ scope.video в управлении для этой страницы, которая имеет путь к видео.

Answer 7

Это предосторожность по умолчанию в AngularJS. Пожалуйста, смотрите детали: https://docs.angularjs.org/api/ng/service/ $ SCE

Чтобы отключить «Строгий контекстную спасаясь» compeletly вы можете определить это в ваших app.js файл

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

Однако они не рекомендуют. Но вы можете использовать для контроллера spesific, как это:

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

Просто используйте ваниль JS (регулярный JavaScript), чтобы сделать эту работу. Если вы слушаете такие события, как onended, вы можете пересмотреть использование $ scope. $ Apply().

Мой пример:

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

Answer 9

Вы можете использовать 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 10

Я думаю, что это происходит, Угловые заливки в 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, что переменное существо сферы заполняются с помощью AJAX вызова.

Answer 11

Удалить исходный тег из видео тега и попробовать это ..

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