search

tim-peterson / videojs-playlist

A plugin to play multiple audio tracks or multiple videos.
Other
71 stars 49 forks source link

Multiple videojs players on the same page #11

Closed OlegTsvirko closed 10 years ago

OlegTsvirko commented 10 years ago

Hello. It's me again.

On plugin's demo page said:"id="XXX-vjs-playlist" //playlist wrapper ID that is specific to the instantiated videojs id, e.g., id="audio-playlist-vjs-playlist". This allows for multiple videojs players on the same page."

I need to use more then one videojs players with different playlists on the same page.

When I use one videojs player with <video id="video-playlist" and <div id="video-playlist-vjs-playlist" it is works perfectly. But when I change 'video-playlist' to any other name, playlists doesn't work. So I can't change id and use several players. What should I do?

tim-peterson commented 10 years ago

Hey Oleh,

On L15 of videojs.playlist.js, you can see that the string "-vjs-playlist" is hardcoded into this file. You can change that to be whatever, but then you'll also have to change the HTML file. I just added that suffix just to make it easier to find the <div> the playlist div in what is often a sea of elements.

OlegTsvirko commented 10 years ago

Well, maybe I'm explained the problem not accurately. I will try to do it with code examples. When I use this code:

<video id="video-playlist" class="video-js vjs-default-skin vjs-big-play-centered" poster="" preload="none" controls="controls" width="720" height="400" data-setup='[]'>
<source src="001.mp4" type="video/mp4" />
<track kind="subtitles" src="eng.vtt" srclang="en" label="English" default="" /></video>
<div id="video-playlist-vjs-playlist" class="vjs-playlist" style="width: 100%;">
<center><a class="vjs-track currentTrack" href="#episode-0" data-index="0" data-src="001.mp4"> source 1 </a><a class="vjs-track" href="#episode-1" data-index="1" data-src="https://copy.com/1KCU8Anc78451210"> source 2 </a></center></div>

playlists switches perfectly, all is good. But when I use this:

<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" poster="" preload="none" controls="controls" width="720" height="400" data-setup='[]'>
<source src="001.mp4" type="video/mp4" />
<track kind="subtitles" src="eng.vtt" srclang="en" label="English" default="" /></video>
<div id="video1-vjs-playlist" class="vjs-playlist" style="width: 100%;">
<center><a class="vjs-track currentTrack" href="#episode-0" data-index="0" data-src="001.mp4"> source 1 </a><a class="vjs-track" href="#episode-1" data-index="1" data-src="https://copy.com/1KCU8Anc78451210"> source 2 </a></center></div>

or any other name of id except 'video-playlist', I can't switch to source 2, playlist doesn't work. And for this reason I can't use multiple videojs players on the same page, because I should use different id's for that.

OlegTsvirko commented 10 years ago

I solved my problem by editing demo.js file. Except of "#video-playlist" in line 4, I also added "#video-playlist2" with the same code. So now I am able to use several players with different playlists for each of them.

tim-peterson commented 10 years ago

Great to hear!