Управление воспроизведением HTML5 видео через JQuery

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

Чтобы переключать состояние воспроизведения видео с помощью jQuery, используйте следующий код:

$('#toggle').click(() => $('#video')[0].paused ? $('#video')[0].play() : $('#video')[0].pause());

В данном коде #video — это идентификатор вашего видео, а #toggle — идентификатор кнопки. Этот скрипт запускает воспроизведение, когда у видео включена пауза, и останавливает его, если воспроизведение активно.

Расширенное управление видео при помощи jQuery

Несмотря на пользу от применения чистого JavaScript, бывают ситуации, когда jQuery становится удобным для взаимодействия с DOM и обработки событий.

Ситуации, когда выбор в пользу jQuery оправдан

jQuery становится хорошим инструментом для управления видео, когда вы столкнулись со сложными манипуляциями DOM либо в команде преобладает привычка использовать эту библиотеку.

Если ваш код уже насыщен jQuery

Если ваш проект активно использует jQuery, то логично прибегать к нему для организации кода:

$('.videoClass').click(function() {
  var video = $(this).get(0);
  video.paused ? video.play() : video.pause();
});

Данный код запускает или приостанавливает воспроизведение видео при наступлении события click.

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

Остановка воспроизведения видеооператора, покинувшего видимую область

В ситуациях, таких как вкладки или карусели, jQuery поможет приостановить воспроизведение видео, чтобы не отвлекать внимание пользователя:

$('a.tab').on('click', function() {
  $('video').each(function() {
    this.pause();
  });
});

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

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

Представьте HTML5 видео как качели, а jQuery — как родителя, который определяет, когда они двигаются или остановлены:

🎥 ▶️ 🧔⏸️ 🎥

Для старта воспроизведения:

$('video').get(0).play(); // 🧔 запускает качели

Для приостановки:

$('video').get(0).pause(); // 🧔 останавливает качели

Эти команды позволяют чередовать активность и паузу видео.

Лучшие практики работы с адаптивным HTML5 видео

Рассмотрим надежные способы, которые делают HTML5 видео адаптивным.

Проверяйте состояние .paused перед переключением

Перед тем как запустить видео или поставить его на паузу, проверьте текущее состояние:

$('#playPauseButton').click(function() {
  var videoElement = $('#myVideo').get(0);
  videoElement.paused ? videoElement.play() : videoElement.pause();
});

Особое внимание к динамически обновляемому DOM

При работе с динамично обновляемым DOM актуально делегирование событий:

$(document).on('click', '.playPause', function() {
  var videoElement = $(this).siblings('video').get(0);
  videoElement.paused ? videoElement.play() : videoElement.pause();
});

Данный прием позволяет реагировать даже на вновь добавленные элементы.

Применение JavaScript для управления единственным элементом видео

Если нужно взаимодействовать с одним видеоэлементом, чистый JavaScript может быть более эффективным:

document.getElementById('playPause').addEventListener('click', function() {
  var videoElement = document.getElementById('myVideo');
  videoElement.paused ? videoElement.play() : videoElement.pause();
});

JavaScript действует быстрее, что актуально для тех, кто предпочитает избегать использования jQuery.

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

1. click event | jQuery API Documentation — Описание обработки событий клика в jQuery на официальном сайте.
2. <video>: Элемент встроенного видео – HTML | MDN — Руководство MDN по использованию элемента видео HTML5.
3. Учебник по jQuery — Отличный учебник для начинающих изучать jQuery.
4. HTML тег video — Детали использования тега <video> в HTML5.
5. Video.js – Сделайте свой плеер уникальным | Video.js — Библиотека редактируемого плеера с богатыми возможностями для настройки.
6. Понимание делегирования событий | jQuery Learning Center — Изучение принципа делегирования событий в jQuery, важного для добавления функций плей и пауза видеоэлементам.