[Bug] muted attribute of <video> element is not properly rendered
- 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
Assessment
This issue has not been assessed yet.