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

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>

 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();
  });
});