Following Chrome & Firefox's recent update autoplay videos are no longer supported - I've tried to add some code to play this on startup but it doesn't seem to work?
var vid = document.getElementById("attractor");
function playVid() {
vid.play();
}
Has anyone found a workaround to this?
We do a lot of touch-screen interactives and rely on this method for our attractor videos.
autoplay will only work if you specify it as muted by default, like this.
<video autoplay muted>
<source src="video.mp4" type="video/mp4"></source>
</video>
Don't worry, users will be able to unmute the video as part of the html5 video element.
I've found a good way how to autoplay the video and avoid a js error in console.
const myVideo = document.getElementById('my-video');
// Not all browsers return promise from .play().
const playPromise = myVideo.play() || Promise.reject('');
playPromise.then(() => {
// Video could be autoplayed, do nothing.
}).catch(err => {
// Video couldn't be autoplayed because of autoplay policy. Mute it and play.
myVideo.muted = true;
myVideo.play();
});<video id="my-video" src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_2mb.mp4">This code tries to start autoplay with sound, and if it's not possible then it will mute the video and autoplay the video without sound. I think it's an optimal way and prevents JS errors.
According to my own observations and many articles like this one for example, Chrome now blocks autoplay for videos unless they are muted. Videos with sound enabled can only be played by user interaction, e.g. a mouse click or a touch tap and cannot be started by javascript.
By doing this Google wants to "(make) auto-play more consistent with user expectations and [...] give users more control over audio" [1]
I figured it out....enter this into the address bar:
chrome://flags/#autoplay-policy
And select 'No user gesture is required'
...this will obviously only make it work on your computer!
allow="autoplay;" to your iframe like this <iframe allow="autoplay;" ... >video tag, I noticed that video has to be mute to autoplay. Video with sound didn't want to play. Here's how to embed html5 videos https://www.w3schools.com/html/html5_video.asp. If using this method, you can download Miro Video Converter http://www.mirovideoconverter.com/ Use it to encode your video. It does an AMAZING job at downsizing videos!?autoplay=1, and in vimeo also autopause=0 to the url like this: https://player.vimeo.com/video/{video_id}?autoplay=1&loop=1&autopause=0,function onPlayerReady(event) {
event.target.playVideo();
}
https://www.youtube.com/embed/{video_id}Recommended solution:
https://vimeo.com/manage/{video_id}/embed and set up your embed video<iframe frameborder="0"
height="100%"
width="100%"
id="background-video"
src="https://player.vimeo.com/video/356828095?autoplay=1&loop=1&autopause=0"
allow="autoplay; fullscreen">
</iframe>
This one does autoplay and loop.
4. Set your video size using css, f.e. width: 100%.
5. Now you don't want to have the black frame around the video, so let's resize the iframe, let's make the height proportional to width. In my case the video is 1920x1080px:
<script type="text/javascript">
var width = window.innerWidth;
var height = (width * 1080) / 1920
document.getElementsByTagName('iframe')[0].style.height = height + 'px';
</script>
My video is playing in loop as page's background. I disabled mouse events like this (in your CSS styles):
#background-video {
pointer-events: none;
}
Let me know if I missed something, I will update these instructions!
I just spent 7 days and nights re-writing youtube code, just due to these autoplay issues. Google staunchly ignores all changes to Chrome:
https://developer.chrome.com/blog/autoplay/
and Chrome based browsers (personally using Edge 115) don't implement autoplay restriction properly. First, let's try something simple:
<video controls = "" class="video-stream html5-main-video" style="width: 480px; height: 640px" src="file:///c:/copy/1.mp4"></video>
Play:
Document.prototype.getElementsByTagName.call(document, "video")[0].play()
If "AutoplayAllowed" is set to 0 in the policies, video does NOT play. After much ado I managed to scribble this:
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE]
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies]
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft]
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge]
"AutoplayAllowed"=dword:00000000
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge\AutoplayAllowlist]
"1"="file:///*"
"2"="https://www.youtube.com"
Now local videos play, but making an autoplay exception for youtube, I don't feel good about that. Also, out of purely academic interest, let's try youtube with autoplay disabled. This is what happens (keep in mind that google promised with huge pomposity to protect chrome users from annoyances like autoplay):
if you open a youtube video by opening an url thru the address bar, videos do NOT play
if you have a youtube page already open and click on a video /shorts video on the page, newly opened video DOES play
if you add a youtube bookmark pointing to a page containing a video to Chrome and open it:
if you are currently on a youtube page when using the bookmark, video plays
if you are NOT on an youtube page when using the bookmark, video does NOT play on page being opened
if you open a video on youtube and the video's paused (due to chrome autoplay restrictions or because you messed with their code, because otherwise it WILL autoplay) and you enter video fullscreen mode for the first time, video suddenly starts playing, really annoying. I found the code that does it (inside desktop_polymer_enable_wil_icons.js), here's google logic for you, they think if a user fullscreens a video, he also intends to play it right away.
If you open a youtube shorts page and the first shorts video doesn't play due to chrome restrictions, if you then scroll down the page without first playing the very first video manually, all further shorts videos will be broken (event listeners missing, the play button on the shorts video works, but clicking on shorts video background does nothing). Obviously, Google's left youtube-developers hand doesn't know what their right chrome-developers hand is doing.
Bottom line: you want to prevent autoplay, you have to re-write the code yourself, injecting it on the fly into the page or redirecting to your own scripts by means of a browser proxy
I have two solutions that don't need any attributes or iframe and it can autoplay audio / video with sound also, please follow me:
1. WebRTC Solution:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
vid.play(); // play your media here then stop the stream when done below...
stream.getTracks().forEach(function (track) { track.stop(); });
});
It will ask users for their Microphone permission and they have to click Allow once then you are permitted to play anything with / without sound. It works because as long as you are capturing anything then you are allowed to play everything. Source: autoplay-restrictions-and-webrtc
2. Manual Solution: If for some reason users don't want to give their microphone permission then only you can do to convince them the fact that you only need this permission for playing media automatically for them, it has nothing to do with their microphone because you are stopping it as soon as the media starts playing. Otherwise, instruct them to Allow Sound permission from your site settings, that will also grant access to play media with or without sound permanently.
After two days of continuous searching and before giving up the hope to autoplay audio/video with/without sound I have come up with these two solution that simply works without any user gestures. I hope it'll solve any autoplay related issues happening after the new strict policy deployed by google. Read more: autoplay-policy-changes
