Angular.js: ngSrc가 HTML5 비디오 소스 태그에서 제대로 작동하지 않습니다.

나는 문제가 있지만 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 입니다.

누구도이 문제를보고 있습니까 ???

이 문제의 실행 예를 제공 할 수 있습니까?
일부 브라우저에서 작동합니까?
브라우저가 렌더링 후 HTML5 비디오 요소의 src 속성 변경을 지원하는지 확인 했습니까?

죄송합니다. 예제 앱은 아직 게시되지 않았습니다.
Safari에서 잘 작동합니다.
위에서 언급했듯이 ng-src 지시문과 동일한 결과를 가진 하드 코딩 된 src 속성을 모두 사용했습니다.

직선 jQuery로 src를 변경하면 어떻게 되나요?
이것이 AngularJS가 아닌 브라우저의 버그인지 궁금합니다.

2013 년 7 월 16 일 22:31에 Paul Grenier [email protected] 은 다음과 같이 썼습니다.

죄송합니다. 예제 앱은 아직 게시되지 않았습니다.
Safari에서 잘 작동합니다.
위에서 언급했듯이 ng-src 지시문과 하드 코딩 된 src를 모두 사용했습니다.
동일한 결과를 가진 속성.

—
이 이메일에 직접 답장하거나 Gi tHub에서 확인 하세요.
.

src를 변경하지 않아도 (예 : video src 속성을 하드 코딩) 문제가 발생합니다. Angular가 콘텐츠를 제어하기 때문에 Angular에서 문제를 시뮬레이션 할 방법이 없습니다. 동의합니다. Chrome의 문제 일 수 있지만 테스트 방법을 잘 모르겠습니다.

Angular가 콘텐츠를 제어한다는 것은 무엇을 의미합니까?

이 문제는 Angular의 컨트롤러를 사용하여 콘텐츠가 변경되어 다른 뷰를로드 할 때 발생합니다. 뒤로 버튼이나 이전 경로에 대한 링크를 사용하면 이전 콘텐츠가 표시되지만 비디오가 매번로드되지 않습니다. Angular 문제인 경우 Chrome에만있을 수 있습니다. 제 생각에는 Chrome의 공격적인 캐싱과 Angular의 뷰 변경 방법이 무엇을로드해야하는지 동의 할 수 없다는 것입니다.

@AutoSponge 내 테스트 케이스는 다음과 같습니다.
2 페이지로 이동하는 버튼이있는 1 페이지
videojs 플레이어와 1 페이지로 돌아가는 버튼이있는 2 페이지

1 페이지로 이동 한 다음 2 페이지로 이동하면 비디오가 올바르게로드됩니다.
버튼을 클릭하여 1 페이지로 돌아간 다음 2 페이지로 이동하면 Google 크롬이 videojs 사용을 중지합니다. 이는 angular가 예상대로 DOM에서 요소를 제거했을 때 videojs 객체가 제거되지 않았기 때문에 발생합니다. 이것은 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 나는 당신이 이것에 대한 PR을 가지고 있다고 생각했는데, 내 기억이 나에게 실패합니까?

@IgorMinar 작업하려고했지만 문제를 재현 할 수 없다는 것을 깨달았습니다 (http://jsfiddle.net/J77gE/ 참조). 더 많은 바인딩 옵션을 사용하여 코어 외부에 미디어 도우미 모듈을 만드는 것이 재미있을 것이라고 생각했습니다.

하지만 내가 말할 수있는 한, ng-src는 최신 브라우저와 최신 각도의 소스 태그에 대해 잘 작동합니다.

내가 언급 한 문제는 특히 뷰를 변경하고 뒤로 버튼을 사용했기 때문입니다. jsfiddle이 문제를 재현하려는 방법을 잘 모르겠습니다.

요점은 소스 태그를 보간하는 데 문제가 없다는 것입니다. 저는 이것이 문제가 아니라고 생각합니다. 특정 문제를 전혀 재현하지 못했습니다.

@AutoSponge 데모 앱과이를 재현하는 방법에 대한 지침을 제공 할 수 있습니까?

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

비디오 링크를 클릭하십시오. 처음으로로드됩니다. 홈을 클릭 한 다음 비디오를 다시 클릭하십시오. 한두 번 클릭하면 Chrome에서로드가 중지 될 수 있습니다.

(판단하지 마세요, 8 개월 전 앱을 기반으로 이걸 함께 던졌습니다!)

@AutoSponge 이것은 Angular 문제가 아닙니다. Chrome의 이상한 동작이지만 여전히 소스 파일을 보간하고 올바른 src를 가져옵니다. 캐싱에 문제가있는 것 같습니다. 약간 안타까운 일입니다. (ngIf에도이 문제가 있지만 ngShow + 볼륨을 0으로 설정하면이 문제를 피할 수 있습니다.)

Chrome의 안타까운 문제라는 데 동의합니다. 이것이이 문제가 거의 작업없이 9 개월 동안 열려있는 주된 이유라고 생각합니다. Chrome이 문제를 해결할 가능성이 없기 때문에 캐시 무효화 옵션을 만드는 것이 부당하다고 생각하십니까? src에 임의의 문자열을 추가 할 것이라고 생각합니다.

또한 Chrome에서 구현하거나 Angular에서 사용하는 것과 같은 pushState와 관련이있을 수 있다고 생각했습니다. 하지만 솔직히 지금 쯤이면 해결 될 거라고 생각했습니다.

이 특정 문제는 아마도 크롬 문제 추적기에 속한다고 생각합니다 (HTMLMediaElement 캐시 관련 문제가 이미 열려 있다고 생각하므로 거기에서 이야기 할 가치가 있습니다).

기억할 수는 없지만 이것이 사양에 정의 된 예상 동작 일 가능성이 있습니다 (사양에서 이상한 / 불행한 동작을 요청한 것은 처음이 아닐 것입니다).

이것은 내가 겪었던 문제와 별개 일 수 있지만

다소 이해하기 쉽고 관련이 있기를 바랍니다!

몇 가지 해결 방법을 찾았습니다. 크롬에서는 작동하지만 다른 브라우저에서는 작동하지 않습니다 (경우에 따라 시간이 지남에 따라). :)
마지막 댓글
http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome

또 다른 참고로 HTML5 사양은태그는 효과가 없지만 src 속성에 대해 동일한 작업을 수행합니다.

약간의 인터넷 검색 후 나는 이것이 사용 가능한 소켓이 각도를 이루지 않기를 기다리는 크롬과 가장 관련이 있으며 비디오 태그에 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 귀하가 제안한 해결 방법은 나쁜 관행을 사용합니다. 그런 컨트롤러에서 DOM에 쓰면 안됩니다. 사용자 지정 지시문 사용을 고려하십시오.

@btford 1 동의하지만 ..
그는 마지막 악인을 바쳤습니다.

+1

새 소스가 설정 될 때마다 새 비디오 소스가 표시되도록하려면 네이티브 비디오 요소에서 .load() 를 다시 호출해야합니다.

안녕하세요 저는 HTML 5 비디오가 처음로드 될 때 페이지를로드 할 때 Google Chrome에서 angularJS에 문제가 있지만 ng-view로보기를 변경하면로드되지 않지만 Firefox에서는 인터넷 익스플로러가 잘 작동합니다.

나는 그것에 대해 내가 무엇을해야하는지 모른다!

이는 <embed> 및 ngSrc 와 유사한 문제처럼 보입니다. # 339 참조

이것은 고쳐야 할 neeeeeeds입니다 .ddddddd :(

나는 plnkr을 썼다
동영상을 클릭하면 동영상이로드됩니다. 다른 링크를 클릭 한 다음 비디오로 돌아갑니다. 동영상이 보류 중입니다. 크롬 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 자체가 처리해야 할 것이라고 생각하지 않습니다.

빈 문자열로 설정하면 요청이 죽는다는 것을 보는 것은 흥미 롭습니다. 내 프로젝트에 추가하기 위해 무언가를 설정해야 할 수도 있습니다. 감사.

안녕하세요.
이것이 문제를 해결하기를 바랍니다.

: +1 :

와, 2 년만에 아무것도. 각도가 전혀 유지되고 있습니까?

Angular는 시간과 노력의 가치가 없습니다. 그들은 이미 Angular 2.0으로 커뮤니티에 "fuck you"라고 말했습니다.

@IDontEatSoap 이 질문을 왜 가져 왔는지 모르겠지만 커밋 및 릴리스 목록을 확인하십시오. 매주 새로운 릴리스가 있고 주말을 포함하여 하루에 몇 번의 커밋이 주어지면 거의 유지되는 것처럼 보입니다 ...

@ phillip-haydon은 대화 전문가를 유지하고 기술적 문제에 집중하십시오. 귀하는 당사 의 행동 강령을 위반하고

@IDontEatSoap @ phillip-haydon이 문제를 해결하는 데 관심이 있다면 앞으로 나아가는 가장 좋은 방법은 모든 브라우저에서 향후 작업을 수행하는 코드 변경 사항이 포함 된 풀 요청을 보내는 것입니다.

하지만 간단한 동영상 src 태그가 지원되지 않나요?

$ sde를 노출하고 src = "{{$ sce.trustAsResourceUrl (item.VideoUrl)}}"를 사용하여 작동하도록 관리했습니다.

오해하지 마세요. 저는 앵귤러를 정말 좋아합니다. 그러나 비디오 src 및 SVG 태그와 같은 작은 것들이 지원되지 않고 해결 방법이 필요한 것은 예상치 못한 일입니다.

좋은 일을 계속하십시오 :) : +1 :

+1, 동적 데이터가있는 라이브 스트림 웹캠을 추가 할 수 없습니다.

@ pkozlowski-opensource V2에 대한 커뮤니티를 버리고 이제 Angular를 신경 쓰지 않기 때문에 더 이상 관심이 없습니다. 노력을 낭비하는 데는 0 점이 있습니다.

@ phillip-haydon 그 정보에 감사드립니다. 나는 node.js와 함께 사용할 Frontend Frameworks를 찾고있었습니다. V2 문제에 대해 들어 본 적이 없습니다. 나와 내 팀은 V1과 V2 간의 호환성을 깨는 방식으로 인해 React.js를 사용하기로 결정했습니다. 파이썬 커뮤니티에서 이러한 유형의 사고가 야기한 거대한 균열이 모든 사람에게 교훈을 주었을 것이라고 생각합니다.

:실망한:

필립-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에서 완전히 다른 프레임 워크로 마이그레이션하는 것보다 AngularJS 1.x에서 Angular 2로 마이그레이션하는 것이 확실히 더 쉬울 것입니다.

브라우저가 <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-ra-브라우저가 <video> 요소의 src 속성에 대한 변경 사항을 여기에서 볼 수 있기 때문에 귀하의 버전이 작동한다고 생각합니다 : 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 속성 업데이트를 처리 할 미디어 특정 지시문이 필요합니다. 아마도 @caitp 의 ng-media 라이브러리의 줄을 따라가는 것일 수 있습니다.

취소되지 않는 비디오에 대한 요청의 문제에 관해서는, 나는 우리가의 아이디어를 @kaiqigong 같은 것을 구현할 수 있음을 시사 https://github.com/angular/angular.js/issues/1352#issuecomment -58865425합니다. 요소가 소멸 될 때 src 를 "" 설정하는 video 요소 지시문을 추가 할 수 있습니까?

시도 할 수있는 기타 잠재적 라이브러리 :

• ngVideo
• videogular

구독 취소. React를 위해 AngularJS를 떠납니다. 죄송하지만 수고 해주셔서 감사합니다.

네 좋은 생각입니다. 저도 구독을 취소합니다. http://aurelia.io/를 위해 AngularJS를 버렸습니다.

따라서 당면한 기술 문제로 돌아갑니다.

이 문제에서는 실제로 두 가지 문제가 논의되고 있습니다.

• <video> 요소는 <source> 태그의 src 속성에 대한 변경 사항을 모니터링하거나 이에 반응하지 않습니다. 이것은 HTML5 사양의 일부이므로 가까운 장래에 변경되지 않을 것입니다. 즉, ngSrc 사용 여부에 관계없이 <source> 요소를 동적으로 지정하는 관용적 AngularJS 방식을 사용할 수 없습니다. 즉, <video> 요소가 변경 사항을 선택하지 않기 때문에 <source> 태그의 src 속성에서 보간을 사용할 수 없습니다.
• 경우에 따라 (브라우저) <video> 요소가 동영상 다운로드 요청을 올바르게 취소하지 않은 다음 요소가 DOM에서 제거됩니다. 그 결과 애플리케이션이 DOM을 충분히 빠르게 변경하고 <video> 태그를 추가 및 제거하여 동영상을 다운로드 할 시간이없는 상황에서 새로운 <video> 가 발생하는 상황에 갇힐 수 있습니다. <video> 요소에서 아직 보류중인 동영상에 액세스하려고합니다. 요소가 파괴되기 전에 src (또는 currentSrc ?) 속성이 빈 문자열 ( "" )로 설정되면 브라우저가 실제로 동영상 요청을 취소하는 것 같습니다 currentSrc .

이러한 문제 중 어느 것도 AngularJS의 버그가 아닙니다. 그러나 그것이 우리가 그것에 대해 뭔가를 할 수 없다는 것을 의미하지는 않습니다.

첫 번째 문제에 대해 :
Angular 또는 다른 프레임 워크에서이 문제를 해결하는 유일한 방법은 HTML5 사양에 설명 된대로 동적으로 변경되는 소스를 처리하는 JavaScript를 작성하는 것입니다. 나는 다른 주요 프레임 워크에서 이것에 대한 해결책을 보지 못했지만 AngularJS에서 가장 매력적인 방법은 일련의 지시문을 작성하는 것입니다. 이것은 다음 프로젝트의 사람들이 효과적으로 시도한 것입니다.

• ngMedia
• ngVideo
• videogular

커뮤니티의 관심사에 따라 Angular 1.5와 비슷한 것을 개발하고 자체 모듈로 패키징 할 수 있습니다 ( ngCookies 가 패키징되는 방식과 유사 함). 1.5 계획을 수행 할 때 이것을 다시 살펴 보겠습니다. 그동안 최선의 해결책은 위의 라이브러리 중 하나를 구현하고 라이브러리가 귀하를 위해 작동하도록 돕는 것입니다.

두 번째 문제에 대해 :
지금은 개인적으로 재현 할 수없는 것 같습니다. 내 Chrome에서는 실제로 요소를 파괴 한 후에도 이전 <video> 요소 비디오를 계속 스트리밍합니다. 일부 전환 후 여러 요청이 병렬로 실행되지만 이러한 요청은 그렇지 않은 것 같습니다. 새 <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) {
return function (recordingUrl) {
return $ sce.trustAsResourceUrl (recordingUrl);
};
}]);

파일보기에서 :
<audio src = "{{Your_URL | trustUrl}}"audioplayer controls> audio>

참고 : 오디오 태그의 공간에 유의하십시오.

안녕하세요, 저는 Videogular의 제작자입니다.

@petebacondarwin이 설명했듯이 이것은 AngularJS의 문제가 아니라 대부분 HTML5에서 비디오가 작동하는 방식과 브라우저가 비디오 요청을 처리하는 방식의 문제입니다. 그리고 모바일 장치에서 작동해야 할 때 더욱 이상해집니다.

저는 Videogular를 사용하여 비디오와 HTML5로 많이 싸웠으며 모든 브라우저에서 원활하게 작동하도록하기는 어렵지만 불가능하지는 않습니다.

따라서 AngularJS 팀의 누군가가 이것에 대한 도움을 원하면 이에 대한 겸손한 지식을 공유하고 수정에 기여하게되어 기쁩니다. 이것은 정말 나를 괴롭히는 것입니다. Angular 2에서는 이것에 문제가 없으므로 두 프레임 워크에서 비슷한 접근 방식을 사용하는 것이 좋습니다.

+1

비디오 플레이어에 지시문이있는 경우 src url 변수를보고 수동으로 업데이트 할 수 있습니다.

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

İ json을 사용하여 db의 URL 비디오를 구문 분석하지만 작동하지 않습니다 (((도와주세요

내 재생 버튼을 클릭하면 비디오가 거꾸로 표시되고 전체 화면을 누르면이 문제에 대한 제안이 있습니다.

+1 src 또는 ngSrc로 URL을 구문 분석하지 않습니다.
이 오류가 취소 되었습니까?

이 같은 문제가 아직 해결 되지 않았습니다.

이 솔루션은 매우 잘 작동합니다.

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