С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Николай16
24 / 8 / 8
Регистрация: 13.12.2015
Сообщений: 268
1

Остановить воспроизведение видео при прокрутке его за пределы экрана.

14.02.2018, 12:22. Просмотров 482. Ответов 1
Метки нет (Все метки)

Сделал функцию на такой логике: когда я дохожу к видео оно начинает воспроизведение.

Нужно закончить логику: когда я отхожу от видео и оно не в поле зрения - видео становится на паузу
HTML5
1
2
3
4
5
<div style="margin-top: 2000px;"></div>
<video class="elem" id="myAudio" width="450" height="350">
                <source src="http://test-task.dostavka2.me/video/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var target = $('.elem');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
 
$("window").scroll(function() {
  var winScrollTop = $(this).scrollTop();
  if (winScrollTop > scrollToElem) {
    //Сработает, когда пользователь доскроллит до элемента с классом .elem
    $('.elem').play();
  } else {
    $('.elem').stop();
  }
});
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.02.2018, 12:22
Ответы с готовыми решениями:

JQuery табы и видео с youtube, как остановить видео при переключении?
Дорогие друзья, нужна очень ваша помощь, ума не приложу как реализовать...

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

Остановить видео при закрытии модального окна
При клике на картинку появляется модальное окно. В нём видео. Если запустить...

Воспроизведение видео при скролле к нему
Всем привет. Есть проблема. У меня стоит задача сделать слайдер в котором...

Остановить видео из ютуб при закрытии модального окна
Как остановить или поставить на паузу видео, если модальное окно закрывается?...

1
Уф
600 / 580 / 372
Регистрация: 13.07.2015
Сообщений: 1,767
Завершенные тесты: 1
14.02.2018, 16:38 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var target = $('.elem');
var targetPos = target.offset().top;
var targetHeight = target.height();
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
 
$("window").scroll(function() {
  var winScrollTop = $(this).scrollTop();
  if (winScrollTop > scrollToElem && winScrollTop <  scrollToElem + winHeight + targetHeight ) {
    //Сработает, когда пользователь доскроллит до элемента с классом .elem
    $('.elem').play();
  } else {
    $('.elem').stop();
  }
});
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.02.2018, 16:38

Остановить видео в слайдере при переходе на другой слайд
На 1 странице, есть два слайда и в каждом есть видео, как сделать так, что при...

FullPage.js. Авто воспроизведение видео при переходе на секцию
Добрый день! Подскажите пожалуйста скриптом. У меня плагин FullPage и есть...

Остановить/запустить видео
Копаю-рою, ничего понять не могу. Нужно останавливать/запускать видео по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru