My aim is to autoplay a song on a website in Chrome and Safari, but it is not working. I found a trick to use an iframe with a silence.mp3 before playing the audio tag, but it also did not work.
My code:
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none" type="audio/mp3"></iframe>
<div style="position: fixed; left: 0px;top: 0px;">
<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3">
<source src="song.mp3">
Your browser does not support the audio element.
</audio>
</div>
Is there anything I can do about that?
You cant - User interaction is needed to allow play/autoplay media with sound.
Add muted attribute
<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3" muted>
...
</audio>
Audio will start to play only without the sound. Then allow user to switch sound on with JS.
EDIT
It seems that this is no longer working with audio tag
Tested with video
<video controls muted autoplay>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-13.mp3"/>
</video>
Related
What to change to work on Iphone? In chrome it work.
<video class="video"
autoplay loop preload muted playsinline
poster="#/assets/video/posters/02.png"
>
<source
src="https://drive.google.com/uc?export=download&id=1-SKkq6GLCPXc3MeSvsWED12GK6NkR_Tp"
type="video/mp4"
>
</video>
<video width="100%" playsinline preload="metadata" style="object-fit: cover;height:100%" muted="true" autoplay="true">
<source src="{{video_url}}" type="video/mp4"/>
</video>
On a Shopify site, I have a section with Video Background without audio (also muted). playsinline attribute was added.
Does anyone know how to fix this problem?
I am trying to figure out why the video is not autoplaying in IOS devices?
<div class="video-container">
<video id="intro-video" video-src="https://www.w3schools.com/html/mov_bbb.mp4" poster="" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="1600" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="900" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="480" playsinline autoplay muted loop>
</video>
Playsinline is already added as described in the IOS video documentation
webkit-playsinline is not added
Most modern web-browsers don't allow to auto-play audio and video if there is no interaction from the user, as a click on the webpage.
I want to display a video on my Homepage. I have used the following code:-
<video class="center" autoplay muted>
<source src="Images/Introduction.mp4" type="video/mp4" />
<source src="Images/Introduction.ogg" type="video/ogg">
Your browser does not support the <code>video</code> tag </video>
But the video is not displayed on my HomePage when I run my project.
I have tried your code in my editor it is working, I think you're not giving the proper source for a video that is why it won't work.
please have a look at this for reference http://www.w3schools.com/html/html5_video.asp.
If it's not working check the path of the file
video {
height: auto;
vertical-align: middle;
width: 100%;
}
<video autoplay loop muted>
<source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Here is my code of video tag but it is not working properly on page load, should i need any preloader to autoplay the video on page load`
<video id="video_player" width="100%" autoplay="1">
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
If you just want to autoplay video:
<video id="video_player" width="100%" autoplay>
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
Here is more about it: https://www.w3schools.com/tags/att_video_autoplay.asp