This PR fixes autoplay issues in the mobile versions of Firefox, Safari and Edge.
The first fix for Safari was to change the canplay event for the loadedmetadata, as the first one is not supported by Safari, but is supported by every other browser.
The second fix that was required for all the mentioned browsers is to not just set the volume to 0, but also either add the muted attribute to the video element, or to set it with video.muted = true (and also removing it when changing the volume). This is because autoplay is only allowed when videos are muted, setting the volume to 0 mutes the video in chrome, but in other browsers it must be manually set so that the autoplay is allowed. Otherwise, Safari would throw an error:
This PR fixes autoplay issues in the mobile versions of Firefox, Safari and Edge.
The first fix for Safari was to change the
canplay
event for theloadedmetadata
, as the first one is not supported by Safari, but is supported by every other browser.The second fix that was required for all the mentioned browsers is to not just set the volume to 0, but also either add the
muted
attribute to the video element, or to set it withvideo.muted = true
(and also removing it when changing the volume). This is because autoplay is only allowed when videos are muted, setting the volume to 0 mutes the video in chrome, but in other browsers it must be manually set so that the autoplay is allowed. Otherwise, Safari would throw an error: