Video demo not showing video with waveform

[chinshr]

In the video example I would expect to see the video playing along with the waveform, instead I only see the waveform

[thijstriemstra]

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 with muted attribute on video 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.

[thijstriemstra]

Also see katspaugh/wavesurfer.js#510 for the wavesurfer related ticket.

[chinshr]

@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.

[thijstriemstra]

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.

[salmanAhmad143]

Is there any option to change the position of wave form to the bottom of video. Please advice.