Audio autoplay not working and no errors in console - html

I have a website and I can't seem to figure out why the audio autoplay is not working.
I do not have errors in the console.
The code seems perfectly fine.
The website is www.galloautocenter.com.br
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>

Your code looks fine but try it like this. Also, you don't specify what browser you're using. IE 8 and below do not support the <audio> tag or any attributes.
<audio class="audio" controls autoplay loop>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>

You can use this
<iframe class="audio" loop autoplay controls>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</iframe>
or if you wanna play in background then,
<iframe class="audio" loop autoplay style = "display:none;">
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</iframe>

I had proper solution for you. You must do any of this two steps.
Check your browser as shown on images, you had blocked Autoplay in browser.
Auto-Play Policy Changes for macOS
Autoplay policy in Chrome
New Policies for iOS
Allow or block media autoplay in Firefox
Second thing you can add this code to you any button on page
<!-- Html part-->
<audio class="audio" loop autoplay="autoplay" controls id="audioelement">
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>
// JavaScript part
var myAudio = document.getElementById("audioelement");
myAudio.play();
It will not work on window.onload = function () { } etc. It will work only on elements where you can interact (Buttons). Or you must allow it in the browser.
<!-- Html part-->
<button onclick="PlayAudio()">PlayAudio</button>
// JavaScript part
function PlayAudio(){
var audio = document.getElementById("audioelement");
audio.play();
}
Third thing you can make player elements visible and user can start or stop music by himself.

Related

Video in React.js not autoplaying

I've tried a few different fixes but I can't figure out why this video I am using in a react app is not playing. I added the autoplay and muted properties but it still won't play. It works perfectly fine when I run it as pure HTML but not with react. Here is the code:
<video width="518" height="518" loop autoplay preload="auto" playsinline="true" style={{maxWidth: "518px"}} muted>
<source src="https://media.tenor.com/f02cT4A-dC4AAAPo/speechless-shocked.mp4" type="video/mp4" />
<source src="https://media.tenor.com/f02cT4A-dC4AAAPs/speechless-shocked.webm" type="video/webm" />
Your browser does not support video.
</video>
autoPlay on video element, is in camelcase in ReactJS

Audio source: net::ERR_CONTENT_DECODING_FAILED

I have an audio source like so:
<audio>
<source crossorigin="anonymous" src="https://c5.rbxcdn.com/978fe05256c23450b0c55c271ff9df58" type="audio/mpeg">
</audio>
But it never loads, and this is shown in the console:
GET https://c5.rbxcdn.com/978fe05256c23450b0c55c271ff9df58 net::ERR_CONTENT_DECODING_FAILED
Any idea? Doing a normal fetch() works fine with no cors errors or such.
It will work in video tag
<video controls="" autoplay="" name="media">
<source src="https://c5.rbxcdn.com/978fe05256c23450b0c55c271ff9df58" type="audio/mpeg">
</video>

html auto play audio not working for some reason

here is my code
<video loop="true" width = "700px" autoplay muted>
<source src="test5.mp4" type="video/mp4">
</video>
<video loop="true" width = "780px" autoplay muted>
<source src="video-copy.mp4" type="video/mp4">
</video>
<audio autoplay>
<source src="video-copy.mp3" />
</audio>
<audio autoplay>
<source src="test5.mp3" />
</audio>
for some reason the audio only plays half of the time ive tried on google chrome and opera but both same results could anyone tell me why
First off, where do you need this code to work ? Is it on a local HTML or PHP file, or on a live website ?
If you want to implement this code on a live website, do you have an SSL contract linked to your domain name (meaning is the URL starting with https:// and not http://)
I read that for security reasons, most browsers block the autoplay of audios and videos if the website is not running with a SSL contract (because the website is not secured).

html5 video tag autoload is not working, how to autoload in chrome or any browser

in this HTML video tag, the autoplay is not working properly, I don't know what's the problem, here is the code and link which this will show the video.
<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
this is the link with the video
https://winmagictoys.com/hairdorables/
Because Chrome don't allow autoplay media onload until user has interacted with the webpage. So you need to add an hidden autoplay iframe with silence sound.
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
You can get silence sound file from here https://github.com/anars/blank-audio/blob/master/250-milliseconds-of-silence.mp3.
So your html code should be
<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
Add muted. If you want to loop, you can use loop
video {
height: auto;
vertical-align: middle;
width: 100%;
}
<video autoplay loop muted controls>
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You have to mute the video to do auto play after changing a browser policy.
Autoplay only work if your video is muted.
<video controls autoplay id="header-video" muted>
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Try this
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
seems like u wanna run it when the page is loaded and that is easily done with js
1st set a function in ur body tag:
<body onload="pageloaded()">
in js: var video = document.getElementById(header-video);
function pageloaded() {
video.play();
}

Automatically play audio in HTML 5

I have music I want to play and loop on the web page startup. Here's my code:
<audio autoplay="autoplay" loop controls="controls">
<source src="music.mp3" />
</audio>
The question that is a "duplicate" does not suit my needs and does not work for me.
I found out what to do using a div with the visibility to hidden
<div style="visibility:hidden">
<audio controls autoplay loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>