CODEWITHSUNDEEP
google-chromehtml5-video
jon
jon

Reputation: 910

HTML5 video "autoplay" not automatically starting in Chrome

I have the following code:

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4">
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">
</video>

The video:

  1. displays well in both Chrome and Firefox
  2. In Firefox it plays as expected
  3. In Chrome it displays but doesn't "autostart". This is the problem.
  4. If I click on it (in Chrome) it plays ok

Tried

<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>

Nothing worked in Chrome.

Then I also tried changing the codec, as recommended in https://en.wikipedia.org/wiki/HTML5_video, but it also did not work:

<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

Now I am at a dead end. Thanks for any pointers! Much appreciated.

Upvotes: 78

Views: 205653

Answers (10)

yooneskh
yooneskh

Reputation: 813

It is 2024 and this worked for me

<video loop autoplay muted controls class="w-full" onloadedmetadata="this.play()">
  ...
</video>

Upvotes: 0

sebas sierra
sebas sierra

Reputation: 2126

You need to add playsinline autoplay muted loop because Chrome does not allow a video to autostart if it is not muted. Also, right now I don't know why it is not working in all Android devices. I'm trying to look if it's version specific, if I find something I'll let you know.

Chrome issue: After some research I have found that it doesn't work on Chrome sometimes because in responsive you can activate the data saver, and it blocks any video to autostart.

Upvotes: 199

Darryl Mendonez
Darryl Mendonez

Reputation: 1171

These are the attributes I used to get video to autoplay on Chrome - onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop

Example:

<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>

Upvotes: 5

Vaibhav Kumar
Vaibhav Kumar

Reputation: 818

Try this when i tried giving muted , check this demo in codpen 

    <video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

script

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})

edited attribute content

autoplay muted playsinline

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Upvotes: 12

Yahya
Yahya

Reputation: 746

Try this:

<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>

And put this js after that:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});

Upvotes: 5

D. Naumov
D. Naumov

Reputation: 327

This question are greatly described here
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL;DR You are still always able to autoplay muted videos

Also, if you're want to autoplay videos on iOS add playsInline attribute, because by default iOS tries to fullscreen videos
https://webkit.org/blog/6784/new-video-policies-for-ios/

Upvotes: 3

skawars
skawars

Reputation: 33

Extremeandy has mentioned as of Chrome 66 autoplay video has been disabled.

After looking into this I found that muted videos are still able to be autoplayed. In my case the video didn't have any audio, but adding muted to the video tag has fixed it:

Hopefully this will help others also.

Upvotes: 2

extremeandy
extremeandy

Reputation: 535

This may not have been the case at the time the question was asked, but as of Chrome 66, autoplay is blocked.

http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

Upvotes: 7

Vladislav
Vladislav

Reputation: 11

Here is it: http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html You have to add the tags: autoplay="autoplay" loop="loop" or just "autoplay" and "loop".

Upvotes: -1

ahutch
ahutch

Reputation: 164

I was just reading this article, and it says:

Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.

So it looks like your problem would be solved if you put the .webm first in your list of sources. Hope that helps.

Upvotes: 7

Related Questions