VIDEO PLAYER WITH MULTILINE PROGRESS BAR
search5.html is based on my two files: search2.html and search4.html
It can:
- Search videos
- Play: single videos, playlists and videos that are marked by "start = ..." and "end = ..."
- Save the list of videos as javscript file ("js list file") to your PC hard disk.
- Load "js list file" from your PC and play the videos of this list continuously.
Besides, I also try to create multiline progress bar (with N = 1, 4 or 8 lines).
I think this kind of progress bar is useful when we need to mark "start/end"
for the videos having very long duration (1, 2 or 3 hours). However for video with
short duration it's better to use normal (one line) progress bar (progress bar will
be running smoother).
The buttons beneath the progress bar:
"30", "60", "120": to roll forward the video to 30, 60, 120 seconds
"-15", "- 6": to roll back the 15, 6 seconds.
The button "0:00" is to write "0:00" to the "Start text box"
Button "Dur" (Duration) to record the duration of the video on the "End text box".
The button "-1" (colored light green or pink) to correct the number of seconds in
the "Start text box" or "End text box", reducing this number by 1 second.
"Add" button is to add the playing video to the table of selected (favorite) videos.
Note: press the "Add" only when you see that the "player state" is "playing"
This page is still under construction, so using it might be not easy.
You can watch search5x.html at the following address (open it in Fire Fox browser or Chrome):
http://play-videos.url.ph/v3/search5x.html
SOURCE CODE OF search5x.html
If you are using "FireFox" browser you can
Save the 2 related files by executing the following steps:
Move the mouse pointer over the link, right-click and choose "Save Link as ..."
http://play-videos.url.ph/v3/search5x.html (as type Firefox HTML Document)
http://play-videos.url.ph/v3/yt-playlist.jpg
Don't forget to replace my key with your api key and it's better to open "search5x.html" on your PC under XAMMP server simulation environment or upload those two files to your hosting server.
It can:
- Search videos
- Play: single videos, playlists and videos that are marked by "start = ..." and "end = ..."
- Save the list of videos as javscript file ("js list file") to your PC hard disk.
- Load "js list file" from your PC and play the videos of this list continuously.
Besides, I also try to create multiline progress bar (with N = 1, 4 or 8 lines).
I think this kind of progress bar is useful when we need to mark "start/end"
for the videos having very long duration (1, 2 or 3 hours). However for video with
short duration it's better to use normal (one line) progress bar (progress bar will
be running smoother).
The buttons beneath the progress bar:
"30", "60", "120": to roll forward the video to 30, 60, 120 seconds
"-15", "- 6": to roll back the 15, 6 seconds.
The button "0:00" is to write "0:00" to the "Start text box"
Button "Dur" (Duration) to record the duration of the video on the "End text box".
The button "-1" (colored light green or pink) to correct the number of seconds in
the "Start text box" or "End text box", reducing this number by 1 second.
"Add" button is to add the playing video to the table of selected (favorite) videos.
Note: press the "Add" only when you see that the "player state" is "playing"
This page is still under construction, so using it might be not easy.
You can watch search5x.html at the following address (open it in Fire Fox browser or Chrome):
http://play-videos.url.ph/v3/search5x.html
SOURCE CODE OF search5x.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>S5-search-play-videos</title> <style> body{ font-family:Arial;font-size:10pt;background-color:#CCCCCC; margin:0px; padding:0px; } #header1{ color:white;font-weight:bold;width:600px; /*height:50px; */ background-color:#333366;padding-top:3px; padding-bottom:3px; position: fixed; top: 0px; } #header1 td {border: none;} a:hover { background-color: #CCFF99; } input[type="button"], button{ background-color:#DDDDDD;cursor:pointer;padding:0px; } td, #tbodySel td{ font-size:9pt;vertical-align:top;border:1px gray solid;padding:2px; } .bar{ width:586px;height:20px;background-color:#CC99CC; color:black; font-weight:bold;padding:6px; } .barGreen{ width:586px;height:20px;background-color:#339933; color:black; font-weight:bold;padding:6px; } .barOrange{ width:586px;height:20px;background-color:#CC9936; color:black; font-weight:bold;padding:6px; /* #FF9966 */ } .barFooter{ width:586px;height:20px;background-color:#333366; color:white; font-weight:bold;padding:6px; /* #FF9966 */ } #showState{ border:2px solid gray;border-style:inset;color:#66FF00; font-weight:bold;text-align:left;background-color:black; padding:3px;padding-left:8px; } #wantSpan, foundText{ font-weight:bold;font-size:12pt;text-align:center;font-style:italic; } #wantSpan{ color:#666600; } #foundText{ color:green; } .height{ } #progress-bar{ position: relative; /*width: 580px; */ height: 4px; cursor: pointer; background-color:red; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> </head> <body onload="init()"> <div align="center"> <div id="header1" style="width:600px;left:0px;"> <div style="margin-left:5px;float:left;padding-top:3px;font-size:12pt"> SEARCH 5 </div> <div id="showState" style="margin-right:0px;float:left;width:90px;height:15px;margin-top:0px;"> </div> <div id="curTimeDiv" style="margin-left:5px;float:left;padding-top:3px;font-size:10pt;width:60px;text-align:right;font-weight:normal"> time </div> <div style="margin-left:0px;float:left;padding-top:3px;font-size:10pt;width:10px;text-align:center;font-weight:normal"> / </div> <div id="durationDiv" style="margin-left:0px;float:left;padding-top:3px;font-size:10pt;width:60px;text-align:left;font-weight:normal"> time </div> <button onclick="scrollToElement('help', 85)">Help</button> <button onclick="scrollToElement('showState',31)" style="background-color:#FFFF99">Screen</button> <button type="button" onclick="pauseYoutube();">Pause</button> <button type="button" onclick="playYoutube();" style="background-color:#FFFF99"> Play</button> <button type="button" onclick="nextVid();">Next</button> <div style="margin-top:8px;margin-bottom:2px"> <input type="button" onclick="scrollToElement('saving',70)" value="Save"> <input type="button" onclick="scrollToElement('loading',70)" value="Load"> <input type="button" onclick="scrollToElement('searching',70)" value="Search"> <button type="button" onclick="bigSmall(600);" style="background-color:#FFFF99">Small</button> <button type="button" onclick="bigSmall(780);">Mid</button> <button type="button" onclick="bigSmall(960);">Big</button> <span style="font-weight:normal">Progress Bars:</span> <button onclick="gN = 1;makeNbars();newNbars()">N=1</button> <button onclick="gN = 4;makeNbars();newNbars()">N=4</button> <button onclick="gN = 8;makeNbars();newNbars()">N=8</button> <button id="subNextBut" onclick="subNext()">Sub Next</button> <button id="addBut1" onclick="addVid()">Add</button> </div> </div> <div class="smallScr" id='player' style="background-color:#CCCCCC;margin-top:60px"></div> <div id="vtitle" style= "width:600px;height:34px;color:white;background-color:#1B1B1B;padding-top:1px;overflow:hidden"> </div> <div id="progressDiv" style="background-color:#1B1B1B;width:600px;padding-top:0px;padding-bottom:3px"> </div> <div id="seControl" style="color:white;background-color:#1B1B1B;width:600px;padding-top:0px;padding-bottom:8px"> <button onclick="Ahead(30)">30</button> <button onclick="Ahead(60)">60</button> <button onclick="Ahead(120)">120</button> <button onclick="goBack(15)">-15</button> <button onclick="goBack(6)">-6</button> <input id="sMark" size=7> <button style="background-color:#CCFF99" onclick="putBegin()">0:00</button> <button style="background-color:#CCFF99" onclick="putStartBack(1)">-1</button> <button onclick="startMark()">Start</button> <input id="eMark" size=7> <button style="background-color:#FFCCFF" onclick="putDuration()">Dur</button> <button style="background-color:#FFCCFF" onclick="putEndBack(1)">-1</button> <button onclick="endMark()">End</button> </div> <br> <div class="bar">FIRST VIDEO LIST <button onclick="clearTable('tbody2');vvsum2 = 0">Clear this table</button> <button onclick="readJS('tbody2');vvsum2 = 0">Load Embedded List</button> </div> <br> <div style="width:600px;height:300px;overflow:auto;background-color:white"> <table style="width:100%"><tbody id='tbody2'></tbody></table> </div> <br> <div class="bar">SELECTED VIDEOS - LIST ARRANGEMENT <button onclick="clearTable('tbodySel')">Clear this table</button> <button onclick="copyTable('tbody2')">Copy First List</button> <button onclick="copyTable('tbody1')">Copy Second List</button> </div> <br> <div style="width:600px;height:300px;overflow:auto;background-color:white"> <table style="width:100%"><tbody id='tbodySel' style="font-size:10pt;"></tbody></table> </div> <br> <div id='saving' class="bar"> BUILD EDITED LIST (JAVASCRIPT FILE) - SAVE IT TO YOUR PC </div> <br> <input type="text" id="fileName1" value="selected1.js" size="70"> <button onclick="updateSel()">Update</button> <a id="anch" href='' onclick="makeLink1(this, document.getElementById('areaRes1').value);"> <b style="background-color:green;color:white;border:2px white solid">SAVE</b></a> <br> <br> <textarea id='areaRes1' style="width:600px;height:300px;padding:0px"> vst = ''; </textarea> <br><br> <div id='loading' class="bar">SECOND LIST (LOADED FROM YOUR PC) <button onclick="clearTable('tbody1');vvsum1 = 0">Clear this table</button> <button onclick="readJS('tbody1');vvsum2 = 0">Load Embedded</button> </div> <br> <div style="width:600px;height:300px;overflow:auto;background-color:white"> <table style="width:100%"><tbody id='tbody1'></tbody></table> </div> <br> <!-----------LOAD-----------> Choose js files from the folder C:\Users\Administrator\Downloads <br> <input type="file" id="fileinput" /> <br><br> <textarea id="areaLoad" style="width:600px;height:300px"></textarea> <br><br> <div id='searching' class='barGreen'>SEARCH VIDEOS ANS PLAYLISTS <span style="color:red;background-color:white"> Using your Youtube API Key </span> </div><br> <table width="604" style="background-color:#333366;color:white"> <!--#99CCFF--> <tr> <td align="center" style="vertical-align:middle"> <b><i>Search:</i></b> <input type="text" value="Franck Pourcel" id="searchtext1" size="75" style="border-style:inset"><br> <table width="90%"><tr><td width="120" style="border:none;vertical-align:middle;color:white"> <b><i>Total:</i></b> <span id="wantSpan" style="font-size:14pt;font-style: italic">0</span> </td ><td width="120" style="border:none;vertical-align:middle;color:white"> <b><i>Found:</i></b> <span id="foundText" style="font-size:14pt;font-style: italic">0</span> </td><td align="right" style="border:none;vertical-align:middle"> <button type="button" onclick="start(40)">S40</button> <button type="button" onclick="start(180)">S180</button> <button type="button" onclick="start(300)">S300</button> <button type="button" onclick="start(400)">S400</button> <button type="button" onclick="start(500)">S500</button> </tr></table> </td> </td> </tr> </table> <span id="response1"></span> <b>-</b> <span id="count"></span> <br><br> <div id="hint" style = "width:580px;height:55px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:10px;line-height:160%"> <a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>, <a href="#" onclick="readyTerm('Abba'); return false">Abba</a>, <a href="#" onclick="readyTerm('Bee Gees'); return false">Bee Gees</a>, <a href="#" onclick="readyTerm('Bert Kaempfert'); return false">Bert Kaempfert</a>, <a href="#" onclick="readyTerm('Billy Vaughn'); return false">Billy Vaughn</a>, <a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</a>, <a href="#" onclick="readyTerm('Carpenters'); return false">Carpenters</a>, <a href="#" onclick="readyTerm('Cecil Gonzalez instrumental'); return false"> Cecil Gonzalez instrumental</a>, <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>, <a href="#" onclick="readyTerm('Folli Michelangelo'); return false">Folli Michelangelo</a>, <a href="#" onclick="readyTerm('Francisco Garcia guitarist'); return false"> Francisco Garcia guitarist</a>, <a href="#" onclick="readyTerm('Franck Pourcel'); return false">Franck Pourcel</a>, <a href="#" onclick="readyTerm('Frank Chacksfield'); return false">Frank Chacksfield</a>, <a href="#" onclick="readyTerm('Guitar Mood'); return false">Guitar Mood</a>, <a href="#" onclick="readyTerm('Guitarras Magicas (Guitarras de Luna)'); return false"> Guitarras Magicas (Guitarras de Luna)</a>, <a href="#" onclick="readyTerm('Helmut Zacharias'); return false">Helmut Zacharias</a>, <a href="#" onclick="readyTerm('Hugo Montenegro'); return false">Hugo Montenegro</a>, <a href="#" onclick="readyTerm('Hugo Strasser'); return false">Hugo Strasser</a>, <a href="#" onclick="readyTerm('James Last'); return false">James Last</a>, <a href="#" onclick="readyTerm('JUAN TORREZ'); return false">JUAN TORREZ</a>, <a href="#" onclick="readyTerm('Klaus Wunderlich'); return false">Klaus Wunderlich</a>, <a href="#" onclick="readyTerm('Manuel & The Music of the Mountains'); return false"> Manuel & The Music of the Mountains</a>, <a href="#" onclick="readyTerm('Maximo Spodek'); return false">Maximo Spodek</a>, <a href="#" onclick="readyTerm('Nicolas de Angelis'); return false">Nicolas de Angelis</a>, <a href="#" onclick="readyTerm('Paul Mauriat'); return false">Paul Mauriat</a>, <a href="#" onclick="readyTerm('Ray Anthony'); return false">Ray Anthony</a>, <a href="#" onclick="readyTerm('Ray Conniff'); return false">Ray Conniff</a>, <a href="#" onclick="readyTerm('Richard Clayderman'); return false">Richard Clayderman</a>, <a href="#" onclick="readyTerm('Ricky King'); return false">Ricky King</a>, <a href="#" onclick="readyTerm('Romantic Guitar'); return false">Romantic Guitar</a>, <a href="#" onclick="readyTerm('The Shadows'); return false">The Shadows</a>, </div> <br> <div class="barGreen"> SAVE ORIGINAL LIST (FROM JSON) TO YOUR PC <button onclick="clearArea('areaRes3');">Clear this area</button> </div> <br> <input type="text" id="fileName3" value="original1.js" size="70"> <a id="anch" href='' onclick="makeLink3(this, document.getElementById('areaRes3').value);"> <b style="background-color:green;color:white;border:2px white solid">SAVE</b></a> <br> <br> <textarea id='areaRes3' style="width:600px;height:300px;padding:0px"> vst = ''; </textarea> <br><br> <div class="barOrange"> <i>HELP</i> </div> <br> <iframe id="help" src="help-progress-bar-8.html" style="width:600px;height:400px;background-color:#EEEEEE"></iframe> <br> <br> <div class="barOrange"> <i>SOURCE CODE OF THIS PAGE</i> <span style="font-weight:normal"> (Sorry! this page is under construction)</span> </div> <br> <div class="barFooter"> <i>My Blog:</i> <span style="font-weight:normal"> http://phanhung20.blogspot.com/2016/02/video-player-with-multiline-progress-bar.html </span> </div> </div> <!--center--> <script> vst = ''; vst += "Juan Torres y su órgano melódico - Yesterday"+ "@gts47_Ayunk@"; vst += "Romantic Love Songs Instrumental Hits"+ "@QCFG5rT4kbA#s=16:28#e=19:54@"; vst += "BEE GEES INSTRUMENTAL.Selección de Cecil González"+ "@9kSvOQVOyv0#s=37:11#e=40:35@"; vst += "ELVIS INSTRUMENTAL.Selección de Cecil González"+ "@yu4GCTSi8jc#s=23:00#e=27:34@"; vst += "JUAN TORREZ - GUANTANAMERA"+ "@PDgmr8YjuuM@"; vst += "Waldir Silva - La Paloma"+ "@nkrjnjz8QMs@"; vst += "Secreto de Amor, Guitarras de Luna Guitarras Mágicas."+ "@nnHhF_abTC0@"; vst += "Cielito Lindo - JuanTorres - playing the Hammond Organ - Mexico"+ "@xFkVRN0e6GY@"; vst += "Guitarras Mágicas - Amor eterno (Instumental)"+ "@HOmoeCRJqUM@"; vst += "Estrellita Del Sur - Juan Torres - Playing the Hammond Organ - Mexico"+ "@0XEvbf_0pJI@"; vst += "Красивая музыка востока"+ "@i3-dEouka-c@"; vst += "Hey - Guitarras Mágicas"+ "@YMQlhmT89mw@"; vst += "The greatest French love songs (P/s: one in Spanish and one in English :D )"+ "@HEORkVL-Q7w@"; vst += "JUAN TORREZ LA SOMBRA DE TU SONRISA"+ "@GSZNg37AbhI@"; vst += "Moliendo Café...Guitarras Mágicas / Guitarras de Luna"+ "@-2Dy0jdwsDU@"; vst += "Franck Pourcel - Girl"+ "@EiMMO3fF_Kg@"; vst += "Franck Pourcel - "Adiós Linda Candy""+ "@mme6lJDa7mI@"; vst += "Franck Pourcel - Morir de Amor"+ "@jpT_EoXt_vA@"; vst += "James Last - Mitternacht in Moskau (Midnight in Moscow - Moskauer Nächte - Moscow Nights)"+ "@Kph531IKR1k@"; vst += "JAMES LAST - My Way (To remember James Last, a great Gentleman of Music)"+ "@lpMuubjfRfI@"; vst += "Helene Fischer- Wunder dich nicht- german,english,french subtitles"+ "@EfoqBHJSeX0@"; vst += "♪♥♪"Io Che Non Vivo Senza te" ♪♥♪ BOBBY SOLO♪♥♪"+ "@J_bJOhxctsA@"; vst += "Mary Hopkin - Those were the days (HQ)"+ "@GielMXWQlbw@"; vst += "Feelings - Morris Albert"+ "@CyBcHUe4WeQ@"; vst += "Foreigner - I Want To Know What Love Is"+ "@AYT7y6lFJtw@"; vst += "Дорогой длинною - Нани Брегвадзе - With lyrics"+ "@SpFaeR2wht0@"; vst += "Chopin Tristesse - NO OTHER LOVE - James Last"+ "@KyBGSVfVRCY@"; vst += "GREENFIELDS - Victor Wood"+ "@Rl-dB1A_vm0@"; vst += "Romantic Love Songs Instrumental Hits"+ "@QCFG5rT4kbA@"; vst += "ELVIS INSTRUMENTAL.Selección de Cecil González"+ "@yu4GCTSi8jc@"; vst += "BEE GEES INSTRUMENTAL.Selección de Cecil González"+ "@9kSvOQVOyv0@"; vst += "THE BEATLES INSTRUMENTAL.Selecciòn de Cecil González de Chile"+ "@PD0CVM-a93U@"; vst += "Italy/Napoli (Walking tour:Port of Napoli) Part 2"+ "@kwMrEK7lmoA@"; vst += "Mave mai de Rataro Ohotoua"+ "@oY_eepAxzAM@"; vst += "ORFEO NEGRO SUONA, FOLLI MICHELANGELO, 2015"+ "@hRQ2NN1Ib_s@"; vst += "En tu pelo...Guitarras Mágicas / Guitarras de Luna"+ "@roK-_xscCiA@"; vst += "ROMANTIC LOVE SONGS - INSTRUMENTAL MUSIC"+ "@40JYlSdBVfM@"; vst += "JAMBALAYA"+ "@5tjIXfXaUMI@"; vst += "SEASON IN THE SUN"+ "@eD0TYoluaxA@"; vst += "YESTERDAY ONCE MORE"+ "@ljba_vSh1s8@"; vst += "TAKE ME HOME COUNTRY ROAD"+ "@Z3VGPdkeeI4@"; vst += "Cry on my shoulder (tiếng anh+lời dịch)"+ "@oUsknM0u02Y@"; vst += "Trío Calaveras: La Paloma - (letra y acordes)"+ "@iYNWGU6Gduw@"; vst += "Hermanos Michel: Amor - (letra y acordes)"+ "@R9JaMdukZ_8@"; vst += "Trío Borinquen: Bésame Mucho - (letra y acordes)"+ "@YQMctONhJ7U@"; vst += "Hermanos Michel: Solamente Una Vez - (letra y acordes)"+ "@UC_iObV5Hdc@"; vst += "Trío Hermanos Rodríguez: Perfidia - (letra y acordes)"+ "@6EnniRx9iuc@"; vst += "The Most Beautiful Places in the World"+ "@SbeHjcLOkgs@"; vst += "World Heritage Sites in China 世界遗产在中国"+ "@-oUSac0z9V4@"; vst += "Top 100 One-Hit Wonders Ever"+ "@EeXqqdetRGU@"; vst += "Top 100 songs: The 80s"+ "@UmjjuzGsay8@"; vst += "Best music videos of 70's-80's(HD retro songs)"+ "@RkIqVmTx8L4@"; vst += "Te Aho Purotu - ile sauvage (Tahiti)"+ "@#RDkSeli9QINUo@"; vst += "GUITARRAS MAGICAS INSTRUMENTAL"+ "@#PLD4C9B9E6C35E967E@"; vst += "Perfidia and Bolero"+ "@#PLl7PSfU55NsUWy6tdUjj81hoGVDgh6Dvc@"; vst += "CLÁSICAS DEL KARAOKE"+ "@#PLP_igD3HE3yOnRSVstdkyx4Uv6sIHHztK@"; ////////////////// READ JS LIST AND MAKE LINKS var vvsum2 = 0; var vvsum1 = 0 function readJS(place){ var vst1 = vst.replace(/@$/,''); var arr = vst1.split('@'); var mmm = ''; for(i=0;i<arr.length;i++){ if(i%2 == 0){ if(place == 'tbody2'){vvsum = vvsum2} if(place == 'tbody1'){vvsum = vvsum1} if(arr[i+1].search(/^#/g) == -1){ mmm = 'playVid(this)'; sst1 = '<b>'+vvsum+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ arr[i]+'</a>'; sst2 = '<span class="vidCL">'+ arr[i+1]+'</span>'; if(arr[i+1].search('#e=') != -1){ var arra = arr[i+1].split('#'); arr[i+1] = arra[0]; } var imgSrc = 'http://img.youtube.com/vi/'+ arr[i+1]+'/default.jpg'; }else{ mmm = 'playPid(this)' sst1 = '<b style="color:red">'+vvsum+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ arr[i]+'</a>'; sst2 = '<span class="vidCL">'+ arr[i+1]+'</span>'; imgSrc = 'yt-playlist.jpg'; } sst3 = '<tr><td width="80"><img width="80" height="60" src="'+imgSrc+'"></td><td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">1</button></td></tr>'; document.getElementById(place).innerHTML += sst3 if(place == 'tbody2'){vvsum2++} if(place == 'tbody1'){vvsum1++} } } } ///////////////////// FUNCTIONS FOR CONTROL VIDEO PLAYER var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); normalW = '600'; normalH = '310'; clientW = document.body.clientWidth ; clientH = document.body.clientHeight; bigScreen = false; var player; startvid = 'gts47_Ayunk'; //'yu4GCTSi8jc'; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width: normalW, height:normalH, videoId: startvid, playerVars: { 'autoplay': 0, 'rel': 0, 'showsearch': 0, 'controls': 1,'autohide': 0 }, events: { 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerError(error){ if ( error ){ nextVid(); } } var playerState = ''; var getPlaylistId = false; var countPid = 0; var OneFromPlaylist = ''; numOfBar = 0; playVideo = true; par = {}; seMode = false; function onPlayerStateChange(event){ if (event.data == 0){ numOfBar = 0; for(i = 0;i<gN;i++){ document.getElementById('pb'+ i).value = 0; document.getElementById('timeTable'+i).getElementsByClassName('c2')[0].innerHTML = ''; } if(!seMode){ if(playVideo){ nextVid(); }else{ player.nextVideo(); } return false; } } switch (event.data) { case YT.PlayerState.UNSTARTED: playerState = 'unstarted'; break; case YT.PlayerState.ENDED: playerState = 'ended'; break; case YT.PlayerState.PLAYING: playerState = 'playing'; document.getElementById('durationDiv').innerHTML = sformat(Math.floor(player.getDuration())); newNbars(); if(!playVideo){ var ob = par.getElementsByClassName('vidCL'); var pid = ob[0].innerHTML; } break; case YT.PlayerState.PAUSED: playerState = 'paused'; break; case YT.PlayerState.BUFFERING: playerState = 'buffering'; break; case YT.PlayerState.CUED: playerState = 'cued'; break; } document.getElementById('showState').innerHTML = playerState; } function playYoutube() { player.playVideo(); } function pauseYoutube() { player.pauseVideo(); } function stopYoutube() { player.seekTo(0, true); player.stopVideo(); } function subNext(){ player.nextVideo(); } function playVid(obj){ playVideo = true; seMode = false; document.getElementById("subNextBut").disabled = true; var ss = obj.parentNode.parentNode.parentNode.id; if(ss == 'tbodySel'){ document.getElementById("addBut1").disabled = true; }else{ document.getElementById("addBut1").disabled = false; } for(i=0;i<gN;i++){ var ob = document.getElementById('timeTable'+i); var ar = ob.getElementsByClassName('c2'); ar[0].innerHTML = ''; } par = obj.parentNode; //alert('par.nodeName = '+ par.nodeName); // this is TD showTit(); ob = par.getElementsByClassName('vidCL'); vidSt = ob[0].innerHTML; var ss = vidSt.search('#'); if(ss == -1){ player.loadVideoById(vidSt, "large"); }else{ seMode = true; if(vidSt.search(':') != -1){ vidSt = formatConvert(vidSt); } var ar = vidSt.split('#'); var a1 = parseInt(ar[1].replace('s=','')); var a2 = parseInt(ar[2].replace('e=','')); gstart = a1; gend = a2; seEnd = a2; playVidStart(ar[0], a1, a2) } } function formatConvert(ss){ var ar = ss.split('#'); var ar1 = ar[1].replace('s=',''); var st1 = mmss2seconds(ar1)+''; var ar2 = ar[2].replace('e=',''); var st2 = mmss2seconds(ar2)+''; var res = ar[0] + '#s=' + st1 + '#e=' + st2; return res } function playVidStart(a,b,c){ player.loadVideoById({ videoId:a, startSeconds:b, endSeconds:c }); } function playPid(obj){ document.getElementById("subNextBut").disabled = false; seMode = false; playVideo = false; var ss = obj.parentNode.parentNode.parentNode.id; if(ss == 'tbodySel'){ document.getElementById("addBut1").disabled = true; }else{ document.getElementById("addBut1").disabled = false; } document.getElementById("subNextBut").disabled = false; par = obj.parentNode; showTit(); ob = par.getElementsByClassName('vidCL'); var pid = ob[0].innerHTML; pid = pid.replace('#',''); player.loadPlaylist({ 'list': pid , 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'default' }); } function showTit(){ var ob1 = par.getElementsByClassName('titCL'); var tit = ob1[0].innerHTML; document.getElementById('vtitle').innerHTML = tit; } function nextVid(){ var ob = par.parentNode.parentNode.getElementsByClassName('vidCL'); var max = ob.length; var nextIndex = par.parentNode.rowIndex + 1; if(nextIndex == max){nextIndex = 0} var id = ob[nextIndex].innerHTML; if(id.search(/^#/) == -1){ playVid(ob[nextIndex]) }else{ playPid(ob[nextIndex]) } } /////////////////////// MAKE MULTILINE PROGRESS BAR gN = 4; // 1, 4, 8; gmax = 580; gK = 0; seEnd = 60; curTime = 0; function setTime(){ curTime = Math.round(player.getCurrentTime()); document.getElementById('curTimeDiv').innerHTML = sformat(curTime); if(curTime >0){ var k=Math.floor(curTime*gN/player.getDuration()); document.getElementById('timeTable'+ k).getElementsByClassName('c2')[0].innerHTML = sformat(curTime); if(playerState == 'playing'){ newUpdatePBar(); } if(seMode ){ if(curTime == seEnd){ nextVid(); } } } } setInterval(setTime, 100); function makeNbars(){ st=''; for(i=0;i<gN;i++){ var ss = '<div id="parentDiv'+i+'" style="background-color:#1B1B1B;width:'+ (gmax+20)+'px;padding-top:0px;padding-bottom:3px">'+ '<progress id="pb'+i+'" max="'+gmax+'" value="0" style="width:'+gmax+ 'px;background-color:#1B1B1B;margin-top:0px;margin-bottom:0px;padding:0px;'+ 'border:1px solid gray;height:4px">'+ '</div>'+ '<div id="timeTable'+i+'" style="background-color:#1B1B1B;width:'+(gmax+20)+ 'px;padding-top:0px;padding-bottom:-2px;text-aligna:center">'+ '<table style="border-collapse:collapse;width:100%;height:10px;'+ 'background-color:#1B1B1B;color:white;">'+ '<tr>'+ '<td class="c1" style="padding-left:8px;font-size:9pt;width:30%;border:none"> </td>'+ '<td class="c2" style="width:23%;border:none;text-align:center"> </td>'+ '<td class="c3" style="padding-right:8px;text-align:right;width:30%;border:none"> </td>'+ '</tr>'+ '</table>'+ '</div>' st += ss; } document.getElementById('progressDiv').innerHTML = st; } gmax = 580; function newUpdatePBar(){ var gdur = player.getDuration(); var dur1 = gdur/gN; curTime = player.getCurrentTime(); var KK = Math.floor(curTime/dur1); localTime = Math.round(player.getCurrentTime() - KK*dur1); velocity = gmax/dur1 x = Math.round(velocity*localTime); for(i = 0;i<gN;i++){ if(i==0){ document.getElementById('pb'+ i).value = x; } if(KK>=1){ if(i<KK){ document.getElementById('pb'+ i).value = gmax; var ob = document.getElementById('timeTable'+i); var ar = ob.getElementsByClassName('c2'); ar[0].innerHTML = sformat(Math.round(i*(player.getDuration()/8))); } if(i==KK){ document.getElementById('pb'+ i).value = x; } } if(i>KK){ document.getElementById('pb'+ i).value = 0; var ob = document.getElementById('timeTable'+i); var ar = ob.getElementsByClassName('c2'); ar[0].innerHTML = ''; } } } function newNbars(){ var dur = player.getDuration(); var dur1 = dur/gN for(i=0; i<gN; i++){ var ss = Math.round(i*dur1); var ee = Math.round((i+1)*dur1); var ob = document.getElementById('timeTable'+i); var ar1 = ob.getElementsByClassName('c1'); var ar3 = ob.getElementsByClassName('c3'); ar1[0].innerHTML = sformat(ss); ar3[0].innerHTML = sformat(ee); } for(i=0;i<gN;i++){ $('#pb'+i).on('click', function(e){ gdur = player.getDuration(); ide = this.id; var K = parseInt(ide.replace('pb','')); var t = (e.pageX-this.offsetLeft + K*gmax)*player.getDuration()/(gN*gmax); player.seekTo(t) }); } } //////// MAKE START TIME AND END TIME function startMark(){ var stSec = sformat(Math.floor(player.getCurrentTime())); $('#sMark').val(stSec) } function endMark(){ var endSec = sformat(Math.floor(player.getCurrentTime())); $('#eMark').val(endSec) } function putBegin(){ $('#sMark').val('0:00'); } function putDuration(){ if(playerState == 'playing'){ var endSec = sformat(Math.floor(player.getDuration())); $('#eMark').val(endSec); } } function putStartBack(num){ if(playerState == 'playing'){ var tt = $('#sMark').val(); tt1 = mmss2seconds(tt)- num; if(tt1<0){tt1 = 0}; tt2 = sformat(Math.floor(tt1)) $('#sMark').val(tt2); } } function putEndBack(num){ if(playerState == 'playing'){ var tt = $('#eMark').val(); tt1 = mmss2seconds(tt)- num; if(tt1<0){tt1 = 0}; tt2 = sformat(Math.floor(tt1)) $('#eMark').val(tt2); } } function goBack(sec){ var num = sformat(Math.floor(player.getCurrentTime() - sec)); if(num < 0){ num = 0} $('#sMark').val(num); num1 = player.getCurrentTime() -sec player.seekTo(num1) } function Ahead(sec){ var num = sformat(Math.floor(player.getCurrentTime() + sec)); if(num > player.getDuration()){ num = player.getDuration()} $('#sMark').val(num); num1 = player.getCurrentTime() +sec player.seekTo(num1) } //////////// ADD VIDEOS arrSel = []; function addVid(){ var seSt = ''; var curRow = par.parentNode; var tbody = par.parentNode.parentNode; var ar = tbody.getElementsByTagName('tr'); var vv = par.getElementsByClassName('vidCL')[0].innerHTML ; var uu = par.getElementsByClassName('titCL')[0].innerHTML ; var vv1 = vv.replace('#',''); vv1 = vv1.substring(0,11); if(vv.search(/^#/) != -1){ var imgSrc = "yt-playlist.jpg" }else{ imgSrc = "http://img.youtube.com/vi/"+ vv1 +"/default.jpg"; } arrSel.push(vv); var stSec = $('#sMark').val(); var endSec = $('#eMark').val(); if((stSec != '')&&(endSec != '')){ var seSt = '#s='+ stSec + '#e='+ endSec; } var mm = par.innerHTML; var num = mm.search('#s='); if(num != -1){ mm = mm.substring(0,num)+'</span>'; } mm = mm.replace('</span>',seSt+'</span>'); var str1 = '<td width="80"><img width="80" height="60" src="'+imgSrc+'"></td>'+ '<td>'+ mm + '</td><td style="width:52px"><button onClick="xUp(this)" style="width:24px">'+ '▲</button>'+ '<button onclick="xInsert(this)" style="width:28px">Ins</button><br>'+ '<button onClick="xDown(this)" style="width:24px">▼</button>'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:28px">'+ '1</button></td>'; document.getElementById('tbodySel').innerHTML += str1 var str = 'vst += "'+ uu +'"+\n'+ '"@'+ vv + seSt + '@";\n\n'; document.getElementById('areaRes1').value += str; $('#sMark').val(''); $('#eMark').val(''); alert('Currently playing video was added') } //////////////// MOVING ROWS function xUp(obj) { var row = obj.parentNode.parentNode; var tbody = row.parentNode; var hTable = tbody.parentNode; var rowId = row.rowIndex; var nextId = rowId - 1; if (nextId<0){return} var next = hTable.rows[nextId]; tbody.insertBefore(row, next); num = rowId; } function xDown(obj) { var row = obj.parentNode.parentNode; var tbody = row.parentNode; var hTable = tbody.parentNode; var rowId = row.rowIndex; var nextId = parseInt(rowId)+2; if (nextId>hTable.rows.length) return; var next = hTable.rows[nextId]; tbody.insertBefore(row, next); num = rowId; } function xInsert(obj){ row = par.parentNode; ins = obj.parentNode.parentNode; if(row == ins) return; tbody = row.parentNode; tbody.insertBefore(row,ins); } function copyTable(tblID){ var tbl2 = document.getElementById(tblID); document.getElementById('tbodySel').innerHTML = tbl2.innerHTML; var tbl = document.getElementById('tbodySel'); var ar = tbl.getElementsByTagName('td'); for(i=0; i<ar.length; i++){ if(i%3 == 2){ ar[i].style.width = '52px'; ar[i].innerHTML = '<button onClick="xUp(this)" style="width:24px">'+ '▲</button>'+ '<button onclick="xInsert(this)" style="width:28px">Ins</button><br>'+ '<button onClick="xDown(this)" style="width:24px">▼</button>'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:28px">'+ '1</button>'; } } document.getElementById('tbodySel').innerHTML = tbl.innerHTML; } function removeUndo(ob){ var butVal = ob.innerHTML; if(butVal == '1'){ ob.innerHTML = '0'; ob.parentNode.parentNode.style.backgroundColor = "#CCCCCC" }else{ ob.innerHTML = '1'; ob.parentNode.parentNode.style.backgroundColor = "white" } } ///////// SAVE TO PC function updateSel(){ var obj = document.getElementById('tbodySel'); var ar = []; ar = obj.getElementsByTagName('tr'); var zz = "vst = '';\n\n"; for(i=0;i<ar.length;i++){ var ru = ar[i].getElementsByClassName('ruBut')[0].innerHTML ; if(ru == '1'){ var vv = ar[i].getElementsByClassName('vidCL')[0].innerHTML ; var uu = ar[i].getElementsByClassName('titCL')[0].innerHTML ; uu = uu.replace(/\"/g,'"'); uu = uu.replace(/@/g,'@'); zz += 'vst += "'+ uu + '"+\n'+ '"@'+ vv + '@";\n\n'; } } document.getElementById('areaRes1').value = zz; } function makeLink1(thi, text2save){ thi.download = document.getElementById("fileName1").value; thi.href = "data:text/javascript; charset=utf-8, " + encodeURIComponent(text2save); } function makeLink3(thi, text2save){ thi.download = document.getElementById("fileName3").value; thi.href = "data:text/javascript; charset=utf-8, " + encodeURIComponent(text2save); } //////////// LOAD FROM PC function readSingleFile(evt) { var f = evt.target.files[0]; if(f){ var r = new FileReader(); r.onload = function(e) { var contents = e.target.result; var st = contents; st = st.replace(/\/\/*$/g,''); eval(st); readJS('tbody1'); document.getElementById('areaLoad').value = st; } r.readAsText(f); }else{ alert("Failed to load file"); } } document.getElementById('fileinput').addEventListener('change', readSingleFile, false); /////////// SEARCH VIDEOS searching = false; var nextPageToken; portion = 50; // portion may be <= 50; but here it's better to set 50 var searchText = ""; var maxRes = portion; var want = 120; sum = 0; sumN = 0; tit = []; vid = []; stList = ''; function start(num){ if(searching == false){ searching = true; } want = num; searchVid() } plNum = 1; listVid = []; listTit = []; pvid = []; ptit = []; function searchVid(PageToken){ var searchText= $('#searchtext1').val(); $('#response1').html("<b>Searching for "+searchText+"</b>"); $.get( "https://www.googleapis.com/youtube/v3/search",{ part : 'snippet', q : searchText, maxResults : 50, pageToken : PageToken, key: '******YOUR*API*KEY******'}, function myPlan(response){ nextPageToken=response.nextPageToken; var responseString = JSON.stringify(response, '', 2); var resultCount = response.pageInfo.totalResults; $('#count').html("<b>Total: "+resultCount+" Results.</b>"); stList = ''; if(want >= resultCount){ want = resultCount} itemsLen = response.items.length; for (var i=0; i<response.items.length;i++){ var title=response.items[i].snippet.title; var videoID=response.items[i].id.videoId; xx = response.items[i].id.playlistId; if(typeof xx != 'undefined'){ var uu = title.replace(/\"/g,'"'); uu = uu.replace(/@/g,'@'); mmm = 'playPid(this)'; var jsListLine = 'vst += "'+ uu + '"+\n"@#'+ xx + '@";\n\n'; sst1 = '<b style="color:red">'+sumN+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ title+'</a>'; sst2 = '<span class="vidCL">#'+ xx+'</span>'; sst3 = '<tr><td width="80"><img width="80" height="60" '+ 'src="yt-playlist.jpg"></td><td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+ '<button class="ruBut" onclick="removeUndo(this)" '+ 'style="width:100%">1</button></td></tr>'; document.getElementById('areaRes3').value += jsListLine; document.getElementById('tbody2').innerHTML += sst3 } document.getElementById('foundText').innerHTML = '<span style="color:green"><b>'+sum+'</b></span>'; document.getElementById('wantSpan').innerHTML = sumN + ''; document.getElementById('showState').innerHTML ='<span style="color:#FFFF00">'+ sumN + '</span>'; if(typeof videoID != 'undefined'){ var titSt =response.items[i].snippet.title; var uu = titSt.replace(/\"/g,'"'); uu = uu.replace(/@/g,'@'); mmm = 'playVid(this)' ; jsListLine = 'vst += "'+ uu + '"+\n"@'+ videoID + '@";\n\n'; sst1 = '<b>'+sumN+ '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false">'+ titSt+'</a>'; sst2 = '<span class="vidCL">'+ videoID+'</span>'; sst3 = '<tr><td width="80"><img width="80" height="60" '+ 'src="http://img.youtube.com/vi/'+ videoID+'/default.jpg"></td><td>'+ sst1 + '<br>'+ sst2 + '</td><td style="width:25px">'+ '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+ '1</button></td></tr>'; document.getElementById('areaRes3').value += jsListLine; document.getElementById('tbody2').innerHTML += sst3 } if((sum == want)||(sum == resultCount)){ document.getElementById('foundText').innerHTML = '<span style="color:red"><b>'+sum+'</b></span>'; document.getElementById('wantSpan').innerHTML = '<span style="color:#6600FF">'+ sumN + '</span>'; sum = 0; want = 120; len = vid.length; last = len - 1; return; } sum++ ; sumN++ ; } document.getElementById('tbody2').innerHTML += stList; x = want - sum; if(x >= portion){ maxRes = portion; }else{ maxRes = x; } searchVid(nextPageToken); }); } //////////// COMMON FUNCTIONS function bigSmall(ww){ gmax = ww-20; hh = Math.round(ww*516/812); player.setSize(ww,hh); var size = ww +'px'; document.getElementById('vtitle').style.width = size; document.getElementById('seControl').style.width = size; document.getElementById('header1').style.width = size; document.getElementById('progressDiv').style.width = size; gprogressWidth = parseInt(size) - 20; leftNum = $('#player').position().left; document.getElementById('header1').style.left = leftNum; for(i=0;i<gN;i++){ document.getElementById('parentDiv'+i).style.width = (ww - 20); document.getElementById('pb'+i).style.width = (ww - 20); document.getElementById('pb'+i).max = (ww - 20)+''; document.getElementById('timeTable'+i).style.width = (ww - 20) } } function sformat( s ){ var fm = [ Math.floor(Math.floor(s/60)/60)%60, //HOURS Math.floor(s/60)%60, //MINUTES s%60 //SECONDS ]; var xx = $.map(fm,function(v,i) { return ( (v < 10) ? '0' : '' ) + v; }).join( ':' ); var yy = xx.replace(/^0:|^00:|^0/g,''); var zz = yy.replace(/^0/g,''); return zz } function mmss2seconds(mmss){ if(mmss.search(':') == -1){ seconds = parseInt(mmss); }else{ var a = mmss.split(':'); if(a.length == 3){ var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); } if(a.length == 2){ seconds = (+a[0]) * 60 + (+a[1]) } } return seconds } function clearTable(tbd){ res = confirm('Are You sure? The table contents will be cleared'); if(res == false){ return }else{ obj = document.getElementById(tbd); obj.innerHTML = ''; } } function clearArea(tbd){ res = confirm('Are You sure? The table contents will be cleared'); if(res == false){ return }else{ obj = document.getElementById(tbd); obj.value = ''; } } function readyTerm(term){ $("#searchtext1").val(term); } function scrollToElement(elem, add){ var top = $("#"+ elem).position().top; $(window).scrollTop( top - add); } function goto(name) { window.location.hash= name; } function goURL(url){ window.location = url; } ////////// ONLOAD function init(){ makeNbars(); leftNum = $('#player').position().left; document.getElementById('header1').style.left = leftNum; $('#sMark').val(''); $('#eMark').val(''); $('#areaRes1').val("vst = '';\n\n"); $('#areaLoad').val(''); $('#areaRes3').val("vst = '';\n\n"); readJS('tbody2'); } </script> </body> </html> <!--1333 lines -->
If you are using "FireFox" browser you can
Save the 2 related files by executing the following steps:
Move the mouse pointer over the link, right-click and choose "Save Link as ..."
http://play-videos.url.ph/v3/search5x.html (as type Firefox HTML Document)
http://play-videos.url.ph/v3/yt-playlist.jpg
Don't forget to replace my key with your api key and it's better to open "search5x.html" on your PC under XAMMP server simulation environment or upload those two files to your hosting server.
