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.
Related
My tag audio not function on mobile browsers, my code is the next:
Use different examples but not function Audio Tag Autoplay Not working in mobile
Autoplay is not supported on mobile browsers because it's too disruptive. Video has an option to autoplay if they are also muted. Google says "autoplay is still disabled on Chrome on Android, because muted autoplay doesn't make much sense for audio."
Ref: https://developer.chrome.com/blog/autoplay-2/
I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.
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 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
I have the following video in my site. This is set as a fixed background at the top of the page, comprising the main banner. This element plays fine in every browser except EDGE.
I even tried writing a custom javascript snippet to force it to play (called with a button). This works when tested on Chrome but will not work on EDGE.
var vid = document.querySelector('#bgvid');
function playVideo() {
console.log('trying to play!')
vid.play();
};
<video poster="http://cranneyhomeservices.com/wp-content/uploads/2017/05/HS_Loop_Frame.png" id="bgvid" playsinline autoplay muted loop>
<source src="http://cranneyhomeservices.com/Cranney-website.mp4" type="video/mp4" media="all and (max-width:414px)">
</video>
According to my comment you should use getElementById() instead of querySelector(). This should be correctly interpreted by chrome and edge.
Edit:
After testing your fiddle in my Edge it is an security issue. The problem was already discussed on SO:
HTTPS security is compromised error. How to fix?
Make sure that you do not load any content from a non secure source (i.e. https instead of http)