jQuery на Bootstrap 4 модальных видео - сделай код СУХИМ - PullRequest
Новая
       7

jQuery на Bootstrap 4 модальных видео - сделай код СУХИМ

1 голос
/ 09 ноября 2019

У меня есть несколько видео на одной странице. Они все в моделях Bootstrap 4, поэтому мне пришлось найти какой-нибудь код, который делает autoplay-after-modal-is-show для каждой видео работы. (Если бы я выбирал все видео одновременно, они все воспроизводились бы и делали паузу одновременно.) В результате я создал довольно симпатичный код WET.

Я хотел бы сделать СУХОЙ: 

// Makes video1 play after modal is shown and pause video when the modal is closed
$('#video1').on('shown.bs.modal', function() {
  $('#autoplay-video1')[0].play();
})
$('#video1').on('hidden.bs.modal', function() {
  $('#autoplay-video1')[0].pause();
})

// video 2
$('#video2').on('shown.bs.modal', function() {
  $('#autoplay-video2')[0].play();
})
$('#video2').on('hidden.bs.modal', function() {
  $('#autoplay-video2')[0].pause();
})

// video 3
$('#video3').on('shown.bs.modal', function() {
  $('#autoplay-video3')[0].play();
})
$('#video3').on('hidden.bs.modal', function() {
  $('#autoplay-video3')[0].pause();
})

// video 4 ... (etc.)

1 Ответ

1 голос
/ 09 ноября 2019

Использование селектора «начало с» может работать для вас: 

$('[id^=video]').on('shown.bs.modal', function() {
  $('#autoplay-' + $(this).attr('id'))[0].play();
})
$('[id^=video]').on('hidden.bs.modal', function() {
  $('#autoplay-' + $(this).attr('id'))[0].pause();
})

Но это может сломаться, если у вас есть другие элементы с идентификатором, начинающимся с «видео», например: 

<div id="video-wrapper">…</div>

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

<video data-video="1">…</video>

$('[data-video]').on('shown.bs.modal', function() {
  $('#autoplay-video' + $(this).attr('data-video'))[0].play();
})
$('[data-video]').on('hidden.bs.modal', function() {
  $('#autoplay-video' + $(this).attr('data-video'))[0].pause();
})
...