HTML5 Video не работает с тегом AngularJS ng-src

Ответ 1

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

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

В файле просмотра:

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

Ответ 2

В настоящее время это похоже на ошибку в AngularJS: https://github.com/angular/angular.js/issues/1352

Замена источника с помощью <video ng-src="{{src}} controls></video> кажется единственным способом на данный момент по крайней мере загрузить источник в видео. Надеюсь, кто-то придет, чтобы исправить это или обеспечить какое-то обходное решение.

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

Удалить тег источника из тега видео и попробовать это.

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

Ответ 6

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

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

Ответ 7

обходной путь

в контроллере

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

Ответ 8

Это предосторожность по умолчанию в 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); });

Ответ 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>

Ответ 10

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

Мой пример:

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

Ответ 11

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