I'm developing a web that needs to work on computers, smartphones, and iPhones.
I'm using the audio HTML tag with autoplay attribute and it doesn't work as expected i.e. audio does not play automatically
<audio id="audio3" autoplay>
What am I doing wrong here?
You have to add the muted and autoplay attributes together like below
<audio id="audio3" autoplay muted>
Chrome's autoplay policies changed in April 2018, and are as follows
Muted autoplay is always allowed
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On the desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound
Refer google docs for more information
Related
I have used video tag with autoplay attribute. I know that autoplay works if the video is muted and in my case there is no mute but, if I click on play button for first time as a gesture to play it, then after closing the video and again loading back, it does not required user gesture to play, it gets autoplayed.
Once a user gesture is used to play the video then from second time video starts to autoplay as its own without any gesture. I have not found any policy regarding the second time autoplay on iphone devices without user gesture on play button.
Please help me to find the policy which describes a user gesture required for the first time to start autoplay from the second time on its own in iphone devices. Thank you.
<video src="a.mp4" id="video" frameborder="0" controls="" autoplay="" playsinline="" preload="auto"></video>
I want to make the video on HTML autoplays, given that Chrome prevents autoplay attr in HTML to play the video.
Here's my code :
<video id="video" width="400">
<source src="chess.mp4" type="video/mp4">
</video>
var vid = document.getElementById("video");
vid.autoplay = true;
vid.load();
The behavior is weird. First, I'm working on Eclipse and everything works perfectly fine on the eclipse browser.
When it comes to Chrome, the video sometimes works, sometimes need a clear-cache refresh to work... Not working with the first time opening the link. And now it's not working at all...
Any help?
You need to refer to Chrome Autoplay Policy Changes before you try any scripts.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound
I'm using video.js in React. My problem is that video doesn't work only in Chrome. Video loads, but doesn't play automatically. It works in Firefox, Microsoft Edge, even Internet Explorer. The video starts in Chrome only when I have developer tools opened. Have you ever had a problem like this? My code is very simple:
<video data-setup='{"loop": true, "autoplay": true, "loadingSpinner": false}'
className="video-js vjs-default-skin article-video">
<source src={this.state.video}/>
</video>
State loads different videos based on innerWidth.
EDIT:
Attribute muted allows Chrome to autoplay video:
<video muted="muted" data-setup='{"loop": true, "autoplay": true, "loadingSpinner": false}'
className="video-js vjs-default-skin article-video">
<source src={this.state.video}/>
</video>
For now, chrome is preventing auto play in html5 video, so by default they will not allow auto play. Read more about the change here...
Here are their policies on autoplay:
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
As to why autoplay is enabled with the developer tools open: This vaguely answers it :
Developer switches
As a developer, you may want to change Chrome
autoplay policy behavior locally to test your website depending on
user engagement.
You can decide to disable entirely the autoplay policy by setting the
Chrome flag "Autoplay Policy" to "No user gesture is required" at
chrome://flags/#autoplay-policy. This allows you to test your website
as if user were strongly engaged with your site and playback autoplay
would be always allowed.
You can also decide to make sure playback autoplay is never allowed by disabling use of MEI, applying autoplay policy to Web Audio, and
whether sites with the highest overall MEI get playback autoplay by
default for new users. This can be done with three internal switches
with
chrome.exe --disable-features=PreloadMediaEngagementData,AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies.
I solved this by adding following attribute to video tag:
data-setup='{"fluid": true, "autoplay":true,"html5": {"vhs":
{"overrideNative": true}, "nativeAudioTracks": false, "nativeVideoTracks": false}}'
This causes everything to use the non-native player.
I want to use autoplaying videos on a mobile-only website.
So I am forced by some certain restrictions within google chrome (android app).
Then I want to programmatically change the source of the video to a different one.
(I tried two different aproaches, which both only work 50%)
V1:
This is the html I want to change:
<video id="overlayVideo" autoplay muted loop>
<source id="overlayVideoSrc" type="video/mp4"/>
</video>
This is my current code to change the source:
var $newVideo = $("<source>", {id: "overlayVideoSrc", "src": "index/RES/newVideo.mp4"});
$("#overlayVideoSrc").remove();
$("#overlayVideo").append($newVideo);
This plays the video on both mobile, and desktop, but doesnt change the source whatsoever. The video that plays is always the one, I selected in the first place.
V2:
Also tried:
<video id="overlayVideo" src="" autoplay muted loop></video>
Then I used the following:
$("#overlayVideo").attr("src", "index/RES/newVideo.mp4");
This changes and plays the video on desktop, but doesn't on mobile (changes but no playing)
I hope that you are able to follow, if there are any questions, please ask. I am really stuck.
After changing the src attribute
$("#overlayVideo").attr("src", "index/RES/newVideo.mp4");
You need to re-load(update after every change) and play the video:
$("#overlayVideo").load();
$("#overlayVideo").play();
I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone).
I'm using this html code:
<video autoplay loop muted id="main-video">
<source src="/themes/basic/video/intro.webm" type="video/webm"></source>
<source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>
I've also tried to add javascript video.play() but it still doesn't work in Safari.
How can i make video autoplay on mobile devices?
The video won't autoplay in Safari IOS unless you meet the following requirements:
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.
You need to either remove the audio from the source or mute it and enable the sound to be activated by a gesture.
From the Webkit policies for video
<video poster="video-sg.jpg" playsinline autoplay muted loop>
<source src="caffe.webm" type="video/webm">
<source src="caffe.mp4"" type="video/mp4">
Your Browser May Not Support This
</video>
On any recent desktop browser, it autoplays and loops as it should. But in mobile safari, it doesn't autoplay, or even play at all. I can't even hit the play button to get it going. Just the poster image displays.
Apologies if I'm hijacking the OP's question, but at least it's the same question!