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

回答

相關問題