Arbeiten mit mehreren <video> Tags mit videojs() -Funktion

Question

Ich versuche, Videos auf mehrere Video-Tags mit videojs aber woth keine Ergebnisse. Ich bekomme den Fehler TypeError: The element or ID supplied is not valid. (videojs) Ich initiiere verschiedene id Eigenschaften für jedenTag basierend auf der ID, die sie durch einen REST-basierten Anruf erhalten haben.

Sollte ich eine Reihe von Videoplayern statt einer wie von anderen Links vorgeschlagen haben? Hier ist meine Quellcode:

Video.js:

(function() { 
    'use strict'; 

    angular 
     .module('controller.video', []) 
     .controller('Video', ['$scope', 'model', '$sce', function ($scope, model, $sce) { 

      $scope.ids = []; 
      $scope.videos = {}; 
      $scope.titles = {}; 
      $scope.specialtyvideos = null; 
      $scope.likes = {}; 
      $scope.comments = {}; 

      $scope.getVideos = function() { 
       model.get('specialty', 'Colorectal').then(function (res) { 
        $scope.specialtyvideos = res.data; 
        for (var i=0 ; i<$scope.specialtyvideos.length ; i++) { 
         $scope.videos[$scope.specialtyvideos[i]._id] = $sce.trustAsResourceUrl($scope.specialtyvideos[i].src); 
         $scope.titles[$scope.specialtyvideos[i]._id] = $scope.specialtyvideos[i].title; 
         $scope.ids.push($scope.specialtyvideos[i]._id); 
        } 
       }); 
      }; 

      $scope.specialtiesVideo = function (id) 
      { 
       var element = ""+id; 
       console.log(id); 
       console.log(videojs); 
       var vjs = videojs(id); 
       vjs.aspectRatio("16:9"); 
       vjs.autoplay(false); 
       vjs.controls(true); 
      }; 

      $scope.getLikes = function (id) { 
       model.get('likes', id).then(function (res) { 
        $scope.likes[id] = res.data.length; 
       }); 
      }; 

      $scope.getComments = function (id) { 
       model.get('comments', id).then(function (res) { 
        $scope.comments[id] = res.data.length; 
       }); 
      }; 

      $scope.initialize = function() { 
       $scope.getVideos(); 
      }; 

     }]); 
})(); 

html-Datei (Ansicht mit AngularJS):

<ion-view id="page17" class=" " ng-controller="Video" ng-init="initialize();"> 
     <ion-content class="has-header"> 
     <div class="list card" ng-repeat="i in ids"> 
      <div class="item item-avatar"> 
      <img src=""> 
      <h2>{{ titles[i] }}</h2> 
      </div> 
      <div class="container" ng-init="specialtiesVideo(i)"> 
       <div class="videocontainer"> 
        <video class="video-js" id="{{ i }}" src="{{ videos[i] }}"></video> 
       </div> 
      </div> 
      <div class="item tabs tabs-secondary tabs-icon-left"> 
      <a class="tab-item" href="#"> 
       <i class="icon ion-thumbsup" ng-init="getLikes(i);"></i> 
       {{ likes[i] }} Likes 
      </a> 
      <a class="tab-item" href="#"> 
       <i class="icon ion-chatbox" ng-init="getComments(i);"></i> 
       {{ comments[i] }} Comments 
      </a> 
      <a class="tab-item" href="#"> 
       <i class="icon ion-share"></i> 
       Share 
      </a> 
      </div> 
     </div> 
     </ion-content> 
</ion-view> 

hier sind die Abhängigkeiten in den Hauptindex HTML-Seite:

<link href="lib/video.js/dist/video-js.css" rel="stylesheet"> 

<script src="lib/ionic/js/ionic.bundle.js"></script> 
<script src="lib/ngstorage/ngStorage.min.js"></script> 

<!-- cordova script (this will be a 404 during development) --> 
<script src="js/ng-cordova.min.js"></script> 
<script src="cordova.js"></script> 

<!-- OTHER REQUIRED DEPENDENCIES--> 

<script src="lib/video.js/dist/video.min.js"></script> 

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
<link href="css/ionic.app.css" rel="stylesheet"> 
--> 
<script> 
    videojs.options.flash.swf = "/lib/video.js/dist/video-js.swf" 
</script> 

Answer 1

Ich fand die Lösung für mein Problem, als ich feststellte, dass mein angularjs-Code viel schneller ausgeführt wurde als das Rendern der Webseite. Ich habe ein dynamisches Array von Videojs für jedes der vielen Videos verwendet, die ich auf einer Seite spielen musste. (Obwohl ich denke, eine einzelne videojs-Instanz würde tun).

Alles, was ich als nächstes tun musste, war die spezielle Funktion zu verzögern, die $timeout verwendet, die ein Wrapper für window.setTimeout von angularjs ist. Hier

ist der Code-Snippet, das den Fehler beheben:

  $scope.specialtiesVideo = function (id) 
     { 
      var element = id; 
      console.log(id); 
      var confirm = document.getElementById(id); 
      console.log(document.getElementById(id)); 
      $scope.videoplayers[id] = videojs(id); 
      console.log("videojs enabled for the video identified by ID :"+id); 
      $scope.videoplayers[id].aspectRatio("16:9"); 
      $scope.videoplayers[id].autoplay(false); 
      $scope.videoplayers[id].controls(true); 
     }; 

      $timeout(function() { 
      for (var id=0;id < $scope.ids.length;id++) { 
       $scope.specialtiesVideo($scope.ids[id]); 
      } 
      }, 20000); 

wo 20000 ist die Anzahl der Millisekunden ich als Fenster für die Seite gab zu machen und den Stapel nach Hinrichtungen zu löschen, nach der Ausführung I die Funktion im obigen Code gezeigt.