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.

Overriding the Html5 tech causes error on videos without plugins

See original GitHub issue


Can’t play video without wavesurfer set up in plugins.

Steps to reproduce

In the video example, change var player to:

var player = videojs('myVideo', {
    controls: true,
    autoplay: false,
    fluid: false,
    loop: false,
    width: 600,
    height: 300,
    sources: [{ src: 'media/example.mp4' }]

(Remove plugins, add sources, change autoplay)



Video to play normally without wavesurfer plugins set up. (I want to have multiple videos on a page, some with wavesurfer, some without)


Unresponsive controls on video(s) without wavesurfer set up.

Error output

Firefox: _this.activePlayer.activeWavesurferPlugin is undefined Chrome:

Uncaught TypeError: Cannot read property 'on' of undefined
    at new WavesurferTech (videojs.wavesurfer.js:88)
    at e.loadTech_ (video.min.js:6)
    at e.src_ (video.min.js:6)
    at video.min.js:6
    at $t (video.min.js:1)
    at $t (video.min.js:1)
    at e.<anonymous> (video.min.js:1)
    at r (video.min.js:2)

Additional Information

The problem seems to be with overriding the Html5 tech. Changing line 1082 in videojs.wavesurfer.js from _video2.default.registerTech('Html5', _tech2.default); to _video2.default.registerTech('Wavesurfer', _tech2.default); appears to fix this functionality, although videojs.wavesurfer.css is still in effect, which causes the time remaining and fullscreen icon to overlap.


Using video.js 6.5.1 and wavesurfer.js 2.0.0-beta02 with videojs-wavesurfer 2.0.3 in Firefox Developer Edition 58 and Google Chrome 62 on Windows 10

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

everruler12-secondarycommented, Dec 11, 2017

Sounds good, can you make a pull request?

Pull request submitted

thijstriemstracommented, Dec 8, 2017

Perhaps this could be fixed by including this.player.addClass(‘videojs-wavesurfer’); (like here) if the plugin is initialized, and then updating the css file with this class?

Sounds good, can you make a pull request?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Solve The HTML5 Video 'File Not Found' Error?
This post shares how you can solve the HTML5 video 'File Not Found' error problem and videos playable issue. Read to know ways...
Read more >
[7 Fixes]How to Fix Error HTML5 Video File Not Found in 2022?
Fix 1: Update your Browser to the Latest Version to Fix HTML5 Video Not Found · Fix 2: Clean your Browser Cookies ad...
Read more >
HTML5 Video File Not Found? Fix It with 6 Ways [Updated]
When you want to play a video, it's not loaded and gives the error HTML5 video file not found. It affects your mode,...
Read more >
Handling common HTML and CSS problems - MDN Web Docs
Basically, it is a matter of checking whether your HTML and CSS code is well formed and doesn't contain any syntax errors.
Read more >
HTML5 Browser with WebGL support required! - My360
Disable the plugins, restart browser and check the virtual tour. If this works, then one of the plugins is overwriting the WebGL setting...
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