angularjsフィルタは<video>の再生を許可していません

このフィドルではhttp://jsfiddle.net/yncwgu53/40/私はangularjsフィルタ付きビデオタグを使用して複数の動画を表示しています。問題は、存在しないアイテムをフィルタリングして存在するアイテムをフィルタリングすると、ウィンドウが黒くなり、ビデオコントロールが使用できなくなるということです。例えば、 'zz'のためのフィルタリングを行い、フィードバックのフィルタダイアログを2回クリアする。これはなぜ発生し、フィルタリングの一環としてビデオを表示するのですか？angularjsフィルタは<video>の再生を許可していません

フィドルSRC：

<body ng-app="myApp"> 

    <div style="margin-bottom:20px"> 

    <input type="text" ng-model="search"> 
    </div> 

     <div ng-controller="myCtrl"> 

    <div style="margin-bottom:20px" ng-repeat="item in items"> 

<video id="{{item.id}}" 
    class="video-js vjs-default-skin" 
    controls 
    preload="auto" 
    width="320" 
    height="264" 
    data-setup='{"techOrder":["youtube"], "src":"https://www.youtube.com/watch?v=xYemnKEKx0c"}'></video> 

       </div> 

</div> 

</body> 


var app = angular.module('myApp', []); 

app.controller('myCtrl', function ($scope , $filter) { 

    $scope.items = [ 
     {id:1, name:'John'}, 
     {id:2, name:'Steve'}, 
     {id:3, name:'Joey'}, 
     {id:4, name:'Mary'}, 
     {id:5, name:'Marylin'}]; 

    $scope.items2 = $scope.items; 

    $scope.$watch('search', function(val) 
    { 
     $scope.items = $filter('filter')($scope.items2, val); 
    }); 

});

更新

追加src属性：

<video id="{{item.id}}" 
    src="https://www.youtube.com/watch?v=xYemnKEKx0c"

更新フィドル：http://jsfiddle.net/yncwgu53/43/が、同じ結果。

出典

2016-07-26 blue-sky

黒のビデオは何の 'src'ます。attribを持っていません。動的でない場合はハードコードしてください – dandavis

@dandavisはsrcで更新されましたが、同じ結果が得られました。 –

私が代わりにIFRAMEを使用し、更新フィドル：http://jsfiddle.net/yncwgu53/55/

SRC：

<body ng-app="myApp"> 



    <div style="margin-bottom:20px"> 

    <input type="text" ng-model="search"> 
    </div> 

     <div ng-controller="myCtrl"> 

    <div style="margin-bottom:20px" ng-repeat="item in items"> 

    <iframe id="{{item.id}}" type="text/html" 
    width="240" 
    height="185" 
    src="http://www.youtube.com/embed/xYemnKEKx0c" 
    frameborder="0"> 
</iframe> 

       </div> 

</div> 

</body> 




var app = angular.module('myApp', []); 

app.controller('myCtrl', function ($scope , $filter) { 

    $scope.items = [ 
     {id:1, name:'John'}, 
     {id:2, name:'Steve'}, 
     {id:3, name:'Joey'}, 
     {id:4, name:'Mary'}, 
     {id:5, name:'Marylin'}]; 

    $scope.items2 = $scope.items; 

    $scope.$watch('search', function(val) 
    { 
     $scope.items = $filter('filter')($scope.items2, val); 
    }); 

});

出典

2016-07-26 21:10:23

angularjsフィルタは<video>の再生を許可していません

答えて

関連する問題