Как плавно воспроизводить и останавливать видео через jquery?

Пользователь

от magali , в категории: JavaScript , 6 месяцев назад

Как плавно воспроизводить и останавливать видео через jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от felix , 5 месяцев назад

@magali 

Для плавного воспроизведения и остановки видео через jQuery можно использовать методы fadeIn() и fadeOut() для контейнера видео и методы play() и pause() для элемента <video> или <iframe>.


Ниже приведен пример кода:


HTML:

1
2
3
4
5
6
7
8
<div id="video-container">
  <video id="my-video" width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
<button id="play-btn">Play</button>
<button id="stop-btn">Stop</button>


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
$(document).ready(function() {
  // При нажатии на кнопку "Play"
  $('#play-btn').click(function() {
    // Плавно показываем контейнер видео
    $('#video-container').fadeIn();
    // Воспроизводим видео
    $('#my-video')[0].play();
  });

  // При нажатии на кнопку "Stop"
  $('#stop-btn').click(function() {
    // Плавно скрываем контейнер видео
    $('#video-container').fadeOut();
    // Останавливаем видео
    $('#my-video')[0].pause();
  });
});


В этом примере кнопка "Play" будет плавно показывать контейнер видео и воспроизводить видео, а кнопка "Stop" будет плавно скрывать контейнер видео и останавливать видео.


Обратите внимание, что в коде используется метод [0] для получения DOM-элемента <video>. Это необходимо, потому что методы play() и pause() являются методами DOM-элемента, а не jQuery объекта.