In our website coverr.co we offer free stock videos for any commercial use.
One of the coolest things in Coverr is allowing our users to see the video running as a background video in our site. As an example: https://coverr.co/videos/Beach
If you'll access this page using FF or Safari the video will autoplay, no problem. However since Chrome's latest policy change on April 2018, autoplay has been inconsistant on Chrome.
We've added the "autoplay" and "muted" flags (although all of our video footage is sound-less), as required by the new spec, but with no luck. It would sometimes play and sometimes just stay frozen until the user actively start playback.
Can someone please help us solve this mystery?
Thanks in advance!
(1) Cannot reproduce your issue (on Chrome version 69.0.3497.100):
This autoplays and loops correctly:
<!DOCTYPE html>
<html>
<body>
<video width="100%" autoplay loop>
<source src="https://storage.googleapis.com/coverr-main/mp4/Beach.mp4" type="video/mp4">
</video>
</body>
</html>
(2) Your cover/poster image is blocking the video (which may be playing underneath).
Try removing the cover image. Your frozen frame (not playing) is actually the poster image. Test by removing cover image code (eg: <div class="poster hidden"> and related).
PS: If you right click poster image and choose "show controls", the displayed "play" button will start playback.
Found the problem, and it was related to the fact we've used angular 2.
Apparently Angular 2 has a problem to add the muted meta tag properly.
The full answer can be found here, but basically you need to use Angular's onloadedmetadata attribute:
onloadedmetadata="this.muted = true"
and in general, this is how it should look like:
<video onloadedmetadata="this.muted=true" autoplay>
<source src="myVideo.mp4" type="video/mp4" />
</video>
Important comment:
We've also added oncanplay="this.play()" for additional playback robustness.
So in the future we can handle play() promise and show play button if autoplay was rejected by some another reason
Additional important comment:
Following #VC.One's question, just wanted to clarify that there is a way to verify or at least get notified of playback (taken from the article in my question):
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
but it doesn't make sure that the video actually plays, and so you might get and error even though everything is legit. And of course, adding a play button can work, but it really takes out the "sting" of what we're trying to do - autoplay a muted video in the site's background.
Basically all you need it to have both autoplay and muted injected properly, and apparently in Angular 2 it's not such a trivial task...
Related
I want to add a video that plays by itself and loops, without showing controls. When I add 'controls' to my code, the controls show and the video plays just fine. When I change 'controls' to 'autoplay' and refresh the testing page, the video doesn't play. Here is the code:
<video src="./images/Kusko Enterprise Catering Services - Google Chrome 2021-10-03 16-30-57_Trim.mp4" class="kusko_catering_video" autoplay></video>
Please could I get help on trying to figure out my mistake?
If you have put the autoplay option in element. It will not play on refresh unless you put muted too. This is a special case in browsers which allows to prevent the video to be played out loud in case of just refresh.
so change your element to:
<video id="video-field" src="files/video" loop autoplay muted></video>
and for angular as someone asked in the comments.
<video [muted]="'muted'" loop autoplay [src]="videoSource"></video>
I think this is what you want.
<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/h264.mov" autoplay loop></video>
Your code seems good, you have to just add loop attribute for continuous play. I think the problem is in your source.
You have to have first interaction on your page before that your player plays.
I have a code like this but the video does not autoplay when the page is opened.I will be glad if you help
Assuming that you are using chrome to test, use muted keyword before autoplay word.
There is a change in security policy for chrome which disable playing video with sound automatically. You may read policy here
As RABI described, the browsers (not only Chrome) are disabling auto-play of videos with sound. There are lots of workarounds that try to bypass such an annoyance, but every single one that I tried failed. Fundamentally, what worked for me was a simple VIDEO HTML 5 tag with a small JavaScript mixing jQuery and Vanilla JS. Somehow this "little Frankenstein" seems to satisfy the browser's policies, probably because there are more than two indirect actions against the video object, which is enough to confuse the browser policy to allow the video to be played from the JavaScript request WITH sound, hence: fully functional autoplay.
<video id='myvideo' width="700" height="400" preload controls disablePictureInPicture controlsList="nodownload">
<source type="video/mp4">
</video>
<script>
$(document).ready(function () {
$("#myvideo > source").attr("src", "VIDEO_URL");
var autoPlayVideo = document.getElementById("myvideo");
autoPlayVideo.load();
});
</script>
Tip: I would have used your code sample, Levin Rave, IF it was not an image. Next time, try posting the code snippet so we can have something to work with. However, it should be fairly simple to adapt my example to your code. Let me know if you can make it work.
Important: Don't forget to load jQuery in the header of your page.
so i put it so whenever someone opens my webpage a background sound plays. The code I'm using works and has worked before on different projects but now, it doesn't. Can someone help me?
My code:
<div id="player">
<audio autoplay hidden>
<source src="./sounds/bgsound.mp3" type="audio/mpeg">
If you're reading this then your browser is outdated.
</audio>
</div>
<script>
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
</script>
See MDN's autoplay guide
The term autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin.
and
From the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. Because of that, browsers generally only allow autoplay to occur successfully under specific circumstances.
"When the page loads" is not one of those specific circumstances (and is one of the most annoying times for autoplay to occur) so it is blocked by modern browsers.
The video I posted on the home page of my website did not play on the first load or after refreshing, while it was played after I went from other pages to the home page. The problem could be solved if I added the muted attribute to the video element, but I do want the background music to play. Below is my code:
componentDidMount() {
document.getElementById("opening").play();
}
......
<video autoPlay id="opening">
<source src={opening} type="video/mp4"></source>
</video>
Thanks!
I faced the similar problem. then I did this. Though it's not user friendly but after this it worked
<video
src={require('../../resources/sampleVid.mp4')}
autoPlay = {false}
controls = {true}
loop = {true}
muted = {false}
className="flex justify-center mw7-ns"
/>
I am afraid, but there is no way to play audio in the HTML 5 video automatically.
It is clarly mentioned here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Last modified: May 16, 2020, by MDN contributors
Sites that automatically play audio (or videos with an audio track)
can be an unpleasant experience for users, so should be avoided when
possible. If you must offer autoplay functionality, you should make it
opt-in (requiring a user to specifically enable it). However, this can
be useful when creating media elements whose source will be set at a
later time, under user control. See our autoplay guide for additional
information about how to properly use autoplay.
In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/