BarnyBroken
@BarnyBroken
Дизайнер, веб-разработчик.

Как запустить видеозапись без get(0)?

Всем привет. В общем задумал написать небольшую функцию для удобства для видео. Точнее кастомный HTML5 плеер.
Все бы ничего, практически все работает но для одного видео. Как то по началу не заморачивался, думал в конце все сделаю. Но увы, ничего не выходит.

В общем написал функцию, подключаю $('video').video(); Функция обволакивает в div, добавляет блоки с controls кастомными и т.д. Соответсвенно в функции обращаюсь к элементу через this (let self = this;). Само собой если запустить self.play() - работать не будет, нужно указать объект, т.е. self[0].play или self.get(0).play.

Подскажите пожалуйста, как сделать так, чтобы на странице открывалось не первое видео, а каждая сама по себе.
Не знаю, правильно ли я выразился, но надеюсь суть понятна.
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
Насколько я правильно понял, то .video() - это jQuery плагин.
<video class="plugin-video" src="https://www.w3schools.com/htmL/mov_bbb.mp4"></video>
<video class="plugin-video" src="https://www.w3schools.com/htmL/mov_bbb.mp4"></video>
<video class="plugin-video" src="https://www.w3schools.com/htmL/mov_bbb.mp4"></video>


(function($){
  $(function(){
    // инициализация плагина
    $.fn.video = function(){
      // применяем к каждому элементу
      $(this).each(function(){
        // элемент с видео 
        var video = this;
        // обертка
        var $wrap = $('<div/>');
        // добавить после видео
        $(this).after($wrap);
        // видео в обертку
        $wrap.append($(this));
        // кнопка play
        var $btn = $('<button/>', {
          type: 'button',
          value: 'play',
          text: 'play'
        });
        // добавить кнопку
        $wrap.append($btn);
        // ловим клик по кнопке и элемент видео "замыкаем"
        $btn.on('click', (function(video){
          // из замыкания возвращаем функцию 
          return function(){
            // юзверь хочет видео ))
            video.play();
          }
        })(video)) 
      });
    };
    
    // применяем плагин
    $('.plugin-video').video();
  });
})(jQuery);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы