Question

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

小提琴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/但结果相同。

Answer 1

我使用了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);
    });

});

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

1 个答案: