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

@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, при нажатии на которые будет происходить воспроизведение и остановка видео соответственно.

@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().