videojs-wavesurfer
videojs-wavesurfer copied to clipboard
collab-project
Safari Rendering Blank Waveforms in Wavesurfer
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
What version of iOS and MacOS @DrLongGhost? Always good to include when reading up on a bug months later.
@thijstriemstra -- I just retested and bug is still present.
Latest iOS (14.4.2) on iPhone 12 Mini
Safari 14.0.3 on MacOS 11.2.3
@thijstriemstra -- I just tested this in Safari Technology Preview -- Safari 14.2 on Mac Big Sur -- and the issue is still present.
I don't know anything about the relevant code but the fact that some mp4s work fine and others dont leaves me to believe this issue might be fixable. Is there any chance you can take a look at some point since it doesnt seem like Apple will be fixing this any time soon?
I just tested this in Safari Technology Preview -- Safari 14.2 on Mac Big Sur
Safari Tech Previews have a version nr, e.g. 121, which one did you try?
Still seeing issue with wavesurfer.js 5.2.0 and Safari Tech Preview 135 (Safari 15.4, WebKit 17613.1.7.3)