Приглушенный элемент видео возвращает значение false в Chrome, даже если для атрибута установлено значение «отключено»

Question

У нас есть html-элемент с объявленными атрибутами autoplay, muted и loop.Мы заметили, что из-за новой политики автозапуска Chrome 66 видео блокируется от автоматического воспроизведения.Регистрация video.muted возвращает false в инструментах разработчика Chrome, но true в Safari - есть ли причина, по которой Chrome будет видеть видео как немой, даже если этот атрибут явно установлен?

Редактировать:добавление видео разметки: <video preload="true" autoplay muted loop width="100" height="100" id="hero-video" class="fullscreen-video" aria-label="This is a background video showing example consumers."> <source src="./assets/videos/myvideo.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

Мы также используем Vue и Webpack в нашей сборке.

Answer 1

У нас была похожая проблема здесь, в Vue.Похоже, что свойство muted возвращает false в Chrome и Firefox, но в Safari - true.Потенциальное решение, которое мы нашли, - это привязать отключенное свойство к Vue.Кажется, это позволяет заглушенному значению оставаться истинным после загрузки страницы.

v-bind:muted="true"

Answer 2

У меня такая же проблема. Использование Vue также, но я считаю, что это может применяться в других ситуациях. В моем случае логические атрибуты autoplay и muted установлены в теге элемента <video>, но videoEl.muted по-прежнему равняется false. Это может быть ошибкой в ​​новой политике «без автозапуска видео без звука».

Мне удалось это исправить, удалив оба атрибута autoplay и muted, а затем вызвав их вручную:

const videoEl = document.querySelector('video')
videoEl.muted = true
videoEl.play()

(пример vanilla js, но в Vue вы бы поместили его в хук жизненного цикла mounted() и сослались на тег <video> через this.$refs)