Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tech breaks other video.js players on same page

See original GitHub issue

The WavesurferTech breaks video.js when there are multiple players present on a page. I suggest we remove it and add an option that programatically enables them (so it also works in safari).

It’s already possible to query the tracks at startup of the plugin:

var tracks = player.textTracks();
console.log('tracks', tracks);

0: e {tech_: e, cues_: Array(2), activeCues_: Array(0), src: "media/hal.vtt", ..

Related issue in project that uses this plugin as dependency:

cc @mfairchild365

Here’s an example of how to break it using 2 instances: clicking the progress bar doesn’t work on the 2nd video.js player with a random mp4 file:

diff --git a/examples/index.html b/examples/index.html
index fc08e44..89d2ea4 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -24,6 +24,8 @@
 <audio id="myAudio" class="video-js vjs-default-skin"></audio>
+<video id="myVideo" class="video-js vjs-default-skin"></video>
 var player = videojs('myAudio', {
     controls: true,
@@ -53,6 +55,16 @@ var player = videojs('myAudio', {
 player.on('error', function(error) {
     console.warn('ERROR:', error);
+var player2 = videojs("myVideo", {
+    controls: true,
+    autoplay: false
+}, function() {
+    console.log('second player ready');
+// load example MP4 at startup

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

thijstriemstracommented, May 23, 2018

it adds a non-intuitive extra step

I agree it’s non-intuitive but this plugin does not run without any javascript setup (atm) and I’d like to keep the actual metadata in the audio tag to a minimum, and specify it using the player config.

AFAIK it’s not possible to specify a src of an audio element and use that to render the waveform anyway. so defining the track metadata there is confusing to me because you still define a ‘src’ on the player config, so why not define the texttracks there as well?

Not being able to specify a src of an audio element is something from video.js 4.0 times (when this plugin was created), when it was not possible, or really hard, to override or interact with that src attribute, so I went the all-in javascript route with this plugin. It might be easier today though (with techs etc).

I encourage compatibility with the src of audio elements of course, the simpler the better, and I think this tech might be the way to go, but it cannot interfere with other video.js players as it’s doing now.

As long as it works on Safari, with other players, etc, I’m happy 😉

thijstriemstracommented, Jun 3, 2018

I created #65 and managed to get the text track example work without any other modifications (so both using a <track> element and the dynamic video.js tracks option). The tech was removed because it breaks the player (and introduced high CPU, see #63). We can introduce the tech again if:

  • it properly works for all browsers or
  • it is used as a workaround for Safari only (so you have to manually videojs.registerTech the custom tech in safari)

I think it also doesn’t make sense to try to make text tracks work in Safari, when an even bigger and more important issue (actual normal playback on Safari, see #47) has to be solved before adding other features.

I will open a new ticket for Safari text track support (which will be blocked by #47 but perhaps that also fixes it) and optimize #65 a little more. It’s unfortunate to have to rip out code now but a half-baked solution that resulted in large issues with other plugins and browsers is a bigger problem IMO and it’s hard to move forward this way.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Layout - Video.js
Video.js generally lays out the player to the dimensions that are set as attributes or via CSS, like other DOM elements. However, we...
Read more >
Multiple video.js instances - Stop all playing instances
I use video.js to play my HTML5 video's. I know have multiple instances of the player in the same html-page. I use jQuery...
Read more >
Embedded Videos - Social Plugins - Meta for Developers
To use the Embedded Video Player Plugin, or any other Social Plugin, you need to add the Facebook JavaScript SDK to your website....
Read more >
The 15 Best HTML5 Video Players: A Definitive Guide for 2022
Projekktor is another reliable video player. Projekktor is a free, open-source website video player that is thought to break the mold that many ......
Read more >
Stopping Other Players on the Page when a Video Starts
Start playing one of the videos. Next, play the video in a different player and see that video playback stops in the other...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found