объединить два скрипта в один с jquery - PullRequest
0 голосов
/ 10 марта 2020

У меня есть два скрипта для YouTube и html5 видеоплеер, сгенерированный скриптом jquery, как мне конвертировать в один скрипт?

Это мои HTML кнопки

<button id="modal-video1" class="modal-video" data-video="https://www.youtube.com/watch?v=43ngkc2Ejgw">video 1</button>


<button id="modal-video2" class="modal-video" data-video="https://www.w3schools.com/html/mov_bbb.mp4">video 2</button>

<div id="video-modal"></div>

JS ДЛЯ МОЛОДЕЖИ:

$("#video-modal").append('<div class="modal-container"></div><button class="modal-close"><span>close modal</span></button><span class="modal-overlay"></span>');

function popYouTubeId(buttonid) {
    var youTubeUrl = $(buttonid).attr('data-video');
    var youTubeId;
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = youTubeUrl.match(regExp);
    if (match && match[2].length == 11) {
        youTubeId = match[2];
    } else {
        youTubeId = 'no video found';
    }

    $('.modal-container').html('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + youTubeId + '?autoplay=1&loop=1&playlist=' + youTubeId + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>');
    $('.modal-close, .modal-overlay').click( function(){
        $('.modal-container').empty();
        $('#video-modal').removeClass('launched');
    });
}

var buttonid;

$('.modal-video').click( function(){
    buttonid = '#'+$(this).attr('id');
  popYouTubeId(buttonid);

  $('#video-modal').addClass('launched');
});    

JS ДЛЯ HTML5 ВИДЕО (MP4)

$("#video-modal").append('<div class="modal-container"></div><button class="modal-close"><span>close modal</span></button><span class="modal-overlay"></span>');

function popVideoId(buttonid) { 
    var videolink = $(buttonid).attr('data-video');

    $('.modal-container').html('<video controls autoplay><source src='+videolink+' type="video/mp4"></video>');
    $('.modal-close, .modal-overlay').click( function(){
        $('.video-modal-container').empty();
        $('#video-modal').removeClass('launched');
    });
}

var buttonid;

$('.modal-video').click( function(){
    buttonid = '#'+$(this).attr('id');
  popVideoId(buttonid);

  $('#video-modal').addClass('launched');
});    

Итак, я хочу объединить только два js в одно.

Например, сценарий будет:

, если это YouTube

.html('<iframe width="560" height="315" src="https://www.youtube.com/embed...

еще видео html5

.html('<video controls autoplay><source src='+videolink+' type="video/mp4"></video>');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...