Как автоматически воспроизвести видео в ember.js в Chrome - PullRequest
Новая
       4

Как автоматически воспроизвести видео в ember.js в Chrome

0 голосов
/ 18 января 2019

У меня очень простое приложение ember.

В моем application.hbs у меня есть только следующий код (никаких других маршрутов, шаблонов, компонентов и т. Д.) 

<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}}

Проблема в том, что я не могу включить автоматическое воспроизведение этого видео на Chrome. Изначально это выглядело как проблема, связанная с Chrome, но даже после ответа на этот популярный вопрос лучший ответ не решает мою проблему.

Более того, если я создаю простую HTML-страницу, это видео автоматически воспроизводится в Chrome и любом другом браузере. Таким образом, я могу воссоздать эту проблему только из приложения ember.

Также обратите внимание, что если бы я должен был открыть видео с автоматическим воспроизведением по отдельному маршруту (т. Е. Я перехожу на новую страницу и возвращаюсь), то теперь автозапуск работает. Таким образом, эта проблема возникает только при первой загрузке приложения. Я не могу найти какие-либо популярные компоненты, которые могут заменить.

Мне любопытно, как заставить это видео автоматически воспроизводиться при первом запуске Chrome.

1 Ответ

0 голосов
/ 18 января 2019

Скорее всего, это ошибка Chrome. Очевидно, что в зависимости от того, как установлены атрибуты видео, автозапуск не работает или не работает. Это пример

Мне удалось заставить это работать, создав простой компонент и обернув видео html внутри компонента, а затем сбросив атрибуты видео внутри didInsertElement ().

Компоненты / видео-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>

видео-playback.js 

import Component from '@ember/component';

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

Важно просто снова установить атрибуты, потому что есть ошибка с рендерингом.

Вероятно, есть более простой способ сделать это, не требуя компонента, но для меня этого достаточно.

...