emberjs / emberjs/ember.js

[Bug] muted attribute of <video> element is not properly rendered

Open
#19,321 2 comments 7 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

### 🐞 Describe the Bug

We usually use the `muted` attribute to allow the browser to `autoplay` a video. This `muted` attribute appears to be defective on Ember apps.

A no-cached rendering of a video element with a `muted` attribute, will behave just as if `muted` wasn't here.

### 🔬 Minimal Reproduction

[Reproduction on Ember Twiddle](https://ember-twiddle.com/11079b8403753a1c0621c3e66f8bf731?openFiles=templates.application%5C.hbs%2C)

The behavior of this link will be different, **depending on the browser**:
- Firefox: the video is autoplayed and unmuted
- Chrome: the video is not autoplayed, because unmuted
- Safari (expected behavior): the video is autoplayed and muted

### 😕 Actual Behavior

In both scenarios, something wrong occurs with the `muted` attribute, despite it is present in the code and if we the inspect DOM after rendering.

Note that this behavior is flaky and could occurs or not, if the browser have cached the video.

Today, people have to use the following workaround, from [a StackOverflow issue](https://stackoverflow.com/questions/54246119/how-to-autoplay-a-video-in-ember-js-in-chrome/54257775):

**_components/video-playback.hbs_**
```hbs

```

**_components/video-playback.js_**
```js
import Component from '@ember/component';

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

### 🤔 Expected Behavior

We expect the `muted` attribute to be correctly set, at the right time. In order to not need to use this workaround anymore.
Just as in Safari browser.

### 🌍 Environment

- Ember: 3.23.0
- Node: 12.16.2
- OS: darwin x64
- Browser: Firefox/Chrome

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.