Angular.js: ngSrc не работает должным образом с тегом HTML5 Video Source.

У меня тоже проблема, но я чувствую, что проблема кроется в Angulars ng-repeat.
Если я удалю видео из этой области, оно будет воспроизводиться нормально, иначе ни один из элементов управления не загрузится.

я тоже! http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

я тоже.

я тоже! Помоги мне

+1

Я использую ng-repeat для установки источников ng-src, и они правильно загружаются при загрузке страницы, но если видео скрывается через ng-show, а затем отображается снова, источники не перезагружаются (в Chrome).

Я могу подтвердить наблюдение sourcec0de - если я удалю ng-repeat и использую один источник ng-src (или несколько источников ng-src), видео перезагружается правильно при повторном показе.

У меня такая же проблема. Кто-нибудь сейчас занимается этим?

С ng-src или без него, с ng-repeat или без него, chrome неоднократно не может перезагрузить видео HTML5 после перехода и возврата на страницу.

Из чистого кеша я вижу 2 запроса (первый Pending ), второй - 206 Partial Content . Если я обновлюсь, я увижу один запрос с 304 Not Modified . Когда я ухожу от просмотра видео, а затем возвращаюсь (либо по ссылке, либо с помощью кнопки «Назад»), я получаю два запроса на видео только со статусом Pending . Один из них будет иметь mime-тип video/mp4 (правильно), другой просто скажет Pending .

Кто-нибудь вообще смотрит на эту проблему ???

Можете ли вы привести действующий пример этой проблемы?
Это вообще работает в некоторых браузерах?
Вы проверили, поддерживают ли браузеры изменение атрибута src в видеоэлементах HTML5 после рендеринга?

К сожалению, пример приложения еще не опубликован.
Прекрасно работает в Safari.
Как указано выше, я использовал директиву ng-src и жестко заданный атрибут src с одинаковыми результатами.

Что произойдет, если вы измените src с помощью прямого jQuery?
Интересно, действительно ли это ошибка браузера, а не AngularJS?

16 июля 2013 г., 22:31, Поль Гренье [email protected] написал:

К сожалению, пример приложения еще не опубликован.
Прекрасно работает в Safari.
Как указано выше, я использовал как директиву ng-src, так и жестко запрограммированный src
атрибут с теми же результатами.

-
Ответьте на это письмо напрямую или просмотрите его на Gi tHubhttps: //github.com/angular/angular.js/issues/1352#issuecomment -21075654
.

Даже если я не изменяю src (например, жестко запрограммировал атрибут video src), проблема возникает. У меня нет способа смоделировать проблему вне Angular, поскольку Angular контролирует контент. Я согласен, это может быть просто проблема в Chrome, но я не знаю, как это проверить.

Что вы имеете в виду, что Angular контролирует контент?

Проблема возникает, когда при использовании контроллера Angular содержимое изменяется, загружая другое представление. Использование кнопки «Назад» или ссылки на предыдущий маршрут отображает предыдущий контент, но видео не загружается - каждый раз. Если это проблема с Angular, то, вероятно, только в Chrome. Я предполагаю, что агрессивное кеширование Chrome и метод Angular для изменения представлений не могут договориться о том, что следует загружать.

@AutoSponge мой тестовый пример был:
страница 1 с кнопкой для перехода на страницу 2
страница 2 с проигрывателем videojs и кнопкой для возврата на страницу 1

перейдите на страницу 1, затем на страницу 2, видео загружается правильно.
нажмите кнопку, чтобы вернуться на страницу 1, затем перейдите на страницу 2, Google Chrome перестанет использовать videojs. это происходит потому, что объект videojs не был удален, когда angular удалил элемент из DOM, как и ожидалось. это не angularjs (ура!)

Удалите его перед инициализацией проигрывателя videojs. Я делаю это, потому что у меня есть директива, которая добавляет игрока. Например, если используется в директиве:

... directive('mydir', ... {
    var vp;
    return {
        link: ..{ 
            if (vp) vp.dispose();
            vp = videojs("mp4video");
        }
    };`

Как и OP, я не использую объект-оболочку. Видео загружается через тег видео HTML5. Вы предлагаете удалить это отдельно?

ну, videoJS отслеживает игроков, добавленных в DOM, но похоже, что не наблюдает за изменениями. Если вы удалите элемент из DOM (например, из-за перехода к другому маршруту), videoJS не узнает и не инициализирует его снова. см. строку 17: https://github.com/videojs/video.js/blob/master/src/js/core.js
если вы удалите его за пределами videoJS, я думаю, вам следует вызвать метод dispose () проигрывателя. Я думаю, это работает, как если бы вы обернули плагин jquery (?). Вот что заставляет меня думать, что это не угловая проблема.

с этой проблемой тоже.
загрузка AV-файлов в src или ng-src не работает. нужно написать директивы или фабрики, чтобы он работал.
http://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs

У меня тоже такая проблема.

Видео не загружается в Chrome, Firefox и Safari. Однако это работает в IE.

Вот работа : http : //stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag

Это создает беспорядочное мерцание при загрузке страницы, но это работает.

+1

обходной путь заключается в следующем:

в вашем контроллере установите функцию в моем случае так:

    $scope.play = function(who) {
        var name = who.id.split('.')[0];
        $scope.audio.mp3 = name + '.mp3';
        $scope.audio.ogg = name + '.ogg';
        $scope.audio.play = 'views/audio.html?'+name;
    };

то в моем случае в моем шаблоне у меня было следующее:

<div ng-include src="audio.play"></div>

мой шаблон в views / audio.html выглядит следующим образом:

<audio ng-model="audio" controls autoplay >
    <source ng-src="{{audio.mp3}}" type='audio/mp3'></source>
    <source ng-src="{{audio.ogg}}" type='audio/ogg'></source>
</audio>

если $ scope.audio.play не изменится, перезагрузки не произойдет, поэтому я использую имя файла, это может быть просто случайное число.

@caitp Я думал, у тебя есть пиар, хватает памяти?

@IgorMinar Я собирался над этим поработать, но понял, что не могу воспроизвести проблему (см. Http://jsfiddle.net/J77gE/). Я подумал, что было бы забавно создать вспомогательный модуль мультимедиа вместо ядра с большим количеством вариантов привязки.

Но насколько я могу судить, ng-src отлично работает с исходными тегами в современных браузерах и современных angular

Проблема, о которой я упоминал, была связана с изменением представлений и использованием кнопки возврата. Я не уверен, как этот jsfiddle пытается воссоздать проблему.

Нет, дело в том, что у нас нет проблемы с интерполяцией исходных тегов, я думаю, проблема не в этом. Мне вообще не удалось воспроизвести вашу проблему

@AutoSponge, пожалуйста, не могли бы вы предоставить демонстрационное приложение и инструкции по его воспроизведению?

http://jsfiddle.net/AutoSponge/Yh9en/

Щелкните ссылку Видео. Он загрузится в первый раз. Щелкните «Домой», а затем снова «Видео». В течение 1 или 2 кликов он, вероятно, перестанет загружаться в Chrome.

(и не судите, я собрал это на основе приложения 8 месяцев назад!)

@AutoSponge, это не проблема Angular. Это странное поведение Chrome, но он все еще интерполирует ваш исходный файл и получает правильный src. Кажется, это проблема с кешированием, что немного прискорбно. (у вас также есть эта проблема с ngIf, но ее можно обойти, используя ngShow +, установив громкость на 0)

Я согласен, что это неприятная проблема с Chrome. Я думаю, что это основная причина, по которой этот вопрос оставался открытым в течение 9 месяцев, и над ним почти не работали. Поскольку Chrome вряд ли исправит это, считаете ли вы неразумным создавать опцию очистки кеша? Я думаю, он просто добавит случайную строку в src.

Я также подумал, что это может иметь какое-то отношение к pushState - либо реализация в Chrome, либо ее использование в Angular. Но я искренне думал, что это уже исправлено.

Мне кажется, что эта конкретная проблема, вероятно, относится к системе отслеживания проблем с хромом (я думаю, что уже открыто несколько проблем, связанных с кешем HTMLMediaElement, поэтому стоит поговорить об этом там).

Я не могу вспомнить, но возможно, что это ожидаемое поведение, определенное в спецификации (и это будет не первый раз, когда спецификация запрашивает странное / неудачное поведение)

Это может быть отдельно от проблемы, с которой я столкнулся, но у меня была проблема, когда

Надеюсь, это было в какой-то степени понятным и связанным!

Только что нашел обходной путь. Он работает для Chrome, но не для других браузеров (в некоторых случаях раз за разом и т. Д.) :)
Последний комментарий в
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

В качестве другого примечания, спецификация HTML5 отмечает, что динамическое изменение атрибута src объектане будет иметь никакого эффекта, но сделает то же самое с атрибутом src объекта

После небольшого поиска в Google я обнаружил, что это, скорее всего, связано с тем, что Chrome ожидает, пока доступные сокеты не будут работать с angular, и что добавление preload = "none" к тегу видео, похоже, решило проблему.

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

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

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

@agliottone в предложенном вами

@btford Я согласен, но ..
Он посвятил последнее нечестивым, вы заканчиваете лекарства

+1

Я думаю, что каждый раз, когда устанавливается новый источник, вы должны снова вызывать .load() на нативном элементе видео, чтобы появился новый источник видео.

Привет, у меня проблема с angularJS в Google Chrome, когда я загружаю страницу в первый раз, когда загружается видео HTML 5, но когда я меняю вид с помощью ng-view, он не загружается, но в Firefox Internet Explorer он работает очень хорошо.

Я не знаю, что мне с этим делать!

Это похоже на проблему, аналогичную <embed> и ngSrc . См. № 339

Это нужно исправитьddddddd :(

Я написал plnkr
щелкните видео, видео загрузится. Щелкните другую ссылку, затем вернитесь к видео. Видео ожидает рассмотрения. Вы можете увидеть запросы в chrome network . Два запроса, один предыдущий, все еще поступают. Еще один новый, ожидающий рассмотрения.

@kaiqigong На прошлой неделе я заставил его работать, установив URL-адрес как надежный для видео, поскольку видео не было локальным для веб-сайта.

http://plnkr.co/edit/CL0Lh6VGMy0M3mR1SvVA?p=preview

Я раздвоил ваш plnkr и изменил его, чтобы установить URL-адрес и доверять ему:

   .controller('VideoController', function($scope, $sce, $routeParams){
        $scope.name = "VideoController";
        $scope.params = {
          videoUrl: $sce.trustAsResourceUrl("http://www.videogular.com/assets/videos/videogular.mp4")
        };
   })

На видео есть задержка, но у меня это работает.

@ phillip-haydon, спасибо за ответ.
Я попробовал ваш plnkr, но он все еще не работает должным образом. (Попробуйте быстро переключаться между ссылками.)
Я обнаружил, что когда мы удаляем тег видео (путем изменения маршрута или некоторых других операций DOM), браузер по-прежнему извлекает источник видео. Когда мы вернемся к видео. Делается еще один видео-запрос, который блокирует сетевой трафик.
Если я установлю для src видео значение '' перед удалением тега видео, браузер перестанет получать данные, что решит проблему. Пожалуйста, попробуйте этот код: http://codepen.io/cagegong/pen/bJHAz

Итак, мое окончательное решение:

$scope.$on '$destroy', () ->
  angular.element('video').attr 'src', ''

Да, мой работает, только не на 100%, почему браузер не уничтожает сам запрос, когда запрашивающий его элемент dom уничтожается, я понятия не имею. Я не верю, что Angular должен с этим справиться.

Интересно видеть, что установка пустой строки действительно убивает запрос, хотя мне, возможно, придется что-то настроить, чтобы добавить это в свой проект. Спасибо.

@jharaujoads
Надеюсь, это решит вашу проблему

: +1:

Ух ты, два года и ничего. Angular вообще поддерживается?

Angular не стоит времени и усилий. Они уже сказали сообществу Angular 2.0 «пошел на хуй».

@IDontEatSoap Я не уверен, почему вы коммитов и релизов . Учитывая новый выпуск каждую неделю и несколько коммитов _ в день_, включая выходные, мне кажется, что это в значительной степени поддерживается ...

@ phillip-haydon, пожалуйста, говорите профессионально и сосредотачивайтесь на технических вопросах, вы нарушаете наш кодекс поведения .

@IDontEatSoap @ phillip-haydon, если вы действительно заинтересованы в решении этой проблемы, лучший способ двигаться вперед - это отправить запрос на вытягивание с изменениями кода, которые позволят в будущем работать во всех браузерах.

И все же простой тег видео src не поддерживается?

Мне удалось заставить его работать, выставив $ sde и используя src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}"

Не поймите меня неправильно, мне очень нравится angular. Но такие мелочи, как видео src и теги SVG, которые не поддерживаются и требуют обходных решений, являются неожиданными.

Продолжайте в том же духе :): +1:

+1, невозможно добавить веб-камеру прямой трансляции с динамическими данными.

@ pkozlowski-opensource Меня больше не интересует, потому что теперь я не забочусь об Angular, когда вы отказались от сообщества для V2. Нет смысла тратить на это усилия.

@ phillip-haydon Спасибо за эту информацию. Я просто искал Frontend Frameworks для использования с node.js. Раньше я не слышал о проблеме V2. Я и моя команда решили использовать React.js из-за того, что они нарушают совместимость между V1 и V2. Вы думаете, что огромный раскол, вызванный этим типом мышления в сообществе Python, преподал бы всем урок.

:расстроенный:

@ phillip-haydon и @StevenDStanton - мне жаль слышать, что вы выбрали другой фреймворк, но, конечно, вы должны выбрать инструменты, которые лучше всего

Для ясности: AngularJS не отказался от сообщества, на самом деле сообщество было вовлечено даже больше, чем когда-либо в текущую разработку Angular 1.x. Мы близки к выпуску AngularJS 1.4.0, что будет самым коротким промежутком времени между большими изменениями версии, и в основной команде работает больше членов сообщества, чем когда-либо прежде. Как только эта версия будет выпущена, мы начнем разработку AngularJS 1.5, которая должна (при прочих равных) быть выпущена задолго до конца 2015 года. Помните также, что у Google буквально сотни рабочих приложений, использующих AngularJS 1.x в эксплуатации. прямо сейчас. В интересах Google обеспечить, чтобы эти приложения, так же как и ваши приложения, продолжали жить или проходить путь миграции.

Что касается Angular 2 - эти усилия по разработке основываются именно на отзывах сообщества. Цель состоит в том, чтобы предоставить более быструю, меньшую и более надежную структуру, которая сможет поддерживать более крупные и более сложные приложения; лучше работать на мобильных устройствах; и продолжать охватывать эволюцию веб-браузеров с прозрачной поддержкой веб-компонентов.

Чтобы добиться этого, было невозможно продолжать привязывать вещи к AngularJS 1.x, поскольку нам нужно было переосмыслить некоторые фундаментальные строительные блоки, такие как то, как работают инжектор и компилятор. В результате получился совершенно новый фреймворк, который продолжает продвигать те же высокоуровневые цели, которые сделали AngularJS таким же популярным и надежным, как он стал, но также способный обеспечить надежный путь в будущем на долгие годы.

Возможно, не существует готового решения по обновлению для перехода с AngularJS 1.x на Angular 2, это правда. Но, безусловно, будет легче перейти с AngularJS 1.x на Angular 2, чем с AngularJS 1.x на совершенно другой фреймворк.

Мне кажется, что браузер не очень хорошо отслеживает изменения в атрибуте <source> элемента src . Проблему оригинального плаката можно обойти, используя ng-if .

См. Http://plnkr.co/edit/rpiEg1ki7KXgD40zy8qV

Я просто использую

        $timeout(function () {
            $("video source").attr("src", 'https:' + file.url);
            $("video").attr("src", 'https:' + file.url);
        }, 500);

@ TOT-ра - Я считаю , что ваша версия работает , потому что браузер делает наблюдать изменения в src атрибута на <video> элемента , как можно увидеть здесь: http://plnkr.co/edit / 6dNmNjAvZ8b6t09mUE65

Из спецификации HTML5: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the -source-element

Динамическое изменение исходного элемента и его атрибута, когда элемент уже вставлен в видео- или аудиоэлемент, не будет иметь никакого эффекта. Чтобы изменить то, что воспроизводится, просто используйте атрибут src непосредственно в медиа-элементе, возможно, используя метод canPlayType () для выбора из доступных ресурсов. Как правило, манипулирование исходными элементами вручную после анализа документа является излишне сложным подходом.

Это означает, что вы не можете ожидать, что браузер справится с AngularJS (или чем-то еще в этом отношении), динамически изменяя исходные элементы. Вместо того , что нам нужно , это некоторые конкретные директивы СМИ , которые будут иметь дело с обновлением в <video> тега src свойства , когда это необходимо. Возможно, что-то вроде библиотеки ng-media @caitp .

Что касается проблемы с просьбой о видео не отмененной, я полагаю , что мы могли бы реализовать что - то вроде @kaiqigong идеи «s в https://github.com/angular/angular.js/issues/1352#issuecomment -58865425. Возможно, мы могли бы добавить директиву video element, которая устанавливает src равным "" когда этот элемент уничтожается?

Другие потенциальные библиотеки, которые можно попробовать:

• ngVideo
• видеогуляр

Отписаться. Оставляем AngularJS для React. Извините, ребята, но спасибо за вашу тяжелую работу.

Ага хорошая идея, тоже отписываюсь. Я отказался от AngularJS для http://aurelia.io/

Итак, вернемся к технической проблеме:

На самом деле в этом выпуске обсуждаются две проблемы:

• <video> элемент не отслеживает и не реагирует на изменения в src атрибута на <source> бирок. Это часть спецификации HTML5 и вряд ли изменится в ближайшем будущем. Это означает, что мы не можем использовать идиоматический способ AngularJS динамически указывать элементы <source> с или без ngSrc . Другими словами, мы просто не можем использовать интерполяцию в атрибуте src <source> тега src потому что элемент <video> не получит изменения.
• В некоторых случаях (браузеры) элемент <video> не отменяет свой запрос на правильную загрузку видео, тогда этот элемент удаляется из DOM. Результатом этого является то, что если ваше приложение изменяет DOM достаточно быстро, добавляя и удаляя теги <video> , так что видео не успевает загрузиться, вы можете застрять в ситуации, когда новый <video> Элемент <video> . Кажется, что браузер фактически отменит видео-запрос, если атрибут src (или currentSrc ?) Установлен в пустую строку ( "" ) до того, как элемент будет уничтожен. .

Ни одна из этих проблем сама по себе не является ошибкой AngularJS. Но это не значит, что мы не можем что-то с этим поделать.

По поводу первой проблемы:
Единственный способ исправить это в Angular или любой другой платформе - написать JavaScript для работы с динамически изменяющимися источниками, как описано в спецификации HTML5. Я не видел решения этой проблемы ни в одном из других основных фреймворков, но в AngularJS наиболее привлекательным способом является создание набора директив. Фактически это то, что пытались сделать участники следующих проектов:

• ngMedia
• ngVideo
• видеогуляр

В зависимости от интереса сообщества мы могли бы разработать что-то подобное для Angular 1.5 и упаковать его как отдельный модуль (аналогично тому, как упакован ngCookies ). Давайте вернемся к этому при планировании 1.5. А пока лучшее решение - реализовать одну из вышеперечисленных библиотек и помочь им заставить их библиотеку работать на вас.

По поводу второй проблемы:
Мне кажется, что в настоящий момент я не могу воспроизвести это лично. В моем Chrome он действительно продолжает передавать предыдущее видео <video> elements даже после того, как мы уничтожили элемент, что после некоторого переключения назад и вперед приводит к многочисленным запросам, выполняющимся параллельно, но эти запросы, похоже, не выполняются. предотвратить загрузку нового видео элемента <video> .

Здесь вы можете увидеть несколько одновременных загрузок видео.

Я считаю, что это действительно ошибка в браузере, но пока вы можете обойти это, предоставив свою собственную директиву video (см. Http://plnkr.co/edit/QLMJd24rxvklr638e57Q?p=preview) :

  .directive('video', function() {
    return {
      restrict: 'E',
      link: function(scope, element) {
        scope.$on('$destroy', function() {
          element.prop('src', '');
        });
      }
    };
  })

Здесь вы можете видеть, что загрузка видео теперь останавливается, когда мы уходим от просмотра видео.

На данный момент это рекомендуемый способ решения этой проблемы.

@petebacondarwin ... Если посмотреть на спецификацию w3c, кажется, что прерывание работы с документом пользовательского агента также приведет к прерыванию загрузки потока. Вызов window.stop() отменил для меня дальнейшую потоковую передачу по сети.

В конечном счете, это не самый лучший вариант, если вам нужны другие ресурсы, но он обеспечивает некоторый уровень обходного пути.

@daleyjem благодарит за идею.
Мы не можем сделать это в основной директиве, так как это остановит потоковую передачу других видео.

Просто создайте фильтр:
app.filter ("trustUrl", ['$ sce', function ($ sce) {
функция возврата (записьUrl) {
вернуть $ sce.trustAsResourceUrl (записьUrl);
};
}]);

В файле просмотра:
<audio src = "{{Your_URL | trustUrl}}" элементы управления аудиоплеером> аудио>

ПРИМЕЧАНИЕ: обратите внимание на пространство в теге аудио

Привет, я создатель Videogular.

Как объяснил @petebacondarwin , это не проблема AngularJS, а в основном проблема того, как видео работает в HTML5 и как браузеры обрабатывают видео-запросы. И это становится еще более странным, когда вам нужно, чтобы он работал на мобильных устройствах.

Я много боролся с видео и HTML5 с Videogular, и я должен сказать, что трудно заставить его работать без проблем во всех браузерах, но не невозможно.

Итак, если кому-то из команды AngularJS понадобится помощь в этом вопросе, я был бы рад поделиться своими скромными знаниями по этому поводу и внести свой вклад в их исправление. Это то, что меня действительно раздражает, и в Angular 2 у меня нет проблем с этим, поэтому было бы здорово иметь аналогичный подход в обоих фреймворках.

+1

Если у вас есть директива для вашего видеоплеера, вы можете посмотреть переменную url src и обновить ее вручную:

link: function (scope, element, attrs) {
    var video = element.find('video')[0];
    scope.$watch('source.url', function (val) {
        video.src = val;
    });
}

После тонны проб и ошибок я наконец-то получил надежное воспроизведение видео на Android 4.2.2, 4.3, 4.4.4, 5.0.0 и 5.1.0. Установите Crosswalk и используйте Videogular

Исправлено с помощью настраиваемой директивы

<source ng-repeat="source in sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>


//Html5 video fix
eshop.directive('html5vfix', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            attr.$set('src', attr.vsrc);
        }
    }
});

Я анализирую URL-адрес видео в базе данных с помощью json, но не работает (((пожалуйста, помогите

когда я нажимаю кнопку воспроизведения, видео отображается в перевернутом виде, а при нажатии в полноэкранном режиме он переходит на свое место, любое предложение по этой проблеме

+1 нет никакого анализа URL-адреса, будь то src или ngSrc.
От этой ошибки отказались?

У меня такая же проблема, есть ли решение?

Это решение работает очень хорошо.

http://www.rubencanton.com/blog/2014/07/adding-video-src-with-angular.html