Comments (5)
Finally found a reasonable approach to this! Use this config:
var options = {
controls: true,
autoplay: false,
fluid: false,
loop: false,
width: 600,
height: 300,
plugins: {
wavesurfer: {
src: 'media/example.mp4',
msDisplayMax: 10,
debug: true,
waveColor: '#336699',
progressColor: 'black',
cursorColor: 'black',
hideScrollbar: true,
// options below are important ones
backend: 'MediaElement',
mediaType: 'video'
}
}
};
And you'll get something like this, all synced up:
I will update the video.html
example with these changes and consider this fixed.
from videojs-wavesurfer.
Is there any option to change the position of wave form to the bottom of video. Please advice.
from videojs-wavesurfer.
If you change the video example by adding a src
attribute to the video
element and disable autoplay
like this:
<video id="myVideo" class="video-js vjs-default-skin" muted src="media/example.mp4"></video>
<script>
var player = videojs("myVideo",
{
controls: true,
autoplay: false,
loop: false,
width: 600,
height: 300,
plugins: {
wavesurfer: {
src: "media/example.mp4",
msDisplayMax: 10,
waveColor: "grey",
progressColor: "black",
cursorColor: "black",
hideScrollbar: true
}
}
});
Then you'll see the video underneath the waveform and both audio and video start playing when you press play.
Unfortunately there are a couple of issues with this:
- the video seems to start a few 100 ms later than the audio. This screws up the player when you press play after it finished for the first time.
both the audio track of the video and the wavesurfer.js webaudio stream play at the same time.(fixed withmuted
attribute onvideo
element)
Hopefully this gives you some pointers on how to possibly work around those issues. The video feature in videojs-wavesurfer was a bonus feature when @katspaugh implemented waveforms for both audio and video files, so it was never my intention to support a use-case like yours, but feel free to open a PR if you manage to hack something together.
from videojs-wavesurfer.
Also see katspaugh/wavesurfer.js#510 for the wavesurfer related ticket.
from videojs-wavesurfer.
@thijstriemstra thanks for your answers on viewing the video along the waveform. The 100ms offset is probably hard to get away with this approach. The other part of my question was how to provide access the the wavesurfer instance, surfer
, but I guess I can add that myself. Thanks again.
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.