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?

    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.

Answer 1

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.

Answer 2

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 3

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 4

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!