24

I am having trouble getting chrome to autoplay a video. I have set the video to muted and it auto plays in both Safari and Firefox but not chrome. 

            <video autoplay muted poster="path to video" id="bgvid">

        <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/webm">

            <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/mp4">

        </video>

I want to video to start playing automatically. Currently the video loads, but is just still. Everything I've read says that as long as it's muted it should play, but that is not the result I'm getting.

Improve this question
7
  • Can you post some working code to test functionality (at least in Firefox and Chrome)? Commented Dec 4, 2017 at 19:08
  • I updated the code above with the paths. Is that what you meant? Commented Dec 4, 2017 at 21:04
  • The Code here should work, but make sure data saver is not on. If data saver is on this will not play. Commented Dec 5, 2017 at 7:10
  • Data Saver is not on. This still won't work in my chrome, or any chrome for that matter. I ended up using jQuery to force the video to play. Probably not the best solution but it worked for now. $("#bgvid")[0].play(); Commented Dec 5, 2017 at 17:12
  • It could also have been a problem with the videoโ€ฆ Ran into a similar issue here stackoverflow.com/a/59377946/1717535 fixed without having to rely on events / .play. Commented Dec 17, 2019 at 16:04

7 Answers 7

Reset to default
48

Although @richard-lindner's solution didn't work for me, it put me on the right track.

In my case, although the muted attribute was present, Chrome was ignoring it and failing silently unless it was also explicitly set in javacript e.g.

var video = document.getElementById("myVideo");
video.oncanplaythrough = function() {
    video.muted = true;
    video.play();
}

Interestingly, forcing the autoplay using javascript but ommitting the video.muted = true line did display the autoplay policy error in the console, suggesting Chrome is indeed ignoring the muted attribute in some cases. This to me feels like a bug with Chrome's autoplay policy.

Note that the error occurred only when the video was not cached. If it was cached, autoplay worked as expected.

Improve this answer
6
  • 6
    Worked for me. They are really making this difficult. Commented Jul 23, 2018 at 5:47
  • Thank you. This solves the problem. And you are right, it looks like a bug. Commented Aug 7, 2018 at 7:45
  • Strangely, this seems to be a problem even with VideoJS. I have the latest version currently, 7.2.3. Calling player.volume() in VideoJS's callback doesn't work without that video.muted = true, where video is the video element. Commented Oct 18, 2018 at 17:56
  • +1. I can confirm that simply assigning the 'muted' attribute in HTML did not work for me, but adding the explicit property assignment suggested by @Jonny Green did work. Commented Aug 23, 2019 at 3:47
  • It disgusts me that this works perfectly. It's like Google Chrome are trying to be the next version of IE8... Commented Apr 19, 2021 at 5:24
7

You can use oncanplay="this.muted=true" on your video tag

<video  muted loop autoplay oncanplay="this.muted=true">
    <source src="your src" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
Improve this answer
3

Main answer worked with me - but just in case anyone is trying to get it to work on apple phones you must use the "playsinline" attribute for it to work. for example:

<video playsinline autoplay muted loop id="myVideo">
        <source src="xen.mp4" type="video/mp4">
    </video>

Improve this answer
2

The example below, with minimal change from your code, plays in chrome (Version 62.0.3202.94 ) on a Mac (10.12.6):

<video autoplay muted poster="path to video" id="bgvid">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

It may be that Safari and Friefox are playing the mp4 and chrome the webm, and the issue related to the webm video itself rather than your HTML5 code.

Improve this answer
5
  • 3
    I'm able to view your video above in chrome, but even as I put that exact same code into my site, Chrome refuses to play it. It's frustrating because there are no errors. Just won't work in my site for whatever reason. Commented Jan 4, 2018 at 16:59
  • 1
    If it is the exact same as the code above including the video URL, then it sounds like your site may have some more complex video player in use which is looking for the video element in the page and managing the playback. Commented Jan 5, 2018 at 20:17
  • 2
    I get exactly the same issue using no third party video player Commented May 21, 2018 at 17:15
  • 1
    @timstermatic - do you mean the code snippet above will not work? I just tried it again in a Chrome browser and it plays fine for me. Commented May 21, 2018 at 20:50
  • 1
    @mick, I meant when I put the above code in my own page. However I figured out my issue. The video is in a slider and you can't autoplay video that is in a DOM element that has been mutated. If I run the example in a boilerplate HTML template it works perfectly. Commented May 22, 2018 at 5:55
2

For those creating elements in JavaScript, here is the JavaScript function I'm using to configure elements to autoplay properly in Chrome:

function configureVideoElementForAutoplay (videoElement) {
  videoElement.setAttribute('playsinline', '');
  videoElement.setAttribute('muted', '');
  videoElement.setAttribute('autoplay', '');
  videoElement.muted = true;
}

Example:

let vid = document.createElement('video');
configureVideoElementForAutoplay(vid);

Credit to @Jonny Green for pointing out the necessity of the direct 'muted' property assignment.

Improve this answer
0

Mine wasnt working but changing the "autoplay" to "autoPlay" made Chrome (v102) play the muted video fine.

So my final code is

  <video width="720" height="640" autoPlay muted>
         <source src="/assets/vid.mp4" type="video/mp4"/>
         Your browser does not support the video tag.
  </video>

I noticed this because chrome was throwing this console error:

Unknown DOM property autoplay. Did you mean autoPlay?
Improve this answer
0

Chrome seems to be having issues with setAttribute as well.

videoElement.setAttribute('muted', '');

It is rendered in DOM correctly with muted attribute on the video element, yet the video would not start playing as Chrome called it not muted (sometimes even in console).

Setting it directly solves the issue.

videoElement.muted = true;
Improve this answer

Your Answer

By clicking โ€œPost Your Answerโ€, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.