We Keep Coding

Allow Audio to Play on Page Load

I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.

Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/

Video don' t start playing but instead throw DOMException

I have just created video object on fly , then add 2 attributes such as source and muted before appending the video object in the document and finally use method play() to play the added video as illustrated below.
let v = document.createElement("video");
v.setAttribute("src","videoplayback.mp4");
v.setAttribute("muted","muted");
document.body.appendChild(v);
v.play().catch((e)=>{ console.log(e)}); // it returns DomException why?
So can someone can tell me What is wrong or solve this for me .
NB :one image of the video is displayed but it is not running..

by default, not just in Chrome but also in Mozilla Firefox and other browsers the video autoplay command is being denied if the Video contains audio and is not muted.
The only way around it is a javascript forced autoplay with audio.
However if you set the video tag to muted="muted" and autoplay the video will still autoplay even if you have set your browser to not to autoplay videos onload.

It's a new feature that has been added to Google Chrome - media (e.g. videos and sounds) cannot be played before the user interacts actively with the page (click). Just add a created variable, put all your code inside a click handler, and create the video if created is false, and set created to true:
let created = false;
$(document).on("click", () => {
if (!created) {
created = true;
let v = document.createElement("video");
v.setAttribute("src","videoplayback.mp4");
v.setAttribute("muted","muted");
document.body.appendChild(v);
v.play().catch((e)=>{ console.log(e)});
}
});

This may seem obvious, however, make sure you don't have an extension installed that is preventing the video from playing. In my case, a site I recently completed has been working fine. I went back to take a look at the site and got this error message: VM476:96 Uncaught (in promise) DOMException: The play method is not allowed by the user agent.
Within a few minutes, I realized I recently installed AutoplayStopper which of course was preventing the video from running auto play.

This is because of your browser default settings. It has set not to play any Audio or video.
Firefox:
https://support.mozilla.org/en-US/kb/block-autoplay

Forcing playback with short HTML5 videos in Safari

I've been running into issues with Safari and the <video> element in combination with shorter high-quality videos. For a showcase website I'm loading 12-15 second .mp4 and .webm files into a <video> container using the <source> element. When trying to play the video in Chrome it works flawlessly and the video start playing almost instantaneously, but Safari appears to want to load the video completely before starting playback.
I have looked into loading the video directly through the src attribute of <video> and have also added the preload="auto" attribute in an attempt to force immediate playback.
I've set up an example using one of the videos we use on the websites, which is around 8 MB and 12 seconds long: https://jsfiddle.net/n1eac46v/
var video = document.getElementById('video');
var source = document.createElement('source');
source.src = "foo.mp4";
source.type = "video/mp4";
video.appendChild(source);
video.on("canplay canplaythrough", video.play);
As you can see I'm also listening for the canplay and the canplaythrough events, but even that doesn't appear to help. I've been looking all over the place for days on end but am running out of options now.

I am not an OS X user so I have no experience with Safari, however I've had the chance to debug mp4 playback in Chrome. Chrome has a buffering window that it tries to fill until it begins actual playback. Safari may have a bigger window. Also since in normal cases all the tables that contain sample positions, durations etc. are at the end of the file browser may want to read them to begin playback. A smart browser can dispatch a read with a byte range header to get only the end of the file and then seek the actual video data, but again I have no idea what safari does.
What you can try is to use MP4Box on your video files to move the meta data and all tables to the beginning, that could help.
As mentioned by OP in the comments using FFmpeg with -movflags faststart (see FFmpeg MP4 options) can also be used to achieve this.

Do I need to refine my reference to the video?

I have used video.js for several videos on two previous projects. The projects were cross browser and work fine.
On project 3 I set up the video reference in a floating div like so...
I get the following error from Firefox on loading the page into the browser...
Media resource tio4.mp4 could not be decoded. tio4.php
All candidate resources failed to load. Media load paused.
I attempt to play the video subsequently with...
videojs("example_video_1").play();
but (of course) it does not play.
Swapping tio4.mp4 with a video from a previous project I have no problems.
Running tio4.mp4 (The video that gives the "could not be coded" error) in Movie Maker shows the video running fine.
Do I need a refinement in my video reference? What else?

The original video (The one giving me the problems) was formatted in an obscure tool.
I put it in Movie Maker and tried saving it which made no difference. I then cut a tiny piece off the Movie and saved it as a "clip" which worked on this one and a subsequent one!

YouTube iframe player getting error code 5

Using the YouTube iframe player in an iOS UIWebView, I'm periodically seeing an onError event with error code 5 ("The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred").
The error is not associated with particular videos (that is, the video throwing the error plays just fine other times). Curiously, the errors often come in bursts: several videos in a row, from different channels, will throw the same error (each in a new UIWebView).
At some point, the error disappears, and the same video can be watched on the device that originally had the error. This has been going on for months.