Universal glitch with multiple videos on same page

[xmetal]

I'm surprised that I can find no mention of this issue anywhere, as it seems incredibly basic and common. The problem is that if you have multiple

It appears that multiple controls are created all in the same place on top of each other, not attached to the actual videos.

This is a pretty killer issue for me, as I very much need to display multiple videos on a page all with their proper controls. So far, I can only get one of them to actually have usable controls at a time, by specifically using the addVideos() function instead of setup().

It looks like setup should be going through all the video tags on the page, adding them to an array and then creating a videoJS instance for each but it's obviously not doing it for me. Checked in Chrome, Safari and Firefox. The iPad is even weirder as it overlays standard controls on the custom ones.

Problem shown here: http://teachoct.com/dev/zencoder/demo.html

[vdewani]

Try putting each video in its own "video-js-box" container instead of grouping all of them up in one. It works fine for me.

[r0bdiabl0]

I am having an issue with multiple videos on a single page as well. However, my second video is only displayed using a css pop up window. The second video does not display a poster image as it should and the controls are at the top of the video window until you click play. Very weird.

You can see this live at http://www.lasermedcenter.com.

The second video with the issues can be seen by clicking the Physicians Page link at the top of the site.

Any ideas?

[heff]

Video.js 4.0 is available now, so this issue may be fixed or out of date. If you think it's still an issue, please confirm using 4.0 and reopen.

[harikris2007]

i am also facing the same issue when i added multiple video player in same page.
The js code as follows.
var stream_url = $(this).attr('data-stream'); wiFetchBroadcast(entryId); player = videojs('wiPlayer'); player.src({ src: **stream_url** , type: "application/x-mpegURL", useCueTags: true }); window.onOrientation(player, 'wiPlayer'); player.play();

The video html is like:
Here the player div is generated according to the values returned from an api call used in my project.
In the api ,it returns the video url (stream_url )and i directly assign the url to the js.

<video id="wiPlayer" width=600 height=364 class="video-js vjs-default-skin" controls autoplay="autoplay"> <!-- <source src="media/demo.mp4" type="video/mp4"> --> <p class="vjs-no-js">We're sorry, but your browser doesn't support Video</p> </video>

Here the first player is only playing the video and the rest are not playing.Any solution for this?