I want to autoplay my online radio but can't seem to fixed it.
Autoplay="true" autoplay="1" doesnt work
I got this shortcode
[html5radio radiolink="http://server:port/" radiotype="shoutcast" bcolor="000000" image="" title="Stream Title" artist="Stream Artist" facebook="http://www.facebook.com/radioforgecom" twitter="http://twitter.com/radioforgecom"]
and this
< iframe src="https://player.radioforge.com/v2/shoutcast.html?radiolink=http://server:port/&radiotype=shoutcast&bcolor=000000&image=&facebook=http://www.facebook.com/radioforgecom&twitter=http://twitter.com/radioforgecom&title=Stream Title&artist=Stream Artist" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="367" height="227"></iframe>
After trying codes that I can think of, the video is still not autoplaying.
Auto-playing audio is something that browsers are trying to do away with. In order for audio to be allowed to play, the user must first interact with the page in some way. See this post about Chrome’s autoplay policy.
Related
googles just updated there "Autoplay Policy Changes" but I want to implement a muted auto-playing Vimeo background video and after reading the article I believed adding the following to the iframe would work.
chrome version: 68
allow="autoplay; fullscreen"
but no luck and I'm not sure what else to try other then the JS API which i don't even know if it will make a difference.
<iframe src="https://player.vimeo.com/video/265188275?autoplay=1&loop=1&autopause=false&byline=false&title=false&byline=false&frameborder=0" allow="autoplay; fullscreen">
thanks in advance for any helpful advice.
If you're using the Vimeo embedded iframe player as a background video, you should use the embed code with the background parameter instead of the autoplay and loop parameters:
<iframe src="https://player.vimeo.com/video/76979871?background=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The background parameter will hide all player buttons and elements (play/pause, playbar, title, byline, etc.), loop the video, autoplay the video, and mute the video. That last part is important - by default, Chrome will always allow muted videos to autoplay. For videos to autoplay with audio turned on, Chrome uses a "Media Engagement Index" to determine if the viewer actually wants or expects video with audio to autoplay when navigating to your page. That whole process is documented by Google here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The background parameter of the Vimeo Player is documented here: https://help.vimeo.com/hc/en-us/articles/115011183028-Embedding-background-videos
since some days my vimeo iframe will not autoplay anymore. I know the chrome update, which will block autoplay videos with sound. Is the block already active?
The Vimeo Example code doesn't work:
<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
But netflix.com and vimeo itself has an autoplay video on the homepage, which works.
EDIT: Chrome version 66.0.3359.139 macOS High Sierra 10.13.4
Does anyone have an idea or answer?
Thanks!
Annotating the <iframe> with an allow attribute worked for me:
<iframe ... allow="autoplay; fullscreen"></iframe>
It's called "Iframe delegation" and is described here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes.
You need to add &muted=1 to the iFrame src path and you need to add the attribute allow="autoplay" to the iFrame. Now the Vimeo video starts automatically again in Chrome.
yes, according to their documentation it is.
https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
EDIT:
Advance browsers like FireFox, Chrome and Safari are now blocking video autoplay by default.
CHROME Auto-Play Policy:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The Media Engagement Index, or MEI for short, a way of Chrome is to allow AutoPlay audio on your page to be based on your previous interactions with this webpage as a user. You can see what this looks like by going to
chrome://media-engagement/
MEI is calculated per user profile, and is persisted to incognito mode.
WEBKIT/SAFARI Auto-Play Policy:
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
FIREFOX Auto-Play Improvements:
https://www.ghacks.net/2018/09/21/firefox-improved-autoplay-blocking/
NOTE:
Don’t assume a media element will play, and don’t show the pause button from the start. Look at the Promise returned by the play function on HTMLMediaElement to see if it was rejected:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
Autoplay + Mute + Start at time x sec =
<div>
<iframe src="https://player.vimeo.com/video/342787403?&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&#t=235s" style="position:absolute;top:0;left:0;width:100%;height:100%;" width="1400" height="900" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
#t parameter must be the last one.
Now the autoplay video just works if the audio is muted, you need to add the muted parameter into your api or iframe code &muted=1, you can change your browser preferences to allow autoplay unmuted videos:
chrome://flags/#autoplay-policy
Change the default option to "No user gesture is required"
If the user clicks the video you can unmuted it!!
If you are paid member and want to use video as a background, this is probably what you need:
?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.
Or, if you are not:
?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.
BUT, I still can't make it work on the phone.
muted parameter fixed my issue:
<iframe src="https://player.vimeo.com/video/xbackground=1&autoplay=1&loop=1&byline=0&title=0&muted=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; fullscreen"></iframe>
I got some youtube urls, such as https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg. When I put it to html video tag, it said "Invalid source".
How to solve this problem?
When I used iframe to display videos, I had another problem as described here: Video not showing in iframe on IE, but showing on firefox and chrome.
This is my HTML:
<video width="300" height="auto" autoplay="" controls="" name="media"><source src="https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg"></video>
You can't use the HTML5 video tag for youtube videos, it only supports files that are either MP4, WebM and Ogg. W3C Schools
Youtube already provides you with an "embed" function on their page which auto generates the iFrame for you. Youtube Embed There are a few other methods but they are no longer used (deprecated). Youtube API
As for the issue with IE, maybe have a look at this similar question: YouTube iframe embed code not working in IE
The only way around the issue if you want to use the HTML5 video tag is to download the Youtube video in one of the specified formats.
You need to use the <iframe> tag to embed the YouTube. Please read the code below:
<iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I have taken the following iframe code for the youtube video from the youtube itself.
<iframe width=”560? height=”315? src=”http://www.youtube.com/embed/V3oJR5IAMxM” frameborder=”0? allowfullscreen></iframe>
But when i try to embed this video on simple web-page inside a div element. I can see the you-tube player in the web page.But the video is not loading in my webpage. But the same video is playing for me in youtube.
Can someone tell what might be the problem,..
Is the problem with a code or with the browser, i am using mozilla 13.
HiTbmBizz,
Try this instead,
<iframe width="640" height="360" src="http://www.youtube.com/embed/V3oJR5IAMxM?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Worked for me in HTMLSandbox if you want to test.
Let me know how it goes.
How do I play a YouTube video in HTML5?
This is probably what you're looking for:
Force HTML5 youtube video
HTML5 video may play if the user has opted in:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>
HTML5-by-defualt video - notice the ?html5=1:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID?html5=1" frameborder="0"> </iframe>
The "HTML5" way of doing video would be to use a <video> tag. This post shows that it can be done, but it doesn't look like the best option. Show Youtube video source into HTML5 video tag?
You can also take a look how YouTube does it, opt in at: http://www.youtube.com/html5
If you're using safari, there's an YouTube5 extension that will make all youtube videos into html5 videos.
http://www.verticalforest.com/2010/06/09/youtube5-html5-converter-for-youtube-videos/
Supports videos that youtube does not (videos with ads etc)
You can embed videos effortlessly by right clicking the video on youtube,
copying the embed video option, and pasting it in your html where you want it to appear, The problem with this you wont have control over what is shown in the embed code apart from the clip you are interested in, ie, adverts playlists etc