AngularJS - HTML5 비디오가 여러 번로드됩니다.

Question

일부 순차 비디오를 제공하는 AngularJS 앱이 있는데 다른 URL (다른 HTML 참조, href 사용)로 이동하면 이전 컨트롤러가 활성 상태로 유지되고 두 동영상이 계속 재생됩니다. 이것은 내가 열어 놓은 컨트롤러가 동일한 새 페이지마다 여러 개의 비디오 인스턴스를 생성 할 때 발생합니다.

컨트롤러는 비디오 SRC를 수신하고 ng-src을 사용하여 설정합니다.

편집

내가 ID에 의해 비디오 요소를 점점 오전 :

var video = document.getElementById("video"); 

그리고 컨트롤러가 초기화 특파원 소스 설정 :

if (video) { 
    video.src = Modernizr.video.ogg ? $scope.mainVideoUrlogv : 
    Modernizr.video.webm ? $scope.mainVideoUrlwebm : 
    $scope.mainVideoUrlmp; 

    $scope.playVideo(); 
} 

HTML을

<video id="video" ng-mouseup="pauseOrPlayVideo()"> 
    <source ng-src="{{mainVideoUrlwebm}}" type="video/webm"> 
    <source ng-src="{{mainVideoUrlogv}}" type="video/ogv"> 
    <source ng-src="{{mainVideoUrlmp}}" type="video/mp4"> 
</video> 

Answer 1

해결책은 페이지에서 비디오 요소를 제거하는 것이 었습니다.

var video = document.getElementById("video"); 

Mozila documentation about ChildNode.remove() 제거 동작을 수행하는 데 도움이됩니다.

video.remove(); //javascript way 

그러나 마지막 참조에서 알 수 있듯이 IE에서는 작동하지 않는다는 것을 깨달았습니다.

해결책은 jQuery에서이 작업을 수행하는 것이 었습니다.

$('video').remove(); //jQuery way 

내가 테스트 한 브라우저, 즉 Chrome, Firefox Dev Edition 및 IE9, IE10에서 작동합니다.