Develop Reference

Button to unmute background video

Attempting to use a self hosted video background hero (in wordpress with elemnetor) that auto plays on load but with no sound as it should be muted for both ADA compliance and to be supported by certain web browsers.
I am wondering if it's possible to have a button/icon that unmutes the sound but also restarts the video at the same time so the 30 sec message and sound starts over from the beginning?
Problem:
I have it set up to auto play with no sound and added an icon using this technique and this code (https://elementorcodes.com/elementor-video-background-sound-button/) but how can I trigger a restart at the same time?
Code:
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>

heroBackgroundVideo.currentTime = 0;
heroBackgroundVideo.play();

Video play() doesn't work in Safari

On my site arielledubois.com, I cannot get my homepage video to play in Safari only. Here is the JS code that I have set in place:
setTimeout(function(){
document.getElementById("bgvid").play();
}, 3900);
I've read that Apple blocks autoplay so you have to click to activate the video; but does anyone know a workaround for this?

I think you'd better use 'canplaythrough' event.
var video = document.getElementById("bgvid");
video.oncanplaythrough = function() {
video.play();
};
video.src = "your_video_sourse";

HTML5 Video loadeddata event does not work in IOS Safari

I am trying to trigger an event once a video has loaded the first frame. The code I have used works in desktop browsers that I have tested in but it does not work in mobile safari on IOS. Is there something about the code that is not supported on mobile safari or is there another solution to achieve what I want?
function loadvideo (vidsource){
var vid = document.createElement('video');
vid.src = vidsource;
alert("Video about to load"); //This works fine in mobile safari
vid.addEventListener('loadeddata', function() {
alert("Video Loaded!"); //This does not display in mobile safari
//Will do something else here
}, false);
}

On iOS, it looks like the video doesn't get loaded unless the user hits play, or if the autoplay attribute has been added (which doesn't actually appear to autoplay it).
The following should work for you:
var vid = document.createElement('video');
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
vid.autoplay = true;
vid.addEventListener('loadeddata', function() {[...]}, false);
vid.src = videosource;
Alternatively, you can listen to the progress event instead of loadeddata, which seems to work fine on iOS Safari.

Add preload="metadata" to video tag and then listen to loadedmetadata event. It works in IOS Safari as well

try not to use addEventListener is this case, use older on style, AND set src AFTER you setup an event listener:
...
vid.onloadeddata = function () {
alert("Video Loaded!");
// do something
}
vid.src = vidsource;
...
If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase. - To learn more - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Can't make HTML5 Audio Tag to work on mobile browsers

I have a web app that uses the HTML5 <audio> tag and for some reason, while it works fine on Windows and Mac PCs, it doesn't work on iOS and Android.
Here's a relevant snippet of my code:
Javascript:
var audioElement = document.querySelector('#audioplayer');
var source = document.querySelector('#mp3');
source.src = tokObject._url;
audioElement.load();
audioElement.play();
HTML:
<center>
<audio id="audioplayer" style="width:480px;">
<source id="mp3" src="random-placeholder" type="audio/mp3" />
</audio>
</center>

You normally can't autoplay audio or video files on mobile devices, this is often a restriction by the OSes such as Android and iOS to stop sites from downloading huge media files and autoplaying them.
If such code is called from within a click or touch handler, it will probably work, but not the way you are currently doing it.
Also, the <center> element has been deprecated and you shouldn't use it anymore.

Not sure if this helps but I did this instead and it worked for me. While I am not playing an MP3 I am getting a voice to prompt the user through a loop.
function speak(text) {
var msg = new SpeechSynthesisUtterance();
var voices = speechSynthesis.getVoices();
msg.voice = voices[2];
msg.voiceURI = 'native';
msg.volume = 1;
msg.rate = 1;
msg.pitch = 1;
msg.text = text;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
}
// insert this bottom bit to call the function and it will read in the mobiles native voice what you type in ie....rest works on android have not tried iphone.
speak('rest');

Have you tried it doing this way :
var aud=new Audio(file.mp3);
aud.play();

Audio not playing in Ipad but is playing in laptop

The audio is being played into the laptop and PCs but it is not playing in ipad. I tried in different ipads but it is not playing the audio.
<script>
jQuery(document).ready(function(){
var audioElement = document.createElement('audio');
audioElement.type='audio/mpeg';
audioElement.setAttribute('src', '/*file url over here*/');
audioElement.setAttribute('autoplay', 'autoplay');
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
audioElement.play();
});
</script>

You need to ensure you have made a srcset, that covers all supported codecs on all devices / browsers.
http://en.wikipedia.org/wiki/HTML5_Audio#Supported_browsers

I have found the answer. The $.get(); should be jQuery.get();