Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2019, 14:57
Интересующийся
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 11

Выбор всех элементов
Здравствуйте.
Есть такой код
<section class="features">
    <h2 class="features__title">Особенности</h2>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="1.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="2.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="3.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="4.mp4" type="video/mp4">
    </video>
</section>

И скрип который автозапускает видео когда оно в окне просмотра
<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>
<script>
// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);

  $window.scroll(function() {
    if ($video.is(":in-viewport")) {
      $video[0].play();
    } else {
      $video[0].pause();
    }
  });
});
</script>


Проблема в том что, запускается лишь первое видео, я как понимаю это связано с ноликом в $video[0], т.е. выбирается тег video который первый на странице(нулевой). Я совершенно не знаю JS, и не понимаю как изменить чтобы работало со всеми элементами на странице.
Помогите пожалуйста.
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2019, 15:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

1111,
https://javascript.ru/forum/misc/691...tml#post454509
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2019, 17:15
Интересующийся
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 11

Сообщение от рони Посмотреть сообщение
1111,
https://javascript.ru/forum/misc/691...tml#post454509
Здравствуйте Рони.
Немного не понял на что вы мне дали ссылку, там скрипт анимации.
Почитал в интернете, и как понял, нужно создать цикл, который бы посчитал все элементы video на странице и добавлял бы порядковый номер в переменную $video[0].
пробую так

<script>
// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);
  var i;
  var acc = document.getElementsByClassName("features__video");

  for (i = 0; i < acc.length; i++) {
  $window.scroll(function() {
    if ($video.is(":in-viewport")) {
      $video[i].play();
    } else {
      $video[i].pause();
    }
  })};

});
</script>

Но мне выдает что синтаксическая ошибка, не пойму пока где в чем ошибка
Ответить с цитированием
  #4 (permalink)  
Старый 03.07.2019, 17:18
Интересующийся
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 11

Получилось!
// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);
  var i;
  var acc = document.getElementsByClassName("features__video");


  $window.scroll(function() {
    for (i = 0; i < acc.length; i++) {
        if ($video.is(":in-viewport")) {
            $video[i].play();
          } else {
            $video[i].pause();
          }
        }
    }
 );
});
Ответить с цитированием
  #5 (permalink)  
Старый 03.07.2019, 17:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 1111
Немного не понял на что вы мне дали ссылку
на скрипт который вам нужен, дополнительных библиотек не требуется, ставить в любое место.
window.addEventListener("DOMContentLoaded", anim, false)
window.addEventListener("scroll", anim, false);

function anim() {
   [].forEach.call( document.querySelectorAll('video'), function(el) {
      checkViewport(el) ? el.play() : el.pause()
   });
}
function checkViewport(a) {
    var b = a.getBoundingClientRect();
    return 0 < b.top && b.top + a.scrollHeight < window.innerHeight
};
Ответить с цитированием
  #6 (permalink)  
Старый 03.07.2019, 17:29
Интересующийся
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 11

рони,
Спасибо большое! И правда работает, причем Ваш скрипт намного быстрее работает чем тот Франкиштейн которого сотворил я)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор случайного количества элементов из множества Black_Star jQuery 6 23.10.2016 21:00
Блокировка событий всех дочерних элементов moreo Элементы интерфейса 4 26.05.2012 23:58
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Суммирование значений всех элементов div frolvict jQuery 1 11.07.2011 17:05
Как изменить свойство css у всех элементов одного класса AlexJ Events/DOM/Window 7 19.03.2011 06:25