PHP JQUERY PROXY DEMO
Proxy script (or proxy program) is a script, wich is located between the user's
browser and the "target server". Here I'would like to make a simple demo for
PHP-Jquery-script proxy method.
So far in my blog I just use YouTube API v.3 and JavaScript-jQuery to find videos.
This time I try to use PHP language and jQuery to find videos.
We often hear about "Web scraping with PHP," which can be roughly considered to include 9/10 PHP and 1/10 jQuery. Now I want to do it again but with 1/10 PHP and 9/10 jQuery.
This page ("php-jquery-proxy.html") is for web scraping using mainly jquery-ajax in combination with only one function from PHP language (get_file_contents function). Using it I can get video ids, video titles from the source code of youtube pages and watch those videos continuously.
To use this page you don't need to have Youtube API-3 key but need to download from Internet the XAMPP package and install it to your PC.
To try this page you can download the zip file from:
https://www.mediafire.com/?yc33f1qvj1kxd21
The size of zip file is: 28.7 KB
And it includes the following files:
php-jquery-proxy.html; php-proxy.php;
search-videos.css; url-list.js; my-play-videos.js
and the folder code (source-codes.html files)
You can watch this page at the address below:
http://play-videos.url.ph/1609/proxy/php-jquery-proxy.html
Here is the source code of "php-jquery-proxy.html"
And this is the file "php-proxy.php"
The file "url-list.js":
The file "search-videos.css
So far in my blog I just use YouTube API v.3 and JavaScript-jQuery to find videos.
This time I try to use PHP language and jQuery to find videos.
We often hear about "Web scraping with PHP," which can be roughly considered to include 9/10 PHP and 1/10 jQuery. Now I want to do it again but with 1/10 PHP and 9/10 jQuery.
This page ("php-jquery-proxy.html") is for web scraping using mainly jquery-ajax in combination with only one function from PHP language (get_file_contents function). Using it I can get video ids, video titles from the source code of youtube pages and watch those videos continuously.
To use this page you don't need to have Youtube API-3 key but need to download from Internet the XAMPP package and install it to your PC.
To try this page you can download the zip file from:
https://www.mediafire.com/?yc33f1qvj1kxd21
The size of zip file is: 28.7 KB
And it includes the following files:
php-jquery-proxy.html; php-proxy.php;
search-videos.css; url-list.js; my-play-videos.js
and the folder code (source-codes.html files)
You can watch this page at the address below:
http://play-videos.url.ph/1609/proxy/php-jquery-proxy.html
QUICK HELP
GETTING STARTED
Perform the following steps:
1. Download and install the XAMPP package on your PC
2. Suppose that after installation you have the folder:
C:\xampp\htdocs.
Create subfolder "php-proxy":
C:\xampp\htdocs\php-proxy.
3. Download or create the following files:
- php-jquery-proxy.html
- php-proxy.php
- search-videos.css
- url-list.js
- my-play-videos.js
After that, move all those files into the folder "php-proxy".
4. Open the website "youtube.com". Choose one page from the 4 types of pages:
- page having url containing "watch?v=" and without "list="
- page having url containing "/user/"
- page having url containing "/channel/"
- page having url containing "list="
Copy the url and the title of the page. If you can't define the title of the page
then you cant use any title you want.
- Open "url-list.js" file and paste the above informations there to make a
additional new link. For example: you can add those two lines to "url-links.js":
ptit[12] = 'Harald Winkler Guitar and Norman Candler Orchestra - Play list';
purl[12] = 'https://www.youtube.com/watch?v=HSVAWXBneHU&list=RDHSVAWXBneHU';
NOTE: always write ptit['Title of the page'] first then put purl['URL of the page']
At the same time you have to write to the file "php-proxy.php" following line:
$purl[12] = 'https://www.youtube.com/watch?v=HSVAWXBneHU&list=RDHSVAWXBneHU';
Doing the above is complicated but necessary for safety reasons when using PHP
(using the whitelist).
A- SEARCH YOUTUBE VIDEOS:
To view this page should do the following:
- Select "Fire Fox" as the default browser.
- Click on the file "php-jquery-proxy.html".
- In the address bar you need replace:
"file:///C:/xampp/htdocs/php-proxy/php-jquery-proxy.html"
with "localhost/php-proxy/php-jquery-proxy.html"
- Next press the key "End" (it's in front of the key "Page Down").
- Finally press "Enter".
- In the box div (id="tip1") click on any Youtube URL link then click the button
"Get Info by PHP proxy";
- Wait till you see "DONE!";
- Now a "Control list" has been built in the div (id="list1")
- In this control list click on any video link to watch the video continuously.
- If you click on the URL different from the URL youtube then you just see the
site without viewing videos. And this time, you'll often see a page worse than normal
because its CSS and javascripts have been removed.
But sometimes you find the site quite nice as the following cases:
ptit[6] = 'Tokyo city';
purl[6] = 'http://www.travel-around-japan.com/k31-00-tokyo-metropolis.html';
ptit[7] = '14-beautiful-countries';
purl[7] = 'http://brightside.me/article/14-beautiful-countries-where-you-can-live-better-than-at-home-27955/';
ptit[8] = 'wikipedia.org/wiki/Abba';
purl[8] = 'https://en.wikipedia.org/wiki/Abba';
B- PRACTICE CHOOSING THE RIGHT CLASS NAME FOR ANCHOR TAGS
This is the section after the section bar "LET'S THINK ABOUT HOW TO WRITE THE CODE"
- In the box div (id="tip2") if you click on a youtube URL link then you'll see
two buttons with light green color: "Show Anchors grouped by Class" button and
below it is the "Build Control list" button. You also see a inscription in the
green background, reminding us about the current URL.
We can notice that in the youtube website the number of videos typically can not
be 1 or 2. They can be about 18 or 19 (approximately 20 or 25) on the page of
"watch?v=" type.
For pages of the types "user", "channel", "watch?v = ... list = ..." this number
is of from 5, 6 to several tens of hundreds.
For example , with the file "https://www.youtube.com/watch?v=LoD3_giJ_8g" (Lamento
Boricano), we may choose one from the following two class names:
19:"yt-uix-sessionlink content-link spf-link spf-link "
OR
19:"yt-uix-sessionlink vve-check thumb-link spf-link spf-link "
Both of them related to group of 19 video clips.
But only one of them have enough informations, suistable for building control links.
The right choice is:
class = "yt-uix-sessionlink content-link spf-link spf-link ".
Therefore , in the box div (id="selectClass") you should click on the first radio
button.
- After selecting the class name you will click th button "Build Control list"
to create "Control listt" in div (id = "div3").
- If you select the wrong classname you will see the message "ERROR".
Indeed there are many methods to filter anchors for "playing video".
Here is the source code of "php-jquery-proxy.html"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="search-videos.css"> </head> <style> .youtubeColor{ background-color:#CCFF99; } </style> <body onload="init()"> <div align="center"> <table id="header1" > <tr> <td width="120" height="15"> <div id="showState" style="width:120px;height:15px;margin-top:0px;"> </div> </td> <td style="width:455px;text-align:center;border:1px gray solid;vertical-align:middle;height:15px"> <button type="button" onclick="bigSmall()">Big/Small</button> <button type="button" onclick="scrollToElement('helpIframe', 40);">Help</button> <input type="button" onclick="window.scrollTo(0,0)" value="Top"> <input type="button" onclick="scrollToElement('list1', 30)" value="Tip1"> <input type="button" onclick="scrollToElement('tip2', 125)" value="Tip2"> <input type="button" onclick="goto('bott')" value="Bottom"> </td> <td width="22%" align="right" style="border:1px gray solid;height:15px;vertical-align:middle"> <button type="button" onclick="player.pauseVideo();">Pause</button> <button type="button" onclick="player.playVideo();">Play</button> <button type="button" onclick="nextVid();">Next</button> </td> </tr> </table> <div id='player' style="margin-top:36px"></div> <div id="vtitle" style="margin-top:-2px;"></div> <br> <div class="barSky" style="height:34px"> 1- WEB SCRAPING USING PHP PROXY<br> <span style="font-weight:normal"> Youtube URL of 5 types: watch?v= (without list=); /user/; /channel/; watch?v=...&list; results </span> </div><br> div (id="list1") <br><br> <div id="list1" style="width:580px;;height:250px;overflow:auto;background-color:white;text-align:left"> <table id="tableA" width="100%"><tbody id="r1"> </tbody></table> </div> <br> <button type="button" id="remember1But" onclick="memoryTable1('r1');">Selected Rows to Top</button> <b>Scroll to row:</b> <button onclick="tTop()" style="width:95px">First Row</button> <button onclick="tCur()" style="width:95px">Current Row</button> <button onclick="tBott('r1')" style="width:95px">Last Row</button> <br> <br> <span style="color:red"><b>NOTE:</b></span> Don't type text in the box below. It's not a text box <br><br> urlSt <br> <div id="urlSt" style="padding:4px;width:550px;height:32px;overflow:auto;background-color:white;border:1px gray solid;text-align:left"> </div> <table id="butTable" cellspacing="5" cellpadding="0" style="margin-top:5px; margin-bottom:5px"> <tr><td> <div id="showState1" style="width:120px;height:15px;"> </div> </td><td> <button class="xamppBut" type="button" id="phpBut">Get Info by PHP Proxy</button> </td></tr> </table> div (id="tip1")<br><br> <div id="tip1" style = "line-height:170%; font-size:10pt;margin-top:0px;width:540px;height:100px;overflow:auto;background-color:white;text-align:left;padding:20px;line-height:160%"> </div> <br> <div class="barLilac"> QUICK HELP </div> <br> <div style="width:580px; height:300px; overflow:auto;background-color:#FFFFDE;border:1px solid gray"> <pre style="background-color:##FFFFDE;padding:10px;text-align:left;font-family:Arial;width:560;line-height:160%"> <b>GETTING STARTED</b> Perform the following steps: 1. Download and install the XAMPP package on your PC 2. Suppose that after installation you have the folder: C:\xampp\htdocs. Create subfolder "php-proxy": C:\xampp\htdocs\php-proxy. 3. Download or create the following files: - php-jquery-proxy.html - php-proxy.php - search-videos.css - url-list.js - my-play-videos.js After that, move all those files into the folder "php-proxy". 4. Open the website "youtube.com". Choose one page from the 5 types of pages: - page having url containing "watch?v=" and without "list=" - page having url containing "/user/" - page having url containing "/channel/" - page having url containing "list=" - page having url containing "results" (this page the result of SEARCH) Copy the url and the title of the page. If you can't define the title of the page then you cant use any title you want. - Open "url-list.js" file and paste the above informations there to make a additional new link. For example: you can add those two lines to "url-links.js": ptit[15] = 'Harald Winkler Guitar and Norman Candler Orchestra - Play list'; purl[15] = 'https://www.youtube.com/watch?v=HSVAWXBneHU&list=RDHSVAWXBneHU'; <span style="color:red"> <b>NOTE</b>: always write ptit['Title of the page'] first then put purl['URL of the page']</span> At the same time you have to write to the file "php-proxy.php" following line: $purl[15] = 'https://www.youtube.com/watch?v=HSVAWXBneHU&list=RDHSVAWXBneHU'; Doing the above is complicated but necessary for safety reasons when using PHP (using the whitelist). <b>A- SEARCH YOUTUBE VIDEOS:</b> To view this page should do the following: - Select "Fire Fox" as the default browser. - Click on the file "php-jquery-proxy.html". - In the address bar you need replace: "file:///C:/xampp/htdocs/php-proxy/php-jquery-proxy.html" with "localhost/php-proxy/php-jquery-proxy.html" - Next press the key "End" (it's in front of the key "Page Down"). - Finally press "Enter". - In the box div (id="tip1") click on any Youtube URL link then click the button "Get Info by PHP proxy"; - Wait till you see "DONE!"; - Now a "Control list" has been built in the div (id="list1") - In this control list click on any video link to watch the video continuously. - If you click on the URL different from the URL youtube then you just see the site without viewing videos. And this time, you'll often see a page worse than normal because its CSS and javascripts have been removed. But sometimes you find the site quite nice as the following cases: ptit[6] = 'Tokyo city'; purl[6] = 'http://www.travel-around-japan.com/k31-00-tokyo-metropolis.html'; ptit[7] = '14-beautiful-countries'; purl[7] = 'http://brightside.me/article/14-beautiful-countries-where-you-can-live-better-than-at-home-27955/'; ptit[8] = 'wikipedia.org/wiki/Abba'; purl[8] = 'https://en.wikipedia.org/wiki/Abba'; <b>B- PRACTICE SCHOOSING THE RIGHT CLASS NAME FOR ANCHOR TAGS</b> This is the section after the section bar "LET'S THINK ABOUT HOW TO WRITE THE CODE" - In the box div (id="tip2") if you click on a youtube URL link then you'll see two buttons with light green color: "Show Anchors grouped by Class" button and below it is the "Build Control list" button. You also see a inscription in the green background, reminding us about the current URL. We can notice that in the youtube website the number of videos typically can not be 1 or 2. They can be about 18 or 19 (approximately 20 or 25) on the page of "watch?v=" type. For pages of the types "user", "channel", "watch?v = ... list = ..." this number is of from 5, 6 to several tens of hundreds. For example , with the file "https://www.youtube.com/watch?v=LoD3_giJ_8g" (Lamento Boricano), we may choose one from the following two class names: 19:"yt-uix-sessionlink content-link spf-link spf-link " OR 19:"yt-uix-sessionlink vve-check thumb-link spf-link spf-link " Both of them related to group of 19 video clips. But only one of them have enough informations, suistable for building control links. The right choice is: class = "yt-uix-sessionlink content-link spf-link spf-link ". Therefore , in the box div (id="selectClass") you should click on the first radio button. - After selecting the class name you will click th button "Build Control list" to create "Control listt" in div (id = "div3"). - If you select the wrong classname you will see the message "ERROR". Indeed there are many methods to filter anchors for "playing video". </pre> </div> <br> div (id="target") - NOTE: Don't click on the links above <button onclick="divBigSmall('#target')">Big/Small</button> <br> <br> <div id="target"></div> <br> <div class="barSky"> B- LET'S THINK ABOUT HOW TO WRITE THE CODE </div> <div id="url" style="width:4px;height:1px;color:#999999;overflow:hidden;padding:0px;background-color:#999999;text-align:left"> </div> <div id="urlb" style="width:4px;height:1px;color:#999999;overflow:hidden;padding:0px;background-color:#999999;;text-align:left"> </div> <br> <b>Body part in the source code of</b><br> <span id="theFile"></span> <br> textarea (id="areaData") <br><br> <textarea id="areaData" style="width:580px;height:200px"> </textarea> <br><br> div (id="div2") - NOTE: Don't click on the links above <button onclick="divBigSmall('#div2')">Big/Small</button> <br><br> <div id="div2" style="display:block"> </div> <br> <span style="color:red"><b>NOTE:</b></span> Don't type text in the box below. It's not a text box <br><br> urlSt <br> <div id="urlStb" style="padding:4px;width:550px;height:32px;overflow:auto;background-color:white;border:1px gray solid;text-align:left"> </div> <br>div (id="tip2"): Click one link to paste URL then click "All Anchors" or "Grouped by Class"<br> <br> <div id="tip2" style = "font-size:10pt;margin-top:0px;width:540px;height:100px;overflow:auto;background-color:white;text-align:left;padding:20px;line-height:160%"> </div> <br> <label> <input type="radio" name="radio1" value="img" checked><img> </label> <label> <input type="radio" name="radio1" value="a"><a> </label> <label> <input type="radio" name="radio1" value="div"><div> </label> <label> <input type="radio" name="radio1" value="span"><span> </label> <label> <input type="radio" name="radio1" value="p"><p> </label> <label> <input type="radio" name="radio1" value="ul"><ul> </label> <label> <input type="radio" name="radio1" value="li"><li> </label> <label> <input type="radio" name="radio1" value="tbody"><tbody> </label> <label> <input type="radio" name="radio1" value="tr"><tr> </label> <br> <table id="butTable" cellspacing="5" cellpadding="0" style="margin-top:5px; margin-bottom:5px"> <tr><td> <div id="showState2" style="width:120px;height:15px;color:#99FFFF"> </div> </td><td> <button id="testABut" onclick="testA()">Show All Specified Tags</button> <button id="testAclassBut" class="youtubeColor"onclick="testAclass()">Show Anchors grouped by Class</button> </td></tr></table> textarea (id="areaData1") <br><br> <textarea id="areaData1" style="width:580px;height:160px;font-family:Arial;font-size:10pt;"> </textarea> <br><br> <div id="testYoutube"> Current Url: <br><br> <div id="theFile2" class="youtubeColor" style="padding:3px;width:574px;height:20px;text-align:left"></div> <br> Class Name <br><br> <input type="text" id="oneAText" value='"yt-uix-sessionlink content-link spf-link spf-link "' size="80"> <br><br> Copy and paste in the box above suitable class name wrapped inside Double Quotation Marks<br> then click following button:<br> <table id="butTable" cellspacing="5" cellpadding="0" style="margin-top:5px; margin-bottom:5px"> <tr><td> <div id="showState3"></div> </td><td> <button id="oneAclassBut" class="youtubeColor" onclick="oneAclass()">Build Control List</button> </td></tr> </table> div (id="selectClass") <br><br> <div id="selectClass" style="padding:10px;width:560px;height:240px;overflow:auto; background-color:white;text-align:left"> <b>NOTE:</b> According to the "Current Url" to choose class name<br> <b>If Current Url</b><br><br> - contains "watch?v=" but does not contain "list" => Copy and past<br> "yt-uix-sessionlink content-link spf-link spf-link " (OR Click <input type="radio" name="classRad" value="watch" checked>) <br> <br> - contains "user" or "channel" => Copy and past<br> "yt-uix-sessionlink yt-uix-tile-link spf-link yt-ui-ellipsis yt-ui-ellipsis-2" (OR Click <input type="radio" name="classRad" value="user">) <br> <br> -contains "list" => Copy and past<br> "pl-video-title-link yt-uix-tile-link yt-uix-sessionlink spf-link " (OR Click <input type="radio" name="classRad" value="list">) <br> <br> -contains "results" => Copy and past<br> "yt-uix-sessionlink yt-uix-tile-link yt-ui-ellipsis yt-ui-ellipsis-2 spf-link " (OR Click <input type="radio" name="classRad" value="results">) </div> <br> </div> <!-- end of test youtube --> pre (id="areaData2") <button onclick="divBigSmall('#areaData2')">Big/Small</button> <pre id="areaData2" style="width:570px;height:300px;font-family:Arial;font-size:10pt;background-color:white;overflow:auto;text-align:left;padding:5px;"> </pre> div (id="div3")<br> <br> <div id="div3" style="display:block"> </div> <br> <div class="barLilac"> HELP & REFRENCE </div> <br> <button onclick="loadIframe('helpIframe', 'reading/help-yql-search-links.html')" > Help</button> <button onclick="loadIframe('helpIframe', 'reading/Loading-external-content.htm')" > Loading external content</button> <button onclick="loadIframe('helpIframe', 'reading/php-parse-html-dom.html')" > Php DOM</button> <button onclick="loadIframe('helpIframe', 'reading/request-with-yql.html')" > Request with YQL</button> <button onclick="loadIframe('helpIframe', 'reading/yql-guide.html')" > Yahoo Query Language</button> <br> <br> <iframe id='helpIframe' src="reading/help-yql-search-links.html" style="width:577px;height:500px;background-color:white"> </iframe> <br> <br> <div class="barLilac"> SOURCE CODES </div> <br> <button onclick="loadIframe('codeIframe', 'code/code-jquery-php-proxy.html')" > jquery-php-proxy.html</button> <button onclick="loadIframe('codeIframe', 'code/code-php-proxy-php.html')" > php-proxy.php</button> <button onclick="loadIframe('codeIframe', 'code/code-url-list-js.html')" > url-list.js</button> <button onclick="loadIframe('codeIframe', 'code/code-search-videos-css.html')" > search-videos.css</button> <button onclick="loadIframe('codeIframe', 'code/code-my-play-videos-js.html')" > my-play-videos.js</button> <br><br> <iframe id='codeIframe' src="code/code-jquery-php-proxy.html" style="width:577px;height:500px;background-color:white"> </iframe> <br><br> NOTE: to create the file above:<br> Right-click, choose "Select All" then Right-click, choose "Copy"<br> Open your "Notepad", Paste and Save as "All Files" ... <br><br> <div class="barSky" style="background-color:#003366; color:white;height:24px;padding-top:7px"> <button onclick="goURL('http://phanhung20.blogspot.com/')"> My Blog</button> </div> <a name="bott"> </div> <!-- center--> <script type="text/javascript"> ptit = []; purl = []; </script> <script src="url-list.js"></script> <script> $(document).ready(function(){ $('#phpBut').on('click', function(){ $('#showState1').html('<span style="color:#FF66FF">Please wait!</span>'); var url1 = $('#url').html(); var arr = url1.split('#'); var url2 = arr[1]; if((url2.search('watch') != -1) && (url2.search('list=') != -1)){ url2 = watch2playlist(url2); } $('#url').html(url2) url = arr[0]; $.ajax({ url: 'php-proxy.php', data: 'url='+url, dataType: 'json', type: 'POST', success: function(response){ var htmlStr = response.source; var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var array_matches = pattern.exec(htmlStr); var htmlStr1 = array_matches[1]; var htmlStr1 = htmlStr1.replace(/<script([^'"]|"(\\.|[^"\\])*"|'(\\.|[^'\\])*')*?<\/script>/g,''); $('#areaData').val(htmlStr1); $('#target').html(htmlStr1); //////// repaire img var link = document.createElement('a'); link.setAttribute('href', url2); // url var adding = link.protocol +'//' + link.hostname + '/'; $('#target img').each(function(){ if(($(this).attr('src')).search('//upload.wikimedia.org') != -1){ $(this).attr('src', 'https:' + $(this).attr('src')); }else{ if($(this).attr('src').search('://') == -1){ $(this).attr('src', adding+ $(this).attr('src')); } } }); /////////// end of repaire if(url1.search('youtube')>0){ testVUP(); tBott('r1'); } $('#showState1').html('<span style="color:#FFCC00">DONE!</span>') }, error: function(e){ alert('Invalid URL or Some Error occured!'); } }); }); }); function testVUP(){ var st5 = $('#url').html(); if((st5.search('user/') > 0) || (st5.search('channel') > 0) ){ testUser() }else if(st5.search('list') > 0){ testPlaylist(); }else if(st5.search('v=') > 0){ testOneVideo(); }else if(st5.search('results') > 0){ testSearch(); }else{ // } } function testOneVideo(){ var stPL = ''; var ss = ''; $('#target a[class="yt-uix-sessionlink content-link spf-link spf-link "]') .each(function(idx){ var ide = ($.trim($(this).attr('href'))).replace(/\/watch\?v=/g,''); var tit = $.trim($(this).attr('title')); ss = rowString(ide, tit, 'r1'); stPL += ss; }); var main_id = $('#url').html().split('v=')[1]; main_id = main_id.substring(0, 12); var main_tit = $('#target span[class="watch-title"]').html(); var ff = rowString(main_id, '<b>MAIN</b>:'+ main_tit); $('#r1').append(ff + stPL); /* NOTE: span class="watch-title" => main_title */ } function testPlaylist(){ var stPL = ''; var ss = ''; $('#target a[class="pl-video-title-link yt-uix-tile-link yt-uix-sessionlink spf-link "]') .each(function(idx){ var ide = ($.trim($(this).attr('href'))).replace(/\/watch\?v=/g,''); var ide = ide.substring(0,11); var tit = $.trim($(this).text()); ss = rowString(ide, tit, 'r1'); stPL += ss; }); $('#r1').append(stPL); } function testUser(){ var stPL = ''; var ss = ''; $('#target a[class="yt-uix-sessionlink yt-uix-tile-link spf-link yt-ui-ellipsis yt-ui-ellipsis-2"]') .each(function(idx){ var ide = ($.trim($(this).attr('href'))).replace(/\/watch\?v=/g,''); var tit = $.trim($(this).text()); ss = rowString(ide, tit, 'r1'); stPL += ss; }); $('#r1').append(stPL); } function testSearch(){ var stPL = ''; var ss = ''; $('#target a[class="yt-uix-sessionlink yt-uix-tile-link yt-ui-ellipsis yt-ui-ellipsis-2 spf-link "]') .each(function(idx){ var ide = ($.trim($(this).attr('href'))).replace(/\/watch\?v=/g,''); var ide = ide.substring(0,11); var tit = $.trim($(this).text()); ss = rowString(ide, tit, 'r1'); stPL += ss; }); $('#r1').append(stPL); } var sumN = 0; // global variable var sumN2 = 0; function rowString(vid, titl, place){ var rowSt = ''; if(place=='r1'){ rowSt = '<tr width="290" id="row_'+ sumN +'">'+ '<td style="width:27px"><button onclick="hideShow(this)" disabled>h/s</button><br>'+ '<button onclick="xUp(this)">▲</button><br>'+ '<button onclick="xDown(this)">▼</button></td>'+ '<td width="80px"><img width="88" height="65" '+ 'src="http://img.youtube.com/vi/'+ vid +'/default.jpg"></td>' + '<td>'+ '<input type="checkbox" class="vselected" onclick="likeNormal(this)">'+ '<b>'+(sumN+1)+'.</b> <a class="vAnchor" href="#" title="'+ vid + '" onclick = "playVid(this); return false">'+ titl + '</a>'+ '<br><span class="hsSpan" style="color:red"></span>'+ '</td></tr>'; sumN ++ }else{ rowSt = '<tr width="290" id="row_'+ sumN2 +'">'+ '<td style="width:27px"><button onclick="hideShow(this)" disabled>h/s</button><br>'+ '<button onclick="xUp(this)">▲</button><br>'+ '<button onclick="xDown(this)">▼</button></td>'+ '<td width="80px"><img width="88" height="65" '+ 'src="http://img.youtube.com/vi/'+ vid +'/default.jpg"></td>' + '<td>'+ '<input type="checkbox" class="vselected" onclick="likeNormal(this)">'+ '<b>'+(sumN2+1)+'.</b> <a class="vAnchor" href="#" title="'+ vid + '" onclick = "playVid(this); return false">'+ titl + '</a>'+ '<br><span class="hsSpan" style="color:red"></span>'+ '</td></tr>'; sumN2 ++ } return rowSt; } function getRadioVal(){ var radioVal = $("input[name='radio1']:checked").val(); if(radioVal){ return radioVal; } } function testA(){ $('#areaData1').val(''); $('#areaData2').val(''); $('#showState2').html('Please wait!'); var url1b = $('#urlb').html(); var arr = url1b.split('#'); var url2b = arr[1]; if((url2b.search('watch') != -1) && (url2b.search('list=') != -1)){ url2b = watch2playlist(url2b); } $('#urlb').html(url2b) var url = arr[0]; $.ajax({ url: 'php-proxy.php', data: 'url='+url, dataType: 'json', type: 'POST', cache: false, success: function(response){ var htmlStr = response.source; var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var array_matches = pattern.exec(htmlStr); var htmlStr1 = array_matches[1]; var htmlStr1 = htmlStr1.replace(/<script([^'"]|"(\\.|[^"\\])*"|'(\\.|[^'\\])*')*?<\/script>/g,''); $('#areaData').val(htmlStr1); $('#div2').html(htmlStr1); //////// repairing img var link = document.createElement('a'); link.setAttribute('href', url2b); var adding = link.protocol +'//' + link.hostname + '/'; $('#div2 img').each(function(){ if(($(this).attr('src')).search('//upload.wikimedia.org') != -1){ $(this).attr('src', 'https:' + $(this).attr('src')); }else{ if($(this).attr('src').search('://') == -1){ $(this).attr('src', adding+ $(this).attr('src')); } } }); //////// end of repairing var set1 = $('#div2').find('a'); var arr3 = []; var radVal = getRadioVal(); $('#div2').find(radVal).each(function(idx){ var ht = $(this).clone().wrap('<div>').parent().html(); arr3.push(idx+'. '+ $.trim(ht)+'\n\n'); }); var st = arr3.join(''); $('#areaData1').val(st); $('#areaData2').html(st); $('#showState2').html('<span style="color:#FFCC00">DONE!</span>') }, error: function(e){ $('#areaData1').val('Invalid URL or Some Error occured!'); } }); } function testAclass(){ $('#areaData1').val(''); $('#areaData2').val(''); $('#showState2').html('Please wait!'); var url1b = $('#urlb').html(); var arr = url1b.split('#'); var url2b = arr[1]; if((url2b.search('watch') != -1) && (url2b.search('list=') != -1)){ url2b = watch2playlist(url2b); } $('#urlb').html(url2b) var url = arr[0]; $.ajax({ url: 'php-proxy.php', data: 'url='+url, dataType: 'json', type: 'POST', cache: false, success: function(response){ var htmlStr = response.source; var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var array_matches = pattern.exec(htmlStr); var htmlStr1 = array_matches[1]; var htmlStr1 = htmlStr1.replace(/<script([^'"]|"(\\.|[^"\\])*"|'(\\.|[^'\\])*')*?<\/script>/g,''); $('#areaData').val(htmlStr1); $('#div2').html(htmlStr1); //////// repairing img var link = document.createElement('a'); link.setAttribute('href', url2b); var adding = link.protocol +'//' + link.hostname + '/'; $('#div2 img').each(function(){ if(($(this).attr('src')).search('//upload.wikimedia.org') != -1){ $(this).attr('src', 'https:' + $(this).attr('src')); }else{ if($(this).attr('src').search('://') == -1){ $(this).attr('src', adding+ $(this).attr('src')); } } }); //////// end of repairing $('#areaData1').val(''); var arrClass = []; var divs = []; var radVal = 'a'; //var set1 = $('#div2').find(radVal); var arr3 = []; $('#div2').find(radVal + '[class]').each(function(idx){ var zz = $(this).attr('class'); arrClass.push(zz); }); divs = getUnique(arrClass); var qq = ''; $(divs).each(function(idx){ arr3 = []; var ll = $(radVal + '[class="'+ divs[idx] +'"]').length; var mm = 0; $(radVal + '[class="'+ divs[idx] +'"]').each(function(){ var ht = $(this).clone().wrap('<div>').parent().html(); arr3.push(mm + '. '+ $.trim(ht)+'\n\n'); mm++; }); var st = arr3.join('') + '\n=================\n\n'; $('#areaData1').val( $('#areaData1').val() + ll +':"'+ divs[idx] + '"\n-----------------\n\n' + st ); qq += ll +':"'+ divs[idx] + '"\n'; }); $('#areaData1').val(qq+'\n'+ $('#areaData1').val()); $('#showState2').html('<span style="color:#FFCC00">DONE!</span>'); }, error: function(e){ $('#areaData1').val('Invalid URL or Some Error occured!'); } }); } function oneAclass(){ $('#showState3').html('Please wait!'); $("input[name=classRad]").prop('checked', false); var arr4 = []; var clName = $.trim($('#oneAText').val()); clName = clName.substring(1, (clName.length - 1)); $('#div2 a[class="'+ clName + '"]').each(function(idx){ var ht = $(this).clone().wrap('<div>').parent().html(); arr4.push('<b>'+(idx+1)+'</b>. '+ $.trim(ht)+'\n\n'); }); // alert('oneAclass: '+ arr4.length); if(arr4.length > 0){ $('#showState3').html('<span style="color:#66FF00">SUCCESS!</span>'); }else{ $('#showState3').html('<span style="color:#FF66CC">ERROR!</span>'); } var st = arr4.join(''); st = st.replace(/</g,'<'); $('#areaData2').html(st); var stPL = ''; var ss = ''; $('#div2 a[class="'+ clName + '"]').each(function(idx){ var ide = ($.trim($(this).attr('href'))).replace(/\/watch\?v=/g,''); ide = ide.substring(0,11); if(($('#urlb').html()).search('list=') > 0){ var tit = $.trim($(this).text()); }else{ tit = $.trim($(this).attr('title')); } ss = rowString(ide, tit, 'r2'); stPL += ss; }); stPL = '<table id="tableB" width="100%"><tbody id="r2">'+ stPL + '</tbody></table>'; $('#div3').append(stPL); tBott('r2'); } function watch2playlist(st){ var aa = st.indexOf('watch?v'); var bb = st.indexOf('list=') var mm = st.slice(aa,bb); var pp = st.replace(mm, 'playlist?'); return pp; } function getUnique(inputArray) { var outputArray = []; for (var i = 0; i < inputArray.length; i++) { if (($.inArray(inputArray[i], outputArray)) == -1) { outputArray.push(inputArray[i]); } } return outputArray; } /////////////// COMMON FUNCTIONS function readyTerm20(thi){ $('#showState1').html(''); var term = thi.title; var inner = thi.innerHTML; $('#url').html(term); $('#urlSt').html(inner); $('#theFile').html(inner); } function readyTerm20b(thi){ $('#showState2').html(''); $('#showState3').html(''); var term = thi.title if(term.search('youtube') >= 0){ $('#testABut').hide(); $('#testAclassBut').show(); $('#testYoutube').show(); }else{ $('#testABut').show(); $('#testAclassBut').hide(); $('#testYoutube').hide(); } var inner = thi.innerHTML; $('#theFile').html(inner); $('#urlb').html(term); $('#urlStb').html(inner); $('#theFile2').html(term); } function divBigSmall(element){ var cWidth = $(element).css('width'); var ww = parseInt(cWidth.replace('px','')); if(ww < 620) { $(element).css('width','98%'); $(element).css('height','650px'); }else { $(element).css('width','568px'); $(element).css('height','380px'); } } function array2links(place){ var st = ''; var aa = ''; var len = ptit.length; for (i=0; i<len ; i++){ if(place == '#tip1'){ aa = '<b>'+ i+'.</b> <a href="#" onclick="readyTerm20(this); return false" title="'+ i+ '#'+ purl[i] + '">' + ptit[i] + '</a><br>'; }else{ aa = '<b>'+ i+'.</b> <a href="#" onclick="readyTerm20b(this); return false" title="'+ i+ '#'+ purl[i] + '">' + ptit[i] + '</a><br>'; } st += aa } $(place).html(st) } function loadIframe(iframeName, url) { var $iframe = $('#' + iframeName); if ( $iframe.length ) { $iframe.attr('src',url); return false; } return true; } function scrollToElement(elem, add){ var top = $("#"+ elem).position().top; $(window).scrollTop( top - add); } function goto(name) { window.location.hash= name; } function goURL(ur){ window.location = ur; } //////////////// init $(document).ready(function() { $('#areaData').val(''); $('#areaData1').val(''); $('#urlSt').html(ptit[0]); $('#url').html('0#' + purl[0]); $('#urlStb').html(ptit[0]); $('#theFile2').html(purl[0]); $('#urlb').html('0#' + purl[0]); array2links('#tip1'); array2links('#tip2'); $('input[name="classRad"]').on('click', function(){ if($(this).val() == "watch"){ $('#oneAText').val('"yt-uix-sessionlink content-link spf-link spf-link "') } if($(this).val() == "user"){ $('#oneAText').val('"yt-uix-sessionlink yt-uix-tile-link spf-link yt-ui-ellipsis yt-ui-ellipsis-2"') } if($(this).val() == "list"){ $('#oneAText').val('"pl-video-title-link yt-uix-tile-link yt-uix-sessionlink spf-link "') } if($(this).val() == "results"){ $('#oneAText').val('"yt-uix-sessionlink yt-uix-tile-link yt-ui-ellipsis yt-ui-ellipsis-2 spf-link "') } }); $('#testABut').hide(); $('#testAclassBut').show(); $('#oneAclassBut').show(); $('#testYoutube').show(); }); </script> <script src="my-play-videos.js"></script> </body> </html> <!-- 918 lines -->
And this is the file "php-proxy.php"
<?php $purl[0] = "https://www.youtube.com/watch?v=LoD3_giJ_8g"; $purl[1] = "https://www.youtube.com/watch?v=Iq9amIm-6sQ"; $purl[2] = "https://www.youtube.com/watch?v=vOBNasoJh4k&index=1&list=FLk859Ps6On6o2kKiTgrPgSQ"; $purl[3] = 'https://www.youtube.com/user/KatyPerryVEVO/videos'; $purl[4] = 'https://www.youtube.com/channel/UCMB6LOEiEVnTBOS-cSP7wsA'; $purl[5] = 'https://www.youtube.com/watch?v=yWOMiBOcNYk'; $purl[6] = 'http://www.travel-around-japan.com/k31-00-tokyo-metropolis.html'; $purl[7] = 'http://brightside.me/article/14-beautiful-countries-where-you-can-live-better-than-at-home-27955/'; $purl[8] = 'https://en.wikipedia.org/wiki/Abba'; $purl[9] = 'https://developer.yahoo.com/javascript/howto-proxy.html'; $purl[10] = 'https://www.youtube.com/watch?v=G1UU9iZsRa4'; $purl[11] = 'https://www.youtube.com/watch?v=FVb6izgJoLE&list=PLE126D7A61BE17C83'; $purl[12] = 'https://www.youtube.com/results?search_query=ricky+king'; $purl[13] = 'https://www.youtube.com/results?q=ricky+king&sp=SCjqAwA%253D'; $purl[14] = 'https://www.youtube.com/results?q=ricky+king&sp=SDzqAwA%253D'; $num = (int)$_POST['url']; if (filter_var($num, FILTER_VALIDATE_INT) === false) { //json_encode(array('error'=>'invalid_url')); die(); }else { $url = $purl[$num]; if(preg_match('/watch/',$url,$match)&&preg_match('/list/',$url,$match)){ $arr = explode('watch',$url); $arr1 = explode('list',$arr[1]); $url = $arr[0].'playlist?list'.$arr1[1]; } $page = file_get_contents($url); echo json_encode(array('source'=>$page)); } ?>
The file "url-list.js":
ptit = []; purl = [];
ptit[0] = 'Mi Guitarra Canta - Eliades Ochoa - Lamento Boricano';
purl[0] = 'https://www.youtube.com/watch?v=LoD3_giJ_8g';
ptit[1] = 'Jeff Steinberg - Besame Mucho';
purl[1] = 'https://www.youtube.com/watch?v=Iq9amIm-6sQ';
ptit[2] = 'Indonesia - Playlist';
purl[2] = 'https://www.youtube.com/watch?v=vOBNasoJh4k&index=1&list=FLk859Ps6On6o2kKiTgrPgSQ';
ptit[3] = 'Katy Perry VEVO - User';
purl[3] = 'https://www.youtube.com/user/KatyPerryVEVO/videos';
ptit[4] = 'Hangabur Documentries - Channel';
purl[4] = 'https://www.youtube.com/channel/UCMB6LOEiEVnTBOS-cSP7wsA';
ptit[5] = 'ITALIAN MUSIC - COME BACK TO SORRENTO - JACK JEZZRO';
purl[5] = 'https://www.youtube.com/watch?v=yWOMiBOcNYk';
ptit[6] = 'Tokyo city';
purl[6] = 'http://www.travel-around-japan.com/k31-00-tokyo-metropolis.html';
ptit[7] = '14-beautiful-countries';
purl[7] = 'http://brightside.me/article/14-beautiful-countries-where-you-can-live-better-than-at-home-27955/';
ptit[8] = 'wikipedia.org/wiki/Abba';
purl[8] = 'https://en.wikipedia.org/wiki/Abba';
ptit[9] = 'howto-proxy.html';
purl[9] = 'https://developer.yahoo.com/javascript/howto-proxy.html';
ptit[10] = 'The World at War HD (1080p) - Ep. 1 - A New Germany (1933–1939)';
purl[10] = 'https://www.youtube.com/watch?v=G1UU9iZsRa4';
ptit[11] = 'my music 1 - Play list';
purl[11] = 'https://www.youtube.com/watch?v=FVb6izgJoLE&list=PLE126D7A61BE17C83';
ptit[12] = 'ricky king - Search';
purl[12] = 'https://www.youtube.com/results?search_query=ricky+king';
ptit[13] = 'ricky king - Search page 3';
purl[13] = 'https://www.youtube.com/results?q=ricky+king&sp=SCjqAwA%253D';
ptit[14] = 'ricky king - Search page 4';
purl[14] = 'https://www.youtube.com/results?q=ricky+king&sp=SDzqAwA%253D';
The file "search-videos.css
/* CSS Document */ body{ background-color:#999999; margin:0px; padding:0px; font-family:Arial; font-size:10pt; } #r1 td, #myDiv td{ border:1px solid gray; font-size:10pt; } a{ text-decoration:none; } a:hover{ color:green; } input[type="button"], button, input[type="submit"]{ background-color:#DDDDDD; cursor:pointer; padding:0px; margin:0px; } #target{ background-color:white; text-align:left; padding:5px; width:568px;height:380px;overflow:auto; border:1px solid gray } #vtitle{ width:580px;height:20px;color:white;background-color:#666666; overflow:hidden; padding-top:4px; } td{ font-size:10pt; vertical-align:top; border:1px gray solid; } #header1{ font-weight:bold; width:580px; height:15px; background-color:#003366; padding:1px; position: fixed; right: 0; left: 0; margin-right: auto; margin-left: auto; } #div1, #div2, #div3, div4{ width:570px; height:300px; overflow:auto; background:white; text-align:left; padding:5px; } #list1 button, #div3 button{ width:28px; } #showState, #showState1, #showState2, #showState3{ width:120px;height:15px; border:2px solid gray; border-style:inset; color:#66FF00; font-weight:bold; text-align:center; background-color:black; padding:3px; padding-left:3px; } .barSky{ width:570px;height:20px;background-color:#99CCFF; color:black; font-weight:bold;padding:5px; } .barLilac{ width:570px;height:20px;background-color:#CCCCFF; color:black; font-weight:bold;padding:5px; } .barYellow{ width:570px;height:20px;background-color:#FFFFCC; color:black; font-weight:bold;padding:5px; } .barGreen{ width:570px;height:20px;background-color:#CCFF99; color:black; font-weight:bold;padding:5px; /* padding:4px; */ } .xamppBut{ background-color:#FFCCFF; }
