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.

Lux
  • 17,835
  • 5
  • 43
  • 73
Cameron
  • 2,805
  • 3
  • 31
  • 45
  • 1
    This seems not to be a ember issue tho but more a chrome issue. [this code](https://jsbin.com/tukenalaze/1/edit?js,output) does not work in chrome either. Maybe they forgot something when they changed their policy half a year ago? – Lux Jan 18 '19 at 00:48
  • You're right. I also hadn't tested it via rendering so good catch – Cameron Jan 18 '19 at 00: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 '19 at 01:05
  • 1
    I still seem to get a domException with setTimeout. Still looking into this – Cameron Jan 18 '19 at 01:14

1 Answers1

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.

Cameron
  • 2,805
  • 3
  • 31
  • 45