Chrome video autoplay

Question

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?<

Answer 1

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.

Answer 2

1. Add allow="autoplay;" to your iframe like this <iframe allow="autoplay;" ... >
2. When using html5 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!
3. When embedding youtube or vimeo add ?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,
4. If you're working with youtube and still have issues, use iframe API https://developers.google.com/youtube/iframe_api_reference and play the video using javascript:

function onPlayerReady(event) {
   event.target.playVideo();
}

5. When using an iframe and youtube video, remember to use embed url, not standard video url https://www.youtube.com/embed/{video_id}
6. Youtube video manager is here: https://www.youtube.com/my_videos (I can never find the youtube video manager in the ever changing interface!)

Recommended solution:

1. register on vimeo, upload your video
2. go to video settings, find "embed" tab https://vimeo.com/manage/{video_id}/embed and set up your embed video
3. embed your iframe:

<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!

Answer 3

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!

Answer 4

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

Answer 5

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]

Answer 6

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.