Нашел проблему, и это было связано с тем, что мы использовали angular 2.
Очевидно, что у Angular 2 есть проблема с правильным добавлением мета-тега muted
.Полный ответ можно найти здесь , но в основном вам необходимо использовать атрибут onloadedmetadata
Angular:
onloadedmetadata="this.muted = true"
и, в общем, вот как это должно выглядеть:
<video onloadedmetadata="this.muted=true" autoplay>
<source src="myVideo.mp4" type="video/mp4" />
</video>
Важный комментарий:
Мы также добавили oncanplay="this.play()"
для дополнительной надежности воспроизведения.Таким образом, в будущем мы можем обрабатывать обещание play () и показывать кнопку воспроизведения, если автозапуск был отклонен по какой-либо другой причине
Дополнительный важный комментарий:
После @VC.Oneвопрос, просто хотел уточнить, что есть способ проверить или хотя бы получить уведомление о воспроизведении (взято из статьи в моем вопросе):
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
но это не такУбедитесь, что видео на самом деле воспроизводится, поэтому вы можете получить ошибку, даже если все допустимо.И, конечно, добавление кнопки воспроизведения может сработать, но это действительно снимает «укус» того, что мы пытаемся сделать - автоматическое воспроизведение приглушенного видео на фоне сайта.
В основном все, что вам нужно для этогоправильно вставили автоигру и отключили звук, и, видимо, в Angular 2 это не такая тривиальная задача ...