HTML5 비디오는이 바이올린에 HTML5 비디오 요소와 작동하지 않습니다 AngularJS와의 NG-SRC 태그

Question

AngularJS와 ng-src 작동하지 않습니다 : http://jsfiddle.net/FsHah/5/

비디오 요소에서 보면, SRC 태그는 올바른 SRC의 URI로 채워되고있다 동영상은 재생되지 않습니다.

not supported이 AngularJS인데,이 문제를 해결하려면 어떻게해야합니까?

Answer 1

그냥 필터 만들기

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

Answer 2

이 현재 AngularJS와의 버그처럼 보인다 : <video ng-src="{{src}} controls></video>와 https://github.com/angular/angular.js/issues/1352

교체 소스는 적어도 비디오에 소스를로드 할 순간에있는 유일한 방법이 될 것으로 보인다. 잘하면 누군가가이 문제를 해결하거나 일종의 해결 방법을 제공하기 위해 주위에 온다.

Answer 3

나는 ajax 호출을 시도했지만 전혀 작동하지 않는 것 같다. 나는 $ scope.src가 ajax 호출 이후에 올바른 값을 가지고있는 것을 본다. ng-src는 업데이트를 얻지 못한다.

$ apply와 함께 $ timeout을 시도했지만 여전히 아무 것도하지 않았습니다. 누구든지이 문제를 파악합니까?

Answer 4

비디오를 재생하려면 그냥 버튼라는 놀이를하고 버튼의 NG-클릭으로 당신은 NG 반복 사용 에서 비디오를 재생하려면이

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

를 작성해야 다음과 같은 방법을 사용 색인. 도움이 되길 바랍니다. 컨트롤러

Answer 5

해결

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

Answer 6

내 응답이 늦게 몇 년이지만,이 여전히 해결책을 찾고있는 사람입니다. 나는 같은 문제가 있었다. YouTube에서 다른 태그 인 iframe을 사용하여 삽입 된 동영상을 표시한다는 사실을 기억했습니다. 내가 원했던 속성을 적용했고 효과가있었습니다.

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

는 AngularJS와 새로운 사람이 들어, {{비디오}} 비디오에 대한 경로가이 페이지에 대한 제어 달러 (A $)의 scope.video 변수입니다.

Answer 7

이것은 AngularJS의 기본 보안 예방 조치입니다. 세부 사항을 참조하십시오 https://docs.angularjs.org/api/ng/service/ $의 SCE

은 '엄격한 상황 이스케이프'compeletly 당신은 그들이하지 않는 것이 좋습니다 그러나

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { 
     // Completely disable SCE. For demonstration purposes only! 
     // Do not use in new projects. 
     $sceProvider.enabled(false); 
    }); 

파일 당신의 app.js이를 정의 할 수 있습니다를 사용하지 않으려면. 그러나이 같은 spesific 컨트롤러에 사용할 수 있습니다

var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home', function ($scope, Home) { 
$scope.Home = Home.query(); }]).config(function($sceProvider) { 
$sceProvider.enabled(false); }); 

Answer 8

그냥이 작품을 만들기 위해 바닐라 JS (일반 자바 스크립트)를 사용합니다. onended와 같은 이벤트를 듣고 있다면 $ scope. $ apply()를 사용하여 다시 생각해 볼 수 있습니다.

내 예 :

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

Answer 9

당신은 ng-media 모듈을 사용할 수 있습니다.

Plunker

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>

.

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

파일보기에서 :

Answer 10

나는 그래서, 및 요소가 페이지에 추가 한 후 무엇을 일어나는 것은 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> 

이것은 AJAX 호출을 통해 채워 범위 변수가 존재입니다 foo의 존재에 묶여 요소를합니다. 비디오 태그에서

Answer 11

제거 소스 태그와이 시도 ..

<video controls preload=auto ng-src="{{videoURL| trustUrl}}" poster="{{thumbnailUrl}}"></video> 

하고 각 응용 프로그램에

이 밖으로 http://stackoverflow.com이

app.filter("trustUrl", function($sce) { 
      return function(Url) { 
       console.log(Url); 
       return $sce.trustAsResourceUrl(Url); 
      }; 
     });