Multiples instances of VideoJS playlist are deprecated

Question

I'm developing a Wordpress Plugin that allows users to add custom video playlists to their pages or posts, and for that I'm using Videojs and Videojs Playlist libraries.

I've successfully managed to add a single playlist into a page, but when a second one is created the first player is disabled. First Player disabled

Other problem I'm facing is that, although the vjs-playlist div is added, it only shows in the first player created. Code display in the browser

      var options = {"techOrder": ["html5","youtube", "flash"]};
      var myPlayer = videojs('my-playlist-player', {options, "autoplay": false, "controls": true, "fluid": true, "liveui": true});
  
      myPlayer.playlist([{
        name: 'Test item 1 type .m3u8',
        description: 'Testing for videojs-playlist-ui integration',
        duration: '45',
        sources: [
          {src: '//vjs.zencdn.net/v/oceans.mp4',type: 'video/mp4'}
        ],
        thumbnail: [
          {
            srcset: '//bcvid.brightcove.com/players-example-content/clouds-1800.jpg',
            type: 'image/jpeg',
            style: 'max-height: 120px;'
          }  
        ]
        },{
        name: resTitle,
        description: resDesc,
        duration: resDuration,//'45',
        sources: [
          {src: resItemSrc, type: resMime}
        ],
        thumbnail: [
          {
            srcset: resThumbnail,
            type: resImgType,
            style: thumbStyle//'max-height: 120px;'
          }  
        ]
        }
        } 
      ]);

      
      console.log(myPlayer.playlist());
      myPlayer.playlistUi({el: document.getElementById('vjs-playlist'), horizontal: true});
      myPlayer.playlist.autoadvance(1);

I believe my errors happen because videojs functions are detecting the same id in all elements, but if so how could I avoid this?

Any other ideas or opinions on why this errors might be happening, would be great.

Thanks in advance.

score 0 · Answer 1 · answered May 15 '19 at 09:26

A bit more of information, I wanted to check how many players the script detected and so I printed in the console the window.videojs.players and only one player is detected even if more are created. Check result

Could this be because they have the same ID? If so how could it be fixed? HTML Result

Multiples instances of VideoJS playlist are deprecated

1 Answers1