Comments (14)
@Chinese1904 you should listen for resize
. Take a look at https://github.com/katspaugh/wavesurfer.js/blob/master/plugin/wavesurfer.minimap.js#L121
from videojs-wavesurfer.
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).
from videojs-wavesurfer.
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 :-)
from videojs-wavesurfer.
I'm also working on something now, will create a branch with something to test with.
from videojs-wavesurfer.
Amazing! Looking forward to that!
from videojs-wavesurfer.
@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.
from videojs-wavesurfer.
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!
from videojs-wavesurfer.
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.
from videojs-wavesurfer.
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?
from videojs-wavesurfer.
It's fixed and available in the adv-plugin-29
branch (that'll become v2.0.0 eventually).
from videojs-wavesurfer.
@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?
from videojs-wavesurfer.
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
from videojs-wavesurfer.
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
from videojs-wavesurfer.
take a look at the video example @salmanAhmad143: https://collab-project.github.io/videojs-wavesurfer/examples/video.html
from videojs-wavesurfer.
Related Issues (20)
- Wavesurfer.js region events HOT 3
- Cannot see soundwaves HOT 1
- getPeaks() returns an empty array HOT 6
- autoplay:false but safari recognize it as autoplay HOT 2
- change src (player.src()) bug that duplicate event fire HOT 1
- Using zoom on videojs-wavesurfer HOT 1
- How to use inside a sophisticated react-js app HOT 10
- Cannot read properties of undefined (reading 'params'), Vue3 HOT 11
- Register manually HOT 4
- VIDEOJS: ERROR: Error: HTTP error status: 0 HOT 6
- Big Play Button is not visible HOT 1
- Loading data peaks HOT 1
- Zoom method not found in player.wavesurfer().surfer HOT 2
- Fullscreen mode does not work with wavesurfer plugins
- Waveform on top of a background image
- File size 1.6g Browser crashes
- File size is around 5g, browser crashes, memory exceeds HOT 1
- Support for wavesurfer.js 7.0 or newer HOT 2
- Record button not clickable
- BUG video.min.js:12 VIDEOJS: ERROR: TypeError: Cannot read properties of undefined (reading 'backend') HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from videojs-wavesurfer.