Material-design-lite: <video> element's autoplay attribute doesn't work.

[uplusion23]

When a video element is within a mdl div, such as;

<div class="android-wear-section">
      <video class="landing" poster="#" autoplay loop muted>
        <source src="costarica.mp4" type="video/mp4" />
        <source src="costarica.webm" type="video/webm" />
      </video>
</div>

I've been able to trace it down to a JS issue with MDL. No avail on a solution though

[uplusion23]

Even using JQuery to wait until the document is ready, then appending the video does not help.

[uplusion23]

I did find a "workaround" after some attempts with JQuery. Waiting 300ms then using JS to play the video allows it to work again.

 setTimeout(
  function() 
  {
    $("video.landing").get(0).play();
  }, 300);

[Garbee]

Can you provide an actual code demo of this problem via a codepen? MDL does nothing that would directly affect video playback like this. Perhaps there is something else going on in your code.

[uplusion23]

@Garbee
http://codepen.io/uplusion23/pen/RPYLeo
Here's a quick demo. Line 288 is the video's CSS.

[Garbee]

I've been able to trace it down to a JS issue with MDL.

So what is the JS issue you found? You are pointing out CSS that is not MDL CSS but custom CSS for that template.

[Garbee]

Looking at the codepen autoplay is working, looping is not.

[Garbee]

It is because of the layout JS resizing things. Probably chokes browsers up having it begin at one place then get reflowed into another.

[uplusion23]

It's not being choked out on any browser I've tested, and on the three machines I've tested. Invoking the play command works every time, just after the page is loaded. Seems to be something the JS does while applying all of the material attributes and classes.

Edit; If you test an autoplay video within mdl based div, that is in a demo or template, it will produce the same result I'm getting. Tested this on moz and webkit.

[Bound3R]

@uplusion23 I spend the same to add MDL not know why, but it solved simply using

$( window ).load(function() {
          $( '.video-element' ).get(0).play();
 });

I hope this help :wink:

[uplusion23]

Thanks, that works. :)

[bjfletcher]

I'm experiencing this issue too.

• It plays very briefly (about 500ms) then pauses.
• If I put the video tag outside of the MDL layout tag, I don't experience this issue.
• If I put in a setTimeout to .play() the video after 500ms then it will work, presumably after MDL somehow pauses the video.

[bjfletcher]

@Bound3R's workaround works well here.

[bjfletcher]

If anyone's interested and using Riot (or similar), workaround I'm using is:

    const play = () => video.play();
    tag.on("mount", () => window.addEventListener("load", play));
    tag.on("unmount", () => window.removeEventListener("load", play));

[gplanchat]

The issue appears to be still present on Chrome 49.

It happens when I use a MDL layout, at this line :

https://github.com/google/material-design-lite/blob/master/src/layout/layout.js#L294

Here is my simplified page :

https://gist.github.com/gplanchat/3da29e50e8911f7430e9

The dynamic elements removal and re-insertion in a container seems to break autoplay and looping.

[Garbee]

It will continue to be a problem until V2 is released with a completely refactored layout setup.

[drochow]

Got the same issue with autoplay and loop on video tags.
I was able to use the autoplay and loop feature with following workaround:

var video = document.getElementById("my-vid");
var playing = false;

//The timeout time may need to be higher depending on the runtime of the mdl init...
setTimeout(function() {
     video.play();
    }, 500); 

// I got some issues with long videos (20s+),there i had to reset the 
// current play time about 3 seconds ( (video.duration * 1000)-3000) ) before the end.
video.addEventListener("play", function() {
      if(!playing) {
        setInterval(function() {
          video.currentTime = 0;
        }, (video.duration * 1000)-20);  
        playing = true;
      }
    });
}

Notice: If you are using this workaround remove the "loop" and "autoplay" attributes from your video tag

Regards...

[Garbee]

Listen for the layout upgrade and then play your video manually.

The work-around to this until V2 ships, don't use autoplay attribute and:

  document.querySelector('.mdl-js-layout').addEventListener('mdl-componentupgraded', e => {
    if (e.target.classList.contains('.mdl-js-layout') {
      document.querySelector('video').play();
    }
  });

[Exac]

Can't we just add the following code to the project until v2 arrives?

document.querySelector('.mdl-js-layout').addEventListener('mdl-componentupgraded',
        function(){
            [].forEach.call(document.querySelectorAll('.mdl-js-layout video[autoplay]'), function(e) {
                e.play();
            });
        }
);

[Garbee]

V2 layout won't affect this at all so the problem will be solved naturally. Projects need to implement this patch listener on their own for V1 as we won't be adding it into core.

Since there is no action the internal team will take here and there is a reasonable fix for developers within projects that need it, I'm closing this out to keep our open issue list as small as we can get.

Thank you.

[davidtaubmann]

@Exac , your solution worked fine once I remembered to run it on window.onload (would appreciate to mention).

@Garbee , your code seems to be missing a parenthesis and even when putting it, the solution didn't worked for me.

[Exac]

@davidtaubmann Glad it worked for you. This issue made me switch to Angular+Angular Material.

[Garbee]

My example code is just that, example code. Not a complete solution nor meant to be syntatically correct. It is just a mockup to give people the idea of the logic needed to solve the problem. Yes, you may need to modify it for you application specifically to handle autoplaying the correct video.