Исправляем ошибку "The play() request was interrupted" в JS

Быстрый ответ

Чтобы избежать ошибки «Приказ на воспроизведение был прерван вызовом pause()», руководитесь процессом воспроизведения и остановки видео с помощью промисов. Гарантируйте исполнение метода pause() лишь после успешного выполнения промиса от play().then() для избежания нарушений в порядке операций:

var videoElement = document.getElementById('videoElement');

videoElement.play().then(() => {
  // Проигрывание успешно стартовало
}).catch(error => {
  // Здесь обрабатываем ошибки, кроме AbortError
});

videoElement.pause();

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

Разберёмся с ситуацией гонки между play и pause

При работе с видео или аудио в JavaScript, может встретиться гонка состояний, когда pause() активируется сразу после play(). Метод play() является асинхронным и возвращает промис, которому требуется время для успешного выполнения. Если pause() активируется слишком быстро, это может вызвать ошибки.

Воспроизведение возможно только в состоянии паузы

Чтобы прервать ненужные запросы на воспроизведение, убедитесь, что videoElement.paused возвращает true перед вызовом play().

if (videoElement.paused) {
  videoElement.play().catch(error => {
    // Здесь производится обработка ошибок
  });
}

Подробнее об этом расскажет наш спикер на видео

Применение async/await в асинхронных операциях

Для сложных операций с медиа-контентом рекомендуется использовать async/await:

async function managePlayback(video) {
  try {
    await (video.paused ? video.play() : video.pause());
  } catch (error) {
    // здесь обрабатываем ошибки воспроизведения
  }
}

Задержка выполнения с помощью setTimeout

Если требуется немедленный вызов pause() после play(), сформировать задержку выполнения можно с помощью setTimeout:

videoElement.play();
setTimeout(() => { videoElement.pause(); }, 100);

Реализация эффективной обработки ошибок

Для того чтобы работа с медиафайлами была стабильной, необходима аккуратная обработка ошибок.

Обработка ошибок промисов

Своевременное и гибкое управление ошибками в случае отклонения промисов:

videoElement.play().then(() => {
  // Воспроизведение успешно запущено
}).catch(error => {
  if (error.name !== 'AbortError') {
    // Здесь обрабатываем все ошибки, кроме AbortError
  }
});

Использование конструкций try...catch в асинхронных функциях

В асинхронных функциях используйте конструкции try...catch для обработки исключений:

async function playVideoElement(video) {
  try {
    await video.play();
  } catch (error) {
    // Обработка ошибок воспроизведения
  }
}

Работаем с частными случаями

Упорядоченный подход к решению частных случаев поможет разобраться и в сложных проблемах.

Отключение звука перед активацией функции pause

Если ошибки все же возникают, попробуйте снизить громкость перед паузой:

videoElement.volume = 0;
videoElement.pause();
videoElement.volume = 1;

Убедитесь, что мультимедиа полностью загружены

Иногда ошибка возникает, если мультимедиафайл не был полностью загружен. Проверьте, что событие loadeddata осуществилось, прежде чем начать воспроизведение:

videoElement.addEventListener('loadeddata', () => {
  videoElement.play().catch(error => {
    // Обработка ошибки
  });
});

Рассмотрите альтернативные методы воспроизведения аудио

Если проблемы сохраняются, потестируйте другие варианты проигрывания аудио:

function playAudioBuffer(audio) {
  if (audio.paused) {
    audio.play().catch(error => {
      // Обработка ошибок
    });
  }
}

Визуализация

Так можно представить активность светофора 🚦:

🚦 Световой сигнал:      | Действие с медиа:
------------------------ | ----------------------
🟢 Зелёный (Играет)      | ➡️ Воспроизведение без остановок.
🟡 Жёлтый (Загружается) | ⏳ Подождите, идёт подготовка к воспроизведению.
🔴 Красный (Пауза)       | ✋ Ожидание, создан запрос на паузу.

Чтобы избежать ошибок, следуйте схеме:

Правильная последовательность: 🟡 ⏳ ➡️ 🟢 
Неправильная последовательность: 🟡 ⏳ ✋ 🔴 ➡️ 🟢

В программировании важно контролировать время, чтобы play() не был прерван pause().

Полезные материалы

1. DOMException – Запрос на воспроизведение был прерван — анализ от Chrome Developers по поводу случаев прерывания воспроизведения видео.
2. Трансляция аудио и видео – Веб-медиатехнологии | MDN — подробное руководство от MDN по устранению проблем с воспроизведением медиа в HTML5.
3. Политика автовоспроизведения в Chrome — обсуждение или политика автоматического воспроизведения влияет на процесс воспроизведения видео.
4. HTML5 Audio — состояние вопроса | HTML5 Doctor — обзор от HTML5 Doctor по поводу возможностей и событий аудио и видео в HTML5.
5. Promise.prototype.catch() – JavaScript | MDN — методы эффективного управления и обработки промисов в JavaScript.
6. Промисы, async/await — подробное объяснение асинхронного программирования в JavaScript.
7. Способы использования промисов – Учебник по веб-разработке | MDN — руководство от MDN о том, как обрабатывать асинхронные операции с промисами в JavaScript.