Compability with VideoJS library

[ashinojiya]

In my project, I am using videojs librabry (https://videojs.com/) to display video and with that I want to use peak.js to display waveform. For this I have created the video tag and pass the id of the element to mediaElement property but its not loading the waveform and giving the error The mediaElement option should be an HTMLMediaElement.

Video element

<video #target id="videjsEle" class="video-js" controls playsinline preload="true"></video>

Peaks options

 let options: any = {
      zoomview: {
        container: document.getElementById('zoomview-container'),
        showPlayheadTime: true,
        waveformColor: "#979797",
      },
      overview: {
        container: document.getElementById('overview-container')
      },
      mediaElement: document.getElementById('videjsEle'),

      dataUri: {
        arraybuffer: this.spectrographURL,
      },

      waveformCache: true,
      zoomLevels: [256, 512, 1024, 2048, 4096],
      // Random color per segment (overrides segmentColor)
      randomizeSegmentColor: false,
      keyboard: true,
      scrollbar: {
        container: document.getElementById('scrollbar-container'),
        color: '#888',
        minWidth: 100
      },
}

Please let me know if anything I am wrong in this.

[chrisn]

The options object looks OK, assuming you're using v3.0.0-beta - but note that the randomizeSegmentColor option has been removed. I don't recognise the video element #target attribute, though.

What does console.log(document.getElementById('videjsEle')) output?

[ashinojiya]

The options object looks OK, assuming you're using v3.0.0-beta - but note that the randomizeSegmentColor option has been removed. I don't recognise the video element #target attribute, though.

What does console.log(document.getElementById('videjsEle')) output?

It gives video element

[chrisn]

Thank you. But, that's a <div> and not a <video> element. I assume the actual <video> is somewhere inside the <div>.

[ashinojiya]

Ohh okay, I found the video element in it and with that its working fine. Thank you :)