HTML5 видео отключено, но все еще воспроизводится

Ответ 1

Я не совсем уверен, почему атрибут muted работает неправильно, если он определен в теге video. Однако это то, что вы можете сделать:

Во-первых, удалите атрибут muted="muted" из тега видео. Храните его просто как:

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
    <source src="intouchables.f4v" type="video/mp4">
    Your browser does not support the video tag.
</video>

Теперь определите функцию, которая при загрузке страницы отключит видео.

window.onload = function () {
    var element = document.getElementById('video');
    element.muted = "muted";
}

Я проверил это, и он работает.

Ответ 2

В моем ответе нет новых реальных ответов - я просто пытаюсь актуализировать этот вопрос и надеюсь, что люди не будут тратить на это целый день, как я только что сделал.

Насколько я могу судить (тем более что этот вопрос настолько старый), что muted никогда не срабатывало, когда видео динамически добавлялось на страницу. А так как muted не работает, то muted autoplay.

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

Запись в блоге Google об автозапуске/отключении звука всего лишь год, и она дает следующую информацию:

Правила автозапуска Chrome просты:

• Приглушенный автовоспроизведение всегда разрешено.
• Автозапуск со звуком разрешен, если:
  • Пользователь взаимодействовал с доменом (нажмите, нажмите и т.д.).
  • На рабочем столе было превышено пороговое значение индекса вовлеченности пользователя, что означает, что пользователь ранее воспроизводил видео со звуком.
  • На мобильном телефоне пользователь добавил сайт на свой домашний экран.
• Верхние кадры могут делегировать разрешение автозапуска для своих фреймов, чтобы разрешить автоигру со звуком.

Там только одна главная вещь отсутствует!

• HTML-атрибут 'muted' вступает в силу только в том случае, если видео присутствует в HTML файле при начальной загрузке. Это также относится к видео с автоматическим воспроизведением.

Так каково влияние этого:

• Если видео без звука воспроизводится программно, его сначала нужно отключить. Поэтому, если динамическое видео добавлено на страницу, вы должны явно установить video.muted = true после того, как оно добавлено в DOM (или прямо перед тем, как вы его воспроизведете).
• Если вы пытаетесь выполнить video.play() программным video.play() например, когда кто-то прокручивает мимо приглушенного видео и вы хотите, чтобы оно воспроизводилось), то сначала необходимо отключить видео.

Я столкнулся с этим в Angular и потратил слишком много времени, предполагая, что это связано с тем, что я использовал шаблон, или с чем-то связанным с Angular.

Я сделал тестовое приложение на StackBlitz. Вам нужно будет раскомментировать строку //video.muted = true чтобы она работала правильно.

https://stackblitz.com/edit/angular-ze4t9y

Другие важные вещи для реализации:

• Даже если видео на самом деле не имеет звука, оно должно быть отключено. Проверьте видео с кроликом, если вам нужно.
• Новые правила "взаимодействия со СМИ", изложенные в блоге, могут запутать вас при тестировании страницы, поскольку вы взаимодействуете со страницей. Что нужно сделать, это закрыть браузер или открыть новое окно в режиме инкогнито - чтобы сбросить это правило участия (см. Запись в блоге).

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

И, наконец, если вы используете Angular (где все динамически добавляется), следующее отключает видео:

 @ViewChild('bunnyVideo', { read: ElementRef }) bunnyVideo: ElementRef;

Затем, когда вы хотите играть в нее:

 const video: HTMLVideoElement = this.bunnyVideo.nativeElement;

 // explicitly mute it...
 video.muted = true;

 // ...before attempting to play
 video.play().catch((err) => {
    alert('video error ' + err);
 });

Ответ 3

выглядит так, что приглушенный перестает работать в chrome 64. все еще работает в 63.

Ответ 4

<video preload= "true" autoplay = "autoplay" loop = "loop" muted>
    <source src = "video/Real-Estate.mp4" type = "video/mp4">
</video>

Ответ 5

Это прекрасно работает для меня.

<video oncanplay="this.muted=true" id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
</video>

Ответ 6

Чтобы отключить звук через HTML5 вместо jQuery, вы также можете использовать volume="0" в теге видео, например:

<video preload="true" autoplay="" volume="0" poster="img/example.jpg">

Ответ 7

Убедитесь, что ваш аудио кодек установлен на AAC при создании видео. У меня была та же проблема с использованием OpenShot, где по умолчанию установлен AC3.

Ответ 8

В угловом случае можно попробовать [muted] = "muted", это работает для меня.

<video id="video" style="width:100%; height:100%" autoplay [muted]="'muted'" loop>
  <source src="./../../assets/video/model-video.mp4" type="video/mp4">
</video>