У меня есть два скрипта для 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>');