HTML5 비디오가 Angular에서 작동하지 않습니다.JSong-src 태그

HTML5 비디오가 Angular에서 작동하지 않습니다.JSong-src 태그

앵귤러 JSng-src이 바이올린의 HTML5 비디오 요소와 함께 작동하지 않습니다. http://jsfiddle.net/FsHah/5/

비디오 요소를 보면, src 태그가 올바른 srcuri로 채워지고 있지만 비디오가 재생되지 않습니다.

AngularJS에서는 지원되지 않는 문제입니까? 해결 방법은 무엇입니까?

필터만 생성:

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

View 파일:

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

비디오를 재생하려면 다음 방법을 사용했습니다. 재생이라는 버튼이 있고 버튼의 ng-click에서 당신은 이것을 써야 합니다.

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

비디오를 재생할 수 있습니다.도움이 되길 바랍니다.

이것은 현재 Angular의 버그처럼 보입니다.JS: https://github.com/angular/angular.js/issues/1352

소스를 다음으로 바꾸기<video ng-src="{{src}}" controls></video>적어도 현재로서는 소스를 비디오에 로드할 수 있는 유일한 방법인 것 같습니다.누군가가 이 문제를 해결하거나 해결책을 제공하기를 바랍니다.

비디오 태그에서 소스 태그를 제거하고 시도합니다.

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

그리고 당신의 각진 앱에서 다음과 같은 필터를 만듭니다.

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

제 답변은 몇 년 늦었지만, 이것은 여전히 해결책을 찾고 있는 사람들을 위한 것입니다.저도 같은 문제가 있었습니다.유튜브가 다른 태그 - iframe을 사용하여 임베디드 비디오를 표시하는 것을 기억했습니다.제가 원하는 속성을 적용했더니 작동했습니다.

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

AngularJS를 처음 접하는 분은 {{video }}가 $scope입니다.이 페이지의 컨트롤에 비디오에 대한 경로가 있는 비디오 변수입니다.

회피책

통제하에

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

내 생각에 지금 일어나고 있는 일은 앵귤러가 채우는 것입니다.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>

이것은 요소를 다음의 존재와 연결시킵니다.fooAJAX 호출을 통해 채워지는 범위 변수입니다.

이것은 Angular의 기본 보안 예방 조치입니다.JS. 자세한 내용은 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);
    });

하지만 그들은 추천하지 않습니다.그러나 다음과 같은 특정 컨트롤러에 사용할 수 있습니다.

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

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

플렁커.

바닐라 js(일반 자바스크립트)를 사용하면 됩니다.onended와 같은 이벤트를 듣고 있다면 $scope 사용을 재고해 보는 것이 좋습니다.$159

예:

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

언급URL : https://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag