I am trying to write code in html to autoplay sound in ios or chrome device, is it possible?
It depends on the browser.
In general, sounds are blocked until the user has interacted with your page.
From MDN:
Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed.
Autoplay guide for media and Web Audio APIs
Related
I know that Google Chrome has an autoplay policy where videos with audio cannot be autoplayed. How come websites like YouTube and Twich are able to bypass this? How can they autoplay videos with audio?
It looks like they're specially white-listed.
Chrome does this by learning your preferences. If you don’t have
browsing history, Chrome allows autoplay for over 1,000 sites where we
see that the highest percentage of visitors play media with sound. As
you browse the web, that list changes as Chrome learns and enables
autoplay on sites where you play media with sound during most of your
visits, and disables it on sites where you don’t. This way, Chrome
gives you a personalized, predictable browsing experience.
source:
https://blog.google/products/chrome/improving-autoplay-chrome/
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
I have attached this iframe code to my plain html page. here i want to make an auto play when the page is loaded. i tried in firefox its working fine for me . when i load in chrome its not getting the autoplay.
my code is <iframe width="420" height="345" src="https://www.youtube.com/embed/qsP3Y4hHyeM?autoplay=1">
</iframe>
its working fine for firefox browser . but when am loading to the chrome browser its not working.
anybody could you please help me ?
any thing i have to make extra parameters?
Thankyou.
This is a feature introduced by the Chrome development team back in 2018: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
and a related requirement: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe
The article explains what conditions, regarding the embedded audio/video content & regarding the user interaction, are being required in order to make Autoplay functioning:
Muted autoplay is always allowed.
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On mobile, the user has [added the site to their home screen].
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
Media Engagement Index (MEI)
The MEI measures an individual's propensity to consume media on a site. Chrome's current approach is a ratio of visits to significant media playback events per origin:
Consumption of the media (audio/video) must be greater than 7
seconds.
Audio must be present and unmuted.
Tab with video is active.
Size of the video (in px) must be greater than 200x140.
The chrome developer team disabled the autoplay feature to avoid irritation among users because of the automatic video play. You can enable it by the following steps:
Opening a Chrome browser and typing: chrome://flags/#autoplay-policy
Changing the "Autoplay policy" from "Default" to "No user gesture is
required"
Pressing "relaunch"
Rebooting the device
From now on autoplay works again in webview components used in your app.
I'm building a captive portal for free wifi access. When user connects, the CNA pops up in the screen where my portal is loaded.
Problem: HTML5 video is not being displayed in OS X desktop. Even iPhone can show it, desktop doesn't. I cannot even inspect anything in this evil browser (can it be called a browser? I don't think so).
My video code:
<video id="promo-video" height="100%" width="100%" preload="auto" autoplay="" muted="" webkit-playsinline="" playsinline="">
<source src="externalUrlToVideo" type="video/mp4">
</video>
Remember, this very same code shows video on iOS (but doesn't autoplay... for now it's a minor problem).
Some screenshots* that may help some. Video should be played in the right column:
CNA doesn't loads video
What happens when I right-click video then click "Show controls"
Also, when I right-click then click "Open video in a new window", it shows only a video player, but nothing to be showed in it. Obviously, play button doesn't make it work...
You could try adding the type="" attribute to the source. Include the video MIME-type there, e.g.
type="video/mp4"
Also, I don't think video will autoplay on iOS. Historically it has prevented auto-playing because of data charges for downloading video content. I'm not sure if I recently read somewhere that was changing. From a user perspective it's arguably unfair to hammer their data allowance with auto-playing videos even if the aesthetic or UX is improved by it.
Is it possible to play a shoutcast/icecast stream using HTML5?
If so, how should I implement it?
2020 update
Modern browsers don't need any special treatment or server-side workarounds to play audio. Simply use an audio tag with a direct link to one or more stream sources (not a playlist):
<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>
From MDN:
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
Browsers support flac, mp3, vorbis, aac, opus and wav. More details on caniuse.com.
Original post
Add a semicolon to the end of the http request. It IS the protocol set forth by shoutcast to override it's browser detection. Like this:
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
There is a big problem with SHOUTcast, which I suspect is responsible for it not working even in Chrome which is supposed to support MP3.
SHOUTcast can serve three different types of response:
a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an icy-metadata: 1 header.
a plain-HTTP streaming audio response, without extra metadata, for media players with no ICY support.
the “SHOUTcast D.N.A.S. Status” page and other pages on the web interface.
How does it decide whether to serve a web page instead of an audio stream? It guesses whether you're using a web browser. By looking to see whether the User-Agent header starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.
So when Chrome tries to fetch the audio stream to play, SHOUTcast thinks it's a web browser (well... it is) and refuses to give it the audio stream to put in the audio tag. Instead it gets the admin web page.
(I would guess Safari is passing the icy-metadata header to avoid the problem, having specific support for SHOUTcast. I can't test it at the moment as Safari won't play audio or video. Maybe it wants me to install QuickTime for that. Maybe it can go get stuffed.)
So you'll probably need to add a Flash audio player as fallback.
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>
This should work fine, but make sure /; is there after the stream URL and port. If you don't need autoplay, remove the "autoplay" tag.
Yes. But its only work in Safari
<!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>
Cause Opera and Firefox did not support non free Codecs
see here: Is it possible to play shoutcast internet radio streams with html5?
On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.
example:
not working:
http://live-radio01.xxxxxx.com/2TJW/mp3
working:
http://live-radio01.xxxxxx.com/2TJW/mp3/stream
I use Icecast with Easystream for streaming to both mac and pc. A Script Sets up the audio player called MP3 Sticky Player. swf
With the documentation support files the player just loads as below in both cases.
PC
<ul id="playlist" style="display:none;">
<li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
</li>
</ul>
MAC
<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
Your browser does not support the <code>audio</code> element.
</audio>
As we have removed images from any mp3 metadata we use a image loader that grabs the Icy-MetaData (FYI you will need at least PHP 5.4 to run correctly) and matches a directory of cover art for each players song that streams.
On Chrome 9x If your website works over https Your link for shoutcast stream url must be a https url, for example:
<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
Your browser does not support the audio element.
</audio>