We Keep Coding

Inconsistent audio playback from audio tag in Safari on laptop

Using React, I'm using JavaScript (play()) to make two audio tags play 2 different .mp3 files (at completely separate times). The .mp3 files are short (less than a second).
import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';
<audio controls muted>
<source src={sound1}></source>
</audio>
<audio controls muted>
<source src={sound2}></source>
</audio>
audio {
display: none;
}
In Safari 13.1.2, on my 13-inch MacBook Catalina, often, one of the sounds plays imperfectly - it's as if the start of the sound isn't heard. Here's a video of me demonstrating what the sound's really like against what it should be like. When the black piece moves, you'll need to turn your volume all the way up to hear a quiet, echoey noise. Then I play you how that file's supposed to sound.
When on my iPhoneX, in Chrome & Safari, the same sound (seemingly) fails to play at all. This may be explained by this SO answer which says that sound won't play unless from a callback from an event handler that involves the user's physical participation e.g. click. This theory fits my case.
My question is similar to this post and this post which got no response. If you think it'd be useful for me to recreate this problem with a Sandbox I could try.
Personal note:
On my 13-inch MacBook Catalina:
on Chrome both sounds work fine.
in Safari, sound2 works imperfectly.
on my IPhoneX:
on Chrome & Safari sound2 is sometimes audible later on.
EDIT:
In this video you can hear me playing back the problematic audio file in Finder. I play it the first time - fine; but the second+ time it makes the same incorrect sound heard in the browser!
Replacing the problematic audio file with a different audio-file brings success - and suggests the problem lies with the audio-file and not my implementation of it in the website. I'm willing to reframe this problem as a poorly performing audio-file but I really don't know. If this were the problem, my only recourse to avoid it would be replaying the audio-file in Finder and making sure it plays a consistent sound.

How can I make a HTML Video Background to play instantly?

currently I have a problem with a project. I have a full HD video I'd like to play in Background. The video is h264 encoded. The Problem is, that the video is quite long, so it has 90MB. But even with my 200MBit connection I have to wait about 5 seconds before the video starts to play.
What can I do to prevent this?
I use this code:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
</video>
I'd like to have the same performance, like Netflix. After a simple click the video just starts.
How is it possible?

There are a few things you can do to help:
1/ optimize the video for fast start. The MOOV atom in an MP4 file is normally at the end which means it has to get to that before it will start playing. Using ffmpeg you can move that to the front:
ffmpeg -i source.mp4 -a:v copy -a:c copy -movflags faststart output.mp4
(this will copy the video and audio with no changes, just change the package)
2/ you could add the preload attribute to the video source to allow the browser to optimize based on it's own rules what pre-loading it's going to do
<video preload="auto" muted loop....>
which will help, but still not give you 'instant' start.
3/ Depending on the size you might want to preload the video into a blob when the page is loading so you can show the 'play' button when it's fully buffered and ready to go. See this answer for a solution (rather than re-typing it here)
4/ Most browsers have support for adaptive streaming (HLS or MPEG-DASH) so you could create fragmented mp4 files which will allow 'instant' start at a low bitrate/quality that ramps up as the browser/video player (eg jwPlayer) detects and adapts to network conditions

HTML5 Player replacing Windows Media Player Plugin

After researching many topics and different fourms I feel at a loss. I understand the answer may be simple but i'm just not seeing it. So without further ado here is what i have going on.
I have a locally hosted webpage that currently if loaded in Internet Explorer plays audio files (WAV format) through Windows Media Player Plugin. Being that Internet Explorer has been removed from 98% of our computers I am looking to make this page more accessible to the users. Therefore my idea was to code a HTML5 player using the audio tags directly on to the page. Now comes the tricky part. The audio WAV files are being delivered to the user from a database.
I have been able to get the player to load by using the following
<audio controls="controls" id="player" type="audio/wav">
Your browser does not support the audio element.
</audio>
and then I modified the code on the audio file to
<span jwcid="#If" condition="ognl:item.recSegment.tape != null">
<button style="border:0px; background-color: transparent;" onclick="document.getElementById('player').play()"jwcid="#Any" src="ognl:item.recSegment.tape.Url">
<center><img jwcid="#Image" image="asset:play" alt="Play"/></center>
</button>
</span>
After making these changes I opened up chrome and nothing happened.
So then I opened up Firefox and when the button is clicked the player controls goes from paused to playing but does not load the file.
So for a final try I loaded up Internet Explorer on a laptop and when the button is clicked the player says "Error:An unkown error occurred".
I feel at a loss here and know it is something simple I am missing. Does anybody have any Ideas?
Nick

Various browsers have differing support for the various codecs. Even though everyone thinks of WAV as just WAV, there are different codecs for that as well as differing bit depths and different browser have varying support for it (Internet Explorer [IE] has no support for WAV).
Firefox won't play .WAV files using the HTML5 <audio> tag?
http://www.w3schools.com/html/html5_audio.asp
According to the Mozilla Developer Network (MDN) the most widely supported formats are MP3 and AAC/MP4:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

MediaElementJS very buggy

Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.

The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.

HTML5 video behavior on mobile devices

I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
But this will again open the video(s) in a seperate window...
Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!
EDIT:
Markup is basic <video>-syntax btw:
<video autoplay loop>
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
<source src="vid.webm" type="video/webm" />
</video>

Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single
audio or video stream at any time. Playing more than one video—side by
side, partly overlapping, or completely overlaid—is not currently
supported on iOS devices. Playing multiple simultaneous audio streams
is also not supported. You can change the audio or video source
dynamically, however. See “Replacing a Media Source Sequentially” for
details.

No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.

YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.

Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none
<video src="vid.mov" preload=”none”></video>
should work.
Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.
EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.