3

I have a very very simple ember app.

In my application.hbs, I only have the following code (no other routes, templates, components, etc.)

<video autoplay loop muted playsinline>
  <source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>

{{outlet}}

The problem is that I cannot get this video to autoplay on Chrome. Initially, this seemed like a Chrome specific issue, but even after following this popular question, the top answer does not fix my problem.

Even more, if I create a simple html page, this video autoplays on Chrome and as well as any other browser. Thus, I can only recreate this problem from an ember application.

Also note that if I were to open the autoplay video from a seperate route (i.e. I change to a new page and come back), the autoplay now works. Thus this problem only occurs when the app first loads. I can't find any popular components that can substitute.

I'm curious how I can get this video to autoplay when opening Chrome for the first time.

4
  • 1
    This seems not to be a ember issue tho but more a chrome issue. this code does not work in chrome either. Maybe they forgot something when they changed their policy half a year ago?
    – Lux
    Jan 18, 2019 at 0:48
  • You're right. I also hadn't tested it via rendering so good catch
    – Cameron
    Jan 18, 2019 at 0:57
  • 1
    When calling .play() during didInsertElement you also get an DOMException with a message linking to a page that gets redirected to the announcement that they have changed their policy. Interestingly calling .play() from a simple setTimeout in a JSBin works fine...
    – Lux
    Jan 18, 2019 at 1:05
  • 1
    I still seem to get a domException with setTimeout. Still looking into this
    – Cameron
    Jan 18, 2019 at 1:14

1 Answer 1

3

This is most likely a bug with Chrome. Apparently, depending on how the video attributes are set causes the autoplay to not work or work. This is an example

I was able to get this to work by creating a simple component and wrapping the video html inside the component and then resetting the video attributes inside of the didInsertElement().

Components/video-playback.hbs

<video playsinline=true autoplay=true muted=true loop=true>
  <source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>

video-playback.js

import Component from '@ember/component';

export default Component.extend({
  didInsertElement() {
    this._super(...arguments);
    let video = this.element.children[0];
    video.muted = true;
  }
});

The important thing is to just set the attributes again, because there's a bug with rendering.

There's probably an easier way to do this without requiring a component, but this is a sufficient fix for me.

1
  • 1
    This problem still exists in 2022 but this solution still works as well. Mar 9, 2022 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.