HTML5 Video не работает с тегом AngularJS ng-src
AngularJS ng-src не работает с элементом HTML5 Video в этой скрипте: http://jsfiddle.net/FsHah/5/
Глядя на элемент видео, тэг src заполняется правильным src uri, но видео не воспроизводится.
Разве это не поддерживается в AngularJS , каково обходное решение для этого?
- Воспроизведение видео в формате HTML5 на полноэкранном режиме в веб-обозревателе Android
- Видео HTML5 не будет зацикливаться
- Запрос элемента видео HTML5 остается навсегда (на хроме)
- Воспроизведение локального (жесткого диска) видеофайла с помощью тега HTML5?
- Могу ли я иметь видео с прозрачным фоном, используя тег HTML5?
- Как получить HTML5-видео для работы с использованием IE10
- Программно воспроизводить видео со звуком в Safari и Mobile Chrome
- Автозапуск html5-видео с помощью браузера android 4
- Видео html5 не работает на ipad
- HTML5 - видеоролик mp4 не воспроизводится в IE9
- Как автовоспроизвести HTML5 mp4-видео на Android?
- Отключить кнопку загрузки для Google Chrome?
- HTML5 Video tag не работает в Safari, iPhone и iPad
Просто создайте фильтр:
app.filter("trustUrl", ['$sce', function ($sce) { return function (recordingUrl) { return $sce.trustAsResourceUrl(recordingUrl); }; }]);
В файле просмотра:
В настоящее время это похоже на ошибку в AngularJS: https://github.com/angular/angular.js/issues/1352
Замена источника с помощью
Мой ответ несколько лет спустя, но это для тех, кто все еще ищет решение. Я была такая же проблема. Я помнил, что Youtube отображает свои встроенные видео с помощью другого тега – iframe. Я применил свойства, которые хотел, и это сработало.
Для всех, кто знаком с AngularJS, {{video}} – переменная $ scope.video в элементе управления для этой страницы, которая имеет путь к видео.
Удалите тег источника из тега видео и попробуйте это.
и в вашем угловом приложении создайте такой фильтр
app.filter("trustUrl", function($sce) { return function(Url) { console.log(Url); return $sce.trustAsResourceUrl(Url); }; });
Я пробовал с помощью ajax-звонка, и он вообще не работал. в то время как я вижу, что $ scope.src имеет правильное значение после вызова ajax, ng-src не получает обновление.
Я пробовал, $ timeout с $ apply и все еще ничего не делал. Кто-нибудь может понять эту проблему?
обходной путь
в controllerе
$scope.mp3 = "http://download.jw.org/audio.mp3" $scope.$watch('mp3', function() { $("audio").attr("src",$scope.mp3) });
HTML:
Это предосторожность по умолчанию в 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); });
Однако они не рекомендуют. Но вы можете использовать для подобного controllerа:
var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home', function ($scope, Home) { $scope.Home = Home.query(); }]).config(function($sceProvider) { $sceProvider.enabled(false); });
Вы можете использовать модуль 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'); }; });
Просто используйте vanilla js (обычный javascript), чтобы сделать эту работу. Если вы слушаете такие события, как onended, вы можете пересмотреть использование $ scope. $ Apply ().
Мой пример:
document.getElementById('video').src = $scope.videos[$scope.videoindex];
Я думаю, что происходит то, что Angular заполняет атрибуты src после того, как и элементы были добавлены на страницу, поэтому браузер видит элементы со сломанными URL-адресами. Я работал вокруг него, используя ng-if :
Это заставляет элемент привязываться к существованию foo , который является переменной области, заполняемой через вызов AJAX.