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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от bart , 10 месяцев назад

@caterina 

Для плавного воспроизведения и остановки видео через jQuery можно использовать методы .play() и .pause() объекта HTMLVideoElement.


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var video = $("#myVideo")[0];

// Воспроизведение видео
$("#playButton").click(function() {
  video.play();
});

// Остановка видео
$("#pauseButton").click(function() {
  video.pause();
});


В этом примере предполагается, что у вас есть элемент <video> с идентификатором myVideo и кнопки с идентификаторами playButton и pauseButton, при нажатии на которые будет происходить воспроизведение и остановка видео соответственно.

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

от cayla , 9 дней назад

@caterina 

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


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var video = $("#myVideo")[0];

// Воспроизведение видео с плавным появлением и изменением громкости
$("#playButton").click(function() {
  video.play();
  $("#myVideo").fadeIn("slow");
  video.volume = 0;
  $(video).animate({volume: 1}, 1000);
});

// Остановка видео с плавным исчезновением и изменением громкости
$("#pauseButton").click(function() {
  video.pause();
  $(video).animate({volume: 0}, 1000, function() {
    $("#myVideo").hide();
  });
});


В этом примере добавлены эффекты fadeIn() для плавного появления видео и animate() для плавного изменения громкости звука при воспроизведении и остановке видео. Кроме того, после завершения анимации изменения громкости видео скрывается с использованием метода hide().