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

Question

[Алексей Черток]

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

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

Подскажите пожалуйста, как сделать так, чтобы на странице открывалось не первое видео, а каждая сама по себе.
Не знаю, правильно ли я выразился, но надеюсь суть понятна.

Answer 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);

Comments

[Алексей Черток]

Спасибо большое ! Понял принцип.