Support for video.js fluid option about videojs-wavesurfer

[thijstriemstra]

@Chinese1904 you should listen for resize. Take a look at https://github.com/katspaugh/wavesurfer.js/blob/master/plugin/wavesurfer.minimap.js#L121

[thijstriemstra]

In order to have a responsive player, the fluid option should be supported, as described here in this blog post: http://blog.videojs.com/Video-js-5-s-fluid-mode-and-playlist-picker/

Use wavesurfer's debounce method (available since wavesurfer.js 1.3.1) to make the waveform responsive (katspaugh/wavesurfer.js#964).

[chrisbbreuer]

Fluid usually was my go to, but it does not work with wavesurfer, because it seems that the height needs to be set. I will take a look at debounce :-)

[thijstriemstra]

I'm also working on something now, will create a branch with something to test with.

[chrisbbreuer]

Amazing! Looking forward to that!

[thijstriemstra]

@Chinese1904 maybe you can checkout and test the responsive-28 branch. It does scale the player properly (although quite large) but the waveform isn't layered on top of the player anymore, not sure why it floats like that.

[chrisbbreuer]

In the example you still set a height. If I am correct, that height is only for the waves?
The output looks like:

Thanks so much for this improvement. It would be such a nice enhancement!

[thijstriemstra]

Yea the height option should still work in my opinion, but ignoring it should use the max height available in the player. Something that still needs to be fixed. Feel free to hack on it and help implement this.

[chrisbbreuer]

If the height is ignored, the waves will be underneath the player and only visible in full screen mode. As you can see in the screenshot, the waves are not over the player yet. Do you know why this could be?

[thijstriemstra]

It's fixed and available in the adv-plugin-29 branch (that'll become v2.0.0 eventually).

[thijstriemstra]

@Chinese1904 I merged the version 2.0 branch to master and there's now a fluid.html example. Can you checkout git master and see if it works for you?

[thijstriemstra]

I merged the version 2.0 branch to master

videojs-wavesurfer 2.0.0 was released just now that includes fluid support, see https://collab-project.github.io/videojs-wavesurfer/examples/fluid.html

[salmanAhmad143]

HI Team i am struggling an issue while implementing the videojs-wavesurfer. Actaually my requirement is to display the wave along with video togeather. But i didn't find any option into this. Please help me

Thanks

[thijstriemstra]

take a look at the video example @salmanAhmad143: https://collab-project.github.io/videojs-wavesurfer/examples/video.html