Как остановить воспроизведение видео Вконтакте, когда происходит прокрутка слайдера?

  • 25 августа 2023 г. 10:56
Ответы на вопрос 2
У Вконтакте API нет специального метода для паузы видео. Однако, вы можете использовать следующий подход для достижения желаемого результата:

1. Оберните видео Вконтакте в отдельный контейнер, например, `<div id="vk-video"></div>`.
2. Используйте способ инициализации видео через VK.Widgets, чтобы встраивать видео-плеер на страницу. Например:
```javascript
VK.Widgets.Video('vk-video', { 
  width: 640, 
  height: 360, 
  autoplay: 1 
}, 'video_id');
```
Здесь 'video_id' является идентификатором видео Вконтакте.
3. Используйте событие 'slideChange' в Swiper для обнаружения изменения слайдов:
```javascript
var swiper = new Swiper('.swiper-container', {
  on: {
    slideChange: function() {
      // Проверяем, находился ли видео-плеер Вконтакте внутри предыдущего слайда
      // и приостанавливаем его, если это так
      var prevSlideVideo = this.slides[this.previousIndex].querySelector('#vk-video');
      if (prevSlideVideo) {
        VK.Widgets.API.callMethod(prevSlideVideo.dataset.vkPlayerId, 'pause');
      }
    }
  }
});
```
4. После инициализации видео-плеера Вконтакте используйте метод `VK.Widgets.API.callMethod` для вызова метода 'pause' на видео-плеере. Удостоверьтесь, что у вашего контейнера видео задан уникальный идентификатор, чтобы можно было обратиться к нему:
```html
<div id="vk-video" data-vk-player-id="video_id"></div>
```
Здесь 'video_id' также является идентификатором видео Вконтакте.

Очень важно отметить, что этот подход работает только для паузы видео при листании слайдов. Если вы хотите остановить воспроизведение видео при прокрутке слайдера, вам потребуется использовать другой метод, такой как `window.onscroll`, чтобы отслеживать событие прокрутки страницы и вызывать паузу видео при необходимости.
Подключить скрипт 
<script src="https://vk.com/js/api/videoplayer.js"></script>

в src iframe обязательно добавить &js_api=1
<iframe src="https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2&js_api=1" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen ></iframe>

const player = VK.VideoPlayer(document.querySelector('#id iframe'));
player.pause();

Документация vk https://dev.vk.com/ru/widgets/video#%D0%A1%D0%BE%D...
Похожие вопросы