This is not a perfect one, because I already discover the use of youtube API right now. This was the previous research I’ve done. But it is worth to put here as post as journal.
It runs good already. Much better then the previous I have done for youtube playlist.
It already can pause directly from playlist, pause on takeover by other playlist. test it yourself.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="youtube-player-wrapper" data="this is just wrapper, not important"> <div class="timer" style="display:none ;position: fixed;background: yellow;padding: 20px;font-size: 50px;top: 50%;left: 0;"></div> <div class="tube-caller" data-youtubelist='[ "https://www.youtube.com/watch?v=Bk5ZL2n6uPs", "https://www.youtube.com/watch?v=t2QNBpc0vy4", "https://www.youtube.com/watch?v=kMjdEWf2Dq0"]' ></div> <div class="tube-caller" data-youtubelist='[ "https://www.youtube.com/watch?v=6irLhCxvpfY", "https://www.youtube.com/watch?v=x6wYV6UP0SU", "https://www.youtube.com/watch?v=SsIk8c7mSdI"]' ></div> </div> |
jQuery / Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 |
$(document).ready(function () { var resize_button var thumb_hover_preview var init_width var init_height var list_as_link var fallbackiframe_src $('.tube-caller').each(function () { // change this variables $tube_wrapper = $(this); resize_button = true; thumb_hover_preview = true; init_width = 560; init_height = 315; list_as_link = true; fallbackiframe_src = 'https://www.youtube.com/embed/hsQWAyh9Z6o'; /* BUILDING BLOCKS */ $(this).removeClass().addClass('tube-wrapper').append('<iframe src="' + fallbackiframe_src + '" frameborder="0" width="' + init_width + '" height="' + init_height + '" allowfullscreen></iframe><div class="tool-wrap"><div class="ytl-credit">(i)</div></div><div class="list-wrapper"></div>'); // do not change this variables var daftar_id = $tube_wrapper.data('youtubelist'); var list_wrapper = $tube_wrapper.find('.list-wrapper'); var list_item = $tube_wrapper.find('.list-wrapper a'); var the_iframe = $tube_wrapper.find('iframe'); /* EACH ID */ $.each(daftar_id, function (index, value) { var url = value; video_id = url.match(/v=(.{11})/)[1]/* striping url */ var id = video_id; var the_title = ''; /* TITLE AKAN DICARI MENGGUNAKAN JSON. use the Noembed service to get oEmbed data with JSONP for YouTube videos. */ $.getJSON('https://noembed.com/embed', { format: 'json', url: url }, function (data) { the_title = data.title; if (list_as_link == true) { list_wrapper.append('<a href="#" hrefx="' + url + '" youtube-id="' + id + '" class="yt-list-item">' + the_title + '<img class="thumb-pop" style="display:none;" src="http://img.youtube.com/vi/' + id + '/mqdefault.jpg" /></a>'); } else { list_wrapper.append('<a youtube-id="' + id + '" class="yt-list-item">' + the_title + '<img class="thumb-pop" style="display:none;" src="http://img.youtube.com/vi/' + id + '/mqdefault.jpg" /></a>'); } //set the default video var first_load = list_wrapper.children(':first').addClass('hilite').attr('youtube-id'); the_iframe.attr('src', 'https://www.youtube.com/embed/' + first_load + '?autoplay=0'); }); }); if (resize_button == true) { $tube_wrapper.find('.tool-wrap').append('<div class="but-sizer zoom-a">Bigger Player</div>'); } // INITIAL SIZE IFRAME WINDOW $(the_iframe).css({ width: init_width, height: init_height }); $(the_iframe).css({ 'box-sizing': 'border-box' }); }); //on click list-items $(document).on('click', '.yt-list-item ', function (e) { var this_parent = $(this).parents('.tube-wrapper'); var intz = 0; if ($(this).hasClass('playing')) { $(this).parents('.tube-wrapper').find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); $(this).removeClass('playing').addClass('pausing'); } else if ($(this).hasClass('pausing')) { // STOP ANY OTHER PLAYING VIDEO $('.tube-wrapper').each(function () { if ($(this).find('.playing').length) { var play_id = $(this).find('.playing').attr('youtube-id'); $(this).find('.playing').addClass('taken-over played pausing').removeClass('playing'); $(this).find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); } }); // SET IFRAME TO PLAY VIDEO this_parent.find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); // WAITING THE FILE TO LOAD SO COMMAND CAN BE EXECURE "NOT THE GOOD TECHNIC SO FAR" var aaaa = setInterval(function () { intz += 1; intz_x = intz this_parent.find('.playing').attr('itv', intz_x); }, 1000); // SET THIS AS PLAYING $(this).removeClass('pausing').addClass('playing'); } else { //STOP ALL OTHER PLAYER $('.tube-wrapper').find('.taken-over').removeClass('taken-over'); $('.tube-wrapper').each(function () { if ($(this).find('.playing').length) { var play_id = $(this).find('.playing').attr('youtube-id'); $(this).find('.playing').removeClass('playing').addClass('taken-over played pausing'); $(this).find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); } }); this_parent.find('.pausing').removeClass('pausing').addClass('taken-over played'); // SET TO PLAY THE CLICKED var srcz = $(this).attr('youtube-id'); this_parent.find('iframe').attr('src', 'https://www.youtube.com/embed/' + srcz + '?enablejsapi=1&version=3&playerapiid=ytplayer'); var wait_time = 5000; secondz = 0; var timer_sec = setInterval(function () { secondz += 1; if (secondz == wait_time / 1000) { clearInterval(timer_sec); $('.timer').hide(); } $('.timer').text(secondz); }, 1000); $('.timer').show(); var player = this_parent.find('iframe')[0]; var timez = player.contentWindow.postMessage('{"event":"command","func":"' + 'getCurrentTime' + '","args":""}', '*'); $('.get-time').text(timez); setTimeout(function () { this_parent.find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); var fffx = setInterval(function () { intz += 1; intz_x = intz this_parent.find('.playing').attr('itv', intz_x); this_parent.find('.playing').on('click', function () { clearInterval(fffx); }); }, 1000); }, wait_time); // waktu kira2 loading video this_parent.find('.hilite').removeClass('hilite'); $(this).addClass('playing'); } e.preventDefault(); }); $("iframe").load(function () { $(this).contents().on("mousedown, mouseup, click", function () { alert("Click detected inside iframe."); }); }); // IMAGE FOLLOW MOUSE -- OK if (thumb_hover_preview == true) { $(document).on('mouseover', '.yt-list-item', function () { var $img = $(this).children('.thumb-pop'); $(this).mousemove(function (e) { $(this).children($img).stop(1, 1).show(); $(this).children($img).offset({ top: e.pageY - $img.outerHeight(), left: e.pageX + 15 /* - ( $img.outerWidth() /2 )*/ }); }).mouseleave(function () { $img.hide(); }); }); }; // BUTTON RESIZE IFRAME WINDOW $(document).on('click', '.zoom-a', function () { var wrapper_width = $(this).parents('.tube-wrapper').width(); var ratio_height = (wrapper_width / 16) * 9; var frame = $(this).parents('.tube-wrapper').find('iframe'); $(this).addClass('zoom-b').removeClass('zoom-a').html('Smaller Player'); $(frame).animate({ width: wrapper_width, height: ratio_height }).removeAttr('width, height'); }); $(document).on('click', '.zoom-b', function () { var frame = $(this).parents('.tube-wrapper').find('iframe'); $(this).addClass('zoom-a').removeClass('zoom-b').html('Bigger Player'); $(frame).animate({ width: init_width, height: init_height }).removeAttr('width, height'); }); // CREDIT $(document).on('click', '.ytl-credit', function () { $(this).toggleClass('ytl-showing'); }); }); |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
.tube-wrapper { display: block; } .playlist-wrapper iframe { border-radius: 5px; border: 8px solid #eee; } .list-wrapper a { display: table; cursor: pointer; } .list-wrapper { margin-left: 10px; margin-bottom: 30px; clear: both; } .played { opacity:0.5; } .playing , .hilite { opacity:1 !important; color: red !important; } .playing::before { content: "\25BA"; margin: 0 6px 0 0; } /* .taken-over::before { content: "\25AB"; margin: 0 6px 0 0; } */ .pausing::before { content: "\258C \258C "; } .thumb-pop { position: absolute; width: 80px; border-radius: 4px !important; margin-left: 23px; border: 2px solid white !important; } .but-sizer { background: #aaa8a8; border-radius: 0 0 20px 20px; padding: 5px 20px; font-size: 12px; border: 5px solid #d1d1d1; margin: -5px 0 11px; cursor: pointer; color: white; } .tube-wrapper iframe { border: 5px solid rgb(209, 209, 209); border-radius: 5px; } .tool-wrap { margin-bottom: 20px; box-sizing: border-box; margin-top: -11px; } .tool-wrap * { background: #aaa8a8; font-size: 11px; border: 5px solid #d1d1d1; cursor: pointer; color: white; padding: 5px 13px; display: table; } .ytl-credit { border-radius: 0 0 0 20px; float: left; } .but-sizer { border-radius: 0 0 20px 0; border-left: 0; } .ytl-showing::after { content: ' ..Script by Toni Agustian, 2019'; } |