Tech breaks other video.js players on same page

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: https://github.com/collab-project/videojs-record/issues/235

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>
+
 <script>
 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
+player2.src('big_buck_bunny.mp4');
+
 </script>
 
 </body>

[thijstriemstra]

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 😉

[thijstriemstra]

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.