What is the syntax in html to autoplay ".mp3" files with a loop; automatically when start the web page?
I tried with this syntax;
<audio control loop autoplay>
<source src= "music.mp3" type="audio/mpeg">
</audio>
this syntax only loop the audio. it will not start the audio automatically
Alternatively you can try the basic thing to get your need,
<audio autoplay loop>
<source src="yoursource.mp3">
</audio>
thanx to Autoplay an audio with HTML5 embed tag while the player is invisible
You could add a small bit of javascript to auto-play it. Warning: Playing this snippet may be annoying!
var src = "https://www.w3schools.com/HTML/horse.ogg";
function loadaudio(src) {
var myaudio = document.getElementById("horse");
myaudio.autoplay = true;
myaudio.load(src);
};
<body onload="loadaudio();">
<audio id="horse" controls loop>
<source src= "https://www.w3schools.com/HTML/horse.ogg" type="audio/ogg">
</audio>
</body>
Related
I have a MP4 video playing in the background in my web app. However when I update the bindings and change the video source the video stays the same
<video autoplay loop>
<source [src]="videoSrc" type="video/mp4">
</video>
{{videoSrc}}
My TS code:
this.videoSrc = "video.mp4";
...
interval(10000).subscribe(x => {
this.videoSrc = "otherVideo.mp4";
});
Why aren't the bindings being updated?
You should bind the src property in the video tag instead of binding the source tag.
<video autoplay loop muted playsinline="true" webkit-playsinline="true" [src]="videoSrc" type="video/mp4">
</video>
Check this stakblitz https://stackblitz.com/edit/angular-ivy-hlqbza
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();
}
So I've written this piece of music that I would like as background music when browsing my webpage. You should be able to pause it, but I'd like it to play up instantaneously to get some good vibes!
This is my code so far:
<audio controls>
<source src="music.mp3" type="audio/ogg">
</audio>
I get it to play, but as I said - I want it to start play automatically when you load the page!
Thanks in advance!
Add the attribute autoplay
<audio controls autoplay>
<source src="music.mp3" type="audio/ogg">
</audio>
EDIT And to loop it:
<audio controls autoplay loop>
<source src="music.mp3" type="audio/ogg">
</audio>
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.
I'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either be compatible with all 'modern' browsers, or have the option of a polyfill.
Previously I would have done this via Flash and FLVPlayback, but I would prefer to steer clear of Flash in the HTML5 sphere. I'm thinking I could use javascript's setTimeout to create a smooth loop, but what should I use to embed the video itself? Is there something out there that will stream the video the way FLVPlayback would?
The loop attribute should do it:
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The addition of the unintuitive muted attribute is required by Chrome as documented on their dev site.
Should you have a problem with the loop attribute (as we had in the past), listen to the videoEnd event and call the play() method when it fires.
Note1: I'm not sure about the behavior on Apple's iPad/iPhone, because they have some restrictions against autoplay.
Note2: loop="true" and autoplay="autoplay" are deprecated
As of April 2018, Chrome (along with several other major browsers) now require the muted attribute too.
Therefore, you should use
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4" />
</video>
For iPhone it works if you add also playsinline so:
<video width="320" height="240" autoplay loop muted playsinline>
<source src="movie.mp4" type="video/mp4" />
</video>
You can do this the following two ways:
1) Using loop attribute in video element (mentioned in the first answer):
2) and you can use the ended media event:
window.addEventListener('load', function(){
var newVideo = document.getElementById('videoElementId');
newVideo.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
newVideo.play();
});