Safari Rendering Blank Waveforms in Wavesurfer #131
Description
Description
Some mp4 videos work fine in all browsers except Safari. In Safari, they fail to render a waveform in Wavesurfer, which remains showing the default flat line. I have also seen it render a waveform incorrectly as a completely flat line except for a tiny bump in the middle (when all other browsers render the waveform normally).
To be clear, though, other mp4 videos work fine everywhere including Safari.
As a general rule, Safari (on Desktop and iOS) does not perform as well as other browsers in standalone Wavesurfer and also in videojs-wavesurfer. There are Safari memory usage issues (in which multichannel recordings can crash wavesurfer) and frequent "your webpage is using up significant memory" warnings shown for longer videos/audio that are not problematic in other browsers. I don't think these performance considerations are causing this bug, however, since I have seen Safari correctly render other mp4 videos that are even longer than some of the ones it has problems with.
As always, thanks for your help with Wavesurfer!
Steps to reproduce
Here is a JSFiddle showing a 4 minute video that will play fine on Safari on Desktop or iOS but will also fail to render in Wavesurfer in those browsers. The JS code is the exact example code from your website: https://jsfiddle.net/dan24678/t410as7r/5/
Here is a direct link to the video used: https://voicevibes.s3-us-west-2.amazonaws.com/static/video/4minvid.mp4
Results
Expected
Wavesurfer should show the waveform after taking several seconds to load.
Actual
Wavesurfer never shows the waveform.
Error output
No visible errors in console.
Versions
wavesurfer: 4.6.0
videojs: 7.11.7
wavesurfer-videojs: 3.6.0
videojs/wavesurfer
wavesurfer-videojs: 3.6.0
Browsers
Latest iOS (14.4.2) on iPhone 12 Mini
Safari 14.0.3 on MacOS 11.2.3