Определить, произошло ли событие <audio>`pause` в результате взаимодействия с пользователем или опустошения буфера? - PullRequest
Новая
       69

Определить, произошло ли событие <audio>`pause` в результате взаимодействия с пользователем или опустошения буфера?

3 голосов
/ 12 февраля 2020

При воспроизведении потокового аудио, например веб-радио, через <audio> или Audio() событие паузы может запускаться (как минимум) тремя способами:

  1. пользователь нажимает кнопку паузы (с <audio controls>)
  2. пользователь щелкает браузером глобальные элементы управления звуком
    • iOS: Центр управления
    • Android: ящик уведомлений браузера (не менее Chrome, Opera, Firefox)
    • Рабочий стол: Media Session API контролирует, но не инициализируется, без явного setActionHandler (может быть скрыто за флагом на данный момент)
  3. переполнение буфера, вызванное различными условиями сети

Возможно ли dif guish между 1/2 и 3?

  • В идеале, должно быть свойство события, подобное isTrusted, которое мне не хватает
  • Я пытался угадать, глядя esp. в readyState и networkState, но оба они очень неубедительны, особенно в разных браузерах (например, интерпретация / семантика HAVE_FUTURE_DATA против HAVE_ENOUGH_DATA)
  • Я уклонялся от создания «разлагающегося конечного автомата», манипулирования другими событиями. Переполнение буфера составляет , часто , за которым предшествуют stalled события, а иногда , за которыми следуют ended события. Кросс-браузерная реализация кажется безумно сложной, и опасность ложных срабатываний очень высока.

Мне не повезло, пока сессия СМИ не приземлится везде?

Примечание : этот вопрос выглядит как решение, но, к сожалению, нет - браузеры обрабатывают «концы» живых потоков по-разному и непоследовательно.

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

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

const video = document.querySelector('video');

video.addEventListener('pause', (event) => {
  console.log('The Boolean paused property is now true. Either the ' + 
  'pause() method was called or the autoplay attribute was toggled.');
});

resource : события аудиоэлемента

resource : событие паузы

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

3 События: остановлен / ожидает проверки ресурса событий

0 голосов
/ 17 февраля 2020

Событие waiting должно соответствовать вашим потребностям.

Вы можете попробовать эту демонстрацию во время симуляции плохой сети с помощью раскрывающегося списка на вкладке Chrome Network (например, Slow). 3G) 

const video = document.getElementById('mwe_player_0');
video.onwaiting = function() { console.log('onwaiting'); };
<video id="mwe_player_0" controls="" preload="none" style="width:800px;height:450px"><source src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;"></video>

Обратите внимание, что эта демонстрация также работает с HTMLAudioElement (поскольку она наследует HTMLMediaElement). Демоверсию видео проще тестировать.

...