title: working with multiple <video> tags using videojs() function
body: <p>I am trying to run videos on multiple video tags using videojs but woth no results. I am getting the error <code>TypeError: The element or ID supplied is not valid. (videojs)</code> I am initiating different <code>id</code> properties for each <code>&lt;video&gt;</code> tag based on the id's that they have received through a REST based call. </p>
  
  <p>Should I be having an array of videoplayers instead of one as suggested by other links? Here is my source code:</p>
  
  <p>video.js:</p>
  
  <pre><code>(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&lt;$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();
              };
  
          }]);
  })();
  </code></pre>
  
  <p>html file (view using angularjs):</p>
  
  <pre><code>&lt;ion-view id="page17" class=" " ng-controller="Video" ng-init="initialize();"&gt;
        &lt;ion-content class="has-header"&gt;
          &lt;div class="list card" ng-repeat="i in ids"&gt;
            &lt;div class="item item-avatar"&gt;
              &lt;img src=""&gt;
              &lt;h2&gt;{{ titles[i] }}&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class="container" ng-init="specialtiesVideo(i)"&gt;
                &lt;div class="videocontainer"&gt;
                    &lt;video class="video-js" id="{{ i }}" src="{{ videos[i] }}"&gt;&lt;/video&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item tabs tabs-secondary tabs-icon-left"&gt;
              &lt;a class="tab-item" href="#"&gt;
                &lt;i class="icon ion-thumbsup" ng-init="getLikes(i);"&gt;&lt;/i&gt;
                {{ likes[i] }} Likes
              &lt;/a&gt;
              &lt;a class="tab-item" href="#"&gt;
                &lt;i class="icon ion-chatbox" ng-init="getComments(i);"&gt;&lt;/i&gt;
                {{ comments[i] }} Comments
              &lt;/a&gt;
              &lt;a class="tab-item" href="#"&gt;
                &lt;i class="icon ion-share"&gt;&lt;/i&gt;
                Share
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>here are the dependencies in the main index html page:</p>
  
  <pre><code>&lt;link href="lib/video.js/dist/video-js.css" rel="stylesheet"&gt;
  
  &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  &lt;script src="lib/ngstorage/ngStorage.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- cordova script (this will be a 404 during development) --&gt;
  &lt;script src="js/ng-cordova.min.js"&gt;&lt;/script&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
  &lt;!-- OTHER REQUIRED DEPENDENCIES--&gt;
  
  &lt;script src="lib/video.js/dist/video.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
  --&gt;
  &lt;script&gt;
    videojs.options.flash.swf = "/lib/video.js/dist/video-js.swf"
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2s44r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2s44r.png" alt="this is a stacktrace of the error occuring. I am pretty sure that I put in a string as a parameter"></a></p>