Блог

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

Когда пользователь загружает страницу, прямая трансляция запускается автоматически (приглушенная и скрытая — см. Ниже), и пользователю придется включить видео (даже если они его еще не видят), но я не хочу, чтобы они действительно слышали прямую трансляцию до отведенного времени. Я не хочу, чтобы им приходилось вручную включать видео в выделенное время — моя цель — чтобы все были подключены и работали стабильно, чтобы (например) в 10:04:30 точно каждый мог видеть и слышать прямую трансляцию в течение 30 секунд, затем она исчезает (и отключается) до следующего раза (скажем) в 10:07:15 и так далее. и так далее. Процесс должен происходить таким образом, чтобы пользователь мог откинуться на спинку кресла и не использовать мышь или клавиатуру после начальной загрузки страницы и включения прямой трансляции.

Работа с видеозаписью проста — я могу просто показать / скрыть div с черным фоном, который закрывает видео, но я не уверен, как справиться со звуковой стороной вещей. Можно ли отключить / включить веб-страницу в целом? Существуют ли другие способы достижения этой цели?

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

Издатель и зрители подключаются с помощью WebRTC.

Предполагая что-то вроде следующего:

 <video id="vid" ...></video>
<div id="controls" ...>
  <button id="mute-btn">Mute</button>
</div>
  

Тогда вам нужно что-то вроде этого:

 const vid = document.querySelector('#vid')
const muteBtn = document.querySelector('#mute-btn')

vid.muted = true

window.userHasUnmuted = false
window.liveStreamStarted = false

muteBtn.addEventListener('click', () => {
  window.userHasUnmuted = true

  if (window.liveStreamStarted) {
    vid.muted = false
  }
}

// then, in callback for whenever live-stream starts...

if (window.userHasUnmuted) {
  vid.muted = false
}
  

Оригинальный ответ ниже

Чтобы отключить звук одного элемента audio или video :

 audioOrVideoElement.muted = true
  

Чтобы отключить звук всех audio элементов video на странице:

 document.querySelectorAll('audio, video').forEach(el => el.muted = true)
  

И наоборот, установка muted на false повторно включает звук из этого элемента.

Для более точной настройки элементов управления звуком вы также можете установить volume (в диапазоне 0..1 ) элемента, например:

 document.querySelectorAll('audio, video').forEach(el => el.volume = 0.3)