angularjs过滤器不允许<video>播放

在此小提琴中：http://jsfiddle.net/yncwgu53/40/我使用带有angularjs过滤器的视频标记显示多个视频。问题是，当我过滤不存在的项目，然后过滤一个确实存在的项目时，窗口变黑，并且视频控件不可用。例如过滤'zz'，然后退格两次，清除小提琴中的过滤器对话框。为什么会出现这种情况，以及如何将视频作为过滤的一部分显示？angularjs过滤器不允许<video>播放

小提琴源：

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

源：

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

回答

相关问题