I tried to make a fan-website for a artist so I wanted to have start page music which automatically plays. But, when I open the start page, my audio file doesn't play.
This is my code:
<audio controls autoplay loop>
<source src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" type="audio/mpeg" />
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
What I need to do to make this start playing automatically?
autoplay is a html standard. It's up to then browser to support it or not. I suspect you used Chrome, like so many others, and were surprised it didn't work.
https://www.w3schools.com/tags/att_audio_autoplay.asp
If you test this code, like I did, in Firefox 63, it will work fine.
Google decided to break the web standard in May 2018:
https://bugs.chromium.org/p/chromium/issues/detail?id=840866#c103
As of 2020, browser defaults mean this won't work in Firefox (all platforms) and Chrome (Android included, but not Mac it seems).
it depends on your browser's [here Firefox]
Autoplay preferences (blocked or not) in
about:preferences#privacy
Related
Take a video like this:
<video autoPlay controls muted preload="metadata" height="100%" width="100%" playsInline>
<source src="https://video.dailymail.co.uk/video/1418450360/2015/02/1418450360_4056782948001_nerdist--1424015378606.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
It has autoPlay, controls, muted, preload, and playsInline.
On Chrome and Safari, the video will not start until some portion of it enters the user's viewport.
On Firefox, the video plays immediately, regardless of whether or not it is in the viewport.
Why?
Here is a codepen that demonstrates this. You'd have to try it on the various browsers to get a sense of what I'm talking about.
From the support of mozilla:
Some kinds of video can be played by Firefox directly. That uses the built-in HTML5 video player, in combination with the Windows Media Foundation (to decode MP4/H.264 video).
So it is default Firefox. I suggest that you could stop all the videos (mutch better user experience) and start when it is visible with JS or change it to <iframe> so the firefox don't mess it. The support suggest you to change hidden settings that help you control when videos start but this will only affect your browser not the others.
code solution with JS to play only when is visible.
Try Incognito Mode · 2. Disable Hardware Acceleration · 3. Allow Websites to AutoPlay Video · 4. Disable Add-Ons · 5. Clear Browser Cache
I want an mp3 file to play automatically when the page loads, but that doesn't happen.. the file only plays when I press the play button.. how do I get it to play automatically?
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
It works with another browser, but is there any way to make autoplay work in Chrome?
Have you tried other browsers?
This should help
https://www.w3schools.com/tags/att_audio_autoplay.asp
Not all browsers support this feature because the code you have written is correct. However, there is another javascript trick that can be used I will suggest you try to use that.
Autoplay mode should be added to the opening tag of your code, this is widely supported by Chrome and FF
You only need to change that mpeg to mp3. Just like this:
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mp3">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
it will work
There are two things that could be wrong.
1) your browser doesn’t support it
2) your file format “mpeg” should be “mp3”
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).