фильтр angularjs не разрешает воспроизведение <video>

0

В этой скрипте: http://jsfiddle.net/yncwgu53/40/ Я показываю несколько видео с помощью тега видео с фильтром angularjs. Проблема в том, что когда я фильтрую элемент, который не существует, а затем фильтрует элемент, который существует, окно затушевывается, а элементы управления видео не доступны. например, фильтр для "zz", а затем обратно назад, дважды очищающий диалог фильтра в скрипке. Почему это происходит и как отображать видео как часть фильтрации?

fiddle 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/, но такой же результат.

  • 0
    черные видео не имеют атрибута src ; жесткий код, если он не динамический
  • 0
    @dandavis обновлен с помощью src, но результат тот же, смотрите вопрос об обновлении
Теги:
video

1 ответ

0
Лучший ответ

Вместо этого я использовал 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);
    });

});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню