Muted Autoplay in Chrome still not working

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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.