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.
Related
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
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
Team,
My code
<audio autoplay id='myAudio' >
<source src="abc.mp3" type="audio/mp3">
<source src="abc.mp3" type="audio/mpeg">
</audio>
As this was not working a function was called onload and mocked the event of clicking a button.
to resolve the error "play() failed because the user didn't interact with the document first"
My chrome build is 78.xx . I know google have disabled this feature . I tried with iframe also but doesnt work. Any help is appreciated.
Google Chrome only allows you to use autoplay on the next scenarios:
If muted is also added to the audio tag.
User has interacted with the domain (click, tap, etc.)
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Chrome knows if the interaction is genuine or if it's mocked, so I don't suggest that way. My suggestion is make your website a PWA, or think a way to make the user interact with the website.
Source: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
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'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.