SEARCH VIDEOS AND SIMPLIFIED JSONP DEMO

About JSON and JSONP you can read in the internet

Here I would like to present this issue as I understand.

JSONP (JSON with Padding) is an unofficial method, a intelligent trick to overcome barriers when we want to transmit information between different domains.
(author: Bob Ippolito
http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/)

To use JSONP, first we need convert the information into a javascript object.
Then this object is taken as an argument for a function with a certain name, eg "jsonCallback(...)"

Because the user has written jsonpCallback function when the information comes to the client PC this function is trigged and the JSON (long string, a photo of the object) revives, becomes real object and start working under the user's program.

There are two methods
1- Typical method:
The user can give a name for function and then sent this name to remote server. To use typical method apart from Javascript, we have to know a server-side programming language (eg PHP). Typical method is difficult to understand for people who knows only Javascript.

2- Simplified free method:
Take it to avoid knowing of server-side scripts.

In this post there 3 files

A- File jsonp-demo1.html
When reading source code it is easy to understand the nature of jsonp 

 <!DOCTYPE html">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style>
  body{
  font-family:Arial;font-size:10pt;
  background-color:#DDDDDD;  margin:0px;padding:0px;
  }
  </style>
  </head>
  
  <body onload="init()">
  <div align="center">
  <div style="width:600px">
  <br>
  <button onclick = "jsonCallback(obj)">Click to load JSON</button>
  <br><br>
  response.items[1].title =<br>
  <span id = "span1"></span>
  <br><br>THIS IS JSON WRAPPED BY A FUNCTION<br><br>
  <textarea id = "area1"
  style = "width:560px;height:310px;padding:5px"></textarea>
  <br><br>
  </div>
  <script>
  
  function jsonCallback(response){
       var titVal = response.items[1].title;
       document.getElementById('span1').innerHTML = titVal;
       stJSON = JSON.stringify(response,'',2);
       document.getElementById('area1').value = "jsonCallback("+stJSON+')';
  }
  
  </script>
  
  <script>
  obj = {
      items:[
            {vidpid:"4DO8GsIYfhQ",
             title:"Enrique Iglesias, Juan Luis Guerra - Cuando Me Enamoro"},
            {vidpid:"9_tgBimq7Io",
             title:"Claudia Jung & Richard Clayderman - Je t'aime mon amour!"},
            {vidpid:"g6Ge_uR27jc",
             title:"Mayelin Naranjo \"Palmas y Cañas\"-Mi Veneracion (Miguel Matamoros)"},
            {vidpid:"67XdPLZzsHk",
             title:"HOTEL CALIFORNIA - MARC ANHTONY (Version salsa)"}
            ]
  }
  
  function init(){
       document.getElementById('span1').innerHTML = '';
       document.getElementById('area1').value = '';
  
  }
  
  </script>
  </div>
  </div>
  </body></html> <!-- 58 lines -->
B- Now I cut one part of javascript and use it to create one external javscript file that I call api3-demo.js. 
obj = {
      items:[
            {vidpid:"G8RQZ_RmR_U",
             title:"Italy/Napoli (Walking tour:Santa Lucia) Part 3"},
            {vidpid:"DA_gTGVOLXU",
             title:"Chet Atkins ~ Santa Lucia"},
            {vidpid:"eeEKnIn_uuk",
             title:"beegie adair - autumn leaves HQ"},
            {vidpid:"4193_Bw8y2A",
             title:"Amurski Valovi - Амурские волны"},
            {vidpid:"cgk9vJREiDg",
             title:"Frédéric Chopin Tristesse (Orchestral)"},
            {vidpid:"wrFieclZpOg",
             title:"AVE MARIA (FRANZ SCHUBERT) EN GUITARRA CLÁSICA POR MICHAEL LUCARELLI"},
            {vidpid:"9_tgBimq7Io",
             title:"Claudia Jung & Richard Clayderman - Je t'aime mon amour!"},
            {vidpid:"4Jmhdskn4NY",
             title:"Paul Mauriat - Endless love"},
            {vidpid:"uiMyaF0tyG0",
             title:"La Paloma -The Dove (with Lyrics).wmv"},
            {vidpid:"x_qeZ0pqU9c",
             title:"MANHÃ DE CARNAVAL (letra e vídeo), vídeo MOACIR SILVEIRA"},
            {vidpid:"2vipzUaQiCw",
             title:"BESAME MUCHA Maurizio"},
            {vidpid:"NowlThzdpaU",
             title:"ROCCO GRANATA - ITALIAN SONG"},
            {vidpid:"vBCrZsxUvCE",
             title:"Rataro - Mave Tapu"},
            {vidpid:"4DO8GsIYfhQ",
             title:"Enrique Iglesias, Juan Luis Guerra - Cuando Me Enamoro"},
            {vidpid:"g6Ge_uR27jc",
             title:"Mayelin Naranjo \"Palmas y Cañas\"-Mi Veneracion (Miguel Matamoros)"},
            {vidpid:"67XdPLZzsHk",
             title:"HOTEL CALIFORNIA - MARC ANHTONY (Version salsa)"}
            ]
  }
  jsonCallback(obj);
The file "api3-demo.js" was uploaded into my hosting server "https://apiculate-integers.000webhostapp.com"
From the rest of html file I create jsonp-demo2.html and it was saved to my PC.
I tried "jsonp-demo2.html". It works.
If you download (or create) the file jsonp-demo2.html to your PC then I thinks that it also works normally.
http://play-videos.url.ph/v3/jsonp-demo2.html 
<!DOCTYPE html">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  
  <style>
  body{
  font-family:Arial; font-size:10pt;
  background-color:#CCCCCC; margin:0px; padding:0px;
  }
  a{
  color:blue; text-decoration:none;
  }
 
  a:hover {
  background-color: #CCFF99;
  }
  
  #div1{
  padding:10px;background-color:white;width:580px;height:120px;
  overflow:auto;text-align:left;line-height:160%
  } 
  </style>
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
 
</head>
<body>
  <div align="center" style="margin-left:0px">
  
  <div id="player"></div>
  <br><br>
  <div id="div1" ></div>
  <br><br>
 
  <script>
  
  vid = []; tit = [];
  
  function jsonCallback(response){
       len = response.items.length;
       for(i=0;i<len;i++){
            stVid = response.items[i].vidpid;
            vid.push(stVid);
            stTit = response.items[i].title; 
            tit.push(stTit);
            var xx = '<b>'+(i+1)+'</b>/<b>'+len+'</b>:'+
            '<a href="#" onclick="playVid('+i+'); return false">'+
            stTit +'<br>';
            document.getElementById('div1').innerHTML += xx;
       }
  }
  
  normalW = '600'; // '812'
  normalH = '381'; // '516'
  var player;
  startvid = 'otPNwTrva0I';
  var jj = 0;  
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  function onYouTubePlayerAPIReady() {  
        player = new YT.Player('player', {
            width: normalW,
            height:normalH,
            videoId: startvid,
            playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'showsearch': 0, },
            events: {
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError        
            }
        });    
  }
    
  function onPlayerError(error){
        if ( error ){  
           nextVid();
        }
  }    
  
  function onPlayerStateChange(event) {
        if (event.data == 0) { 
             nextVid();
             return false;
        }
  }
  
  function playVid(num){
      jj=num;
      ide = vid[num];
      player.loadVideoById(ide, "default");
  }
  
  function nextVid(){
      last = vid.length - 1;
      if(jj <= last){jj=jj+1}; 
      if (jj > last){jj=0};
      playVid(jj);
  }
   
  </script>
  
  <script src="https://apiculate-integers.000webhostapp.com/copy-scan/api3-demo.js"></script>
  
  <!-- NOTE:
  Another way: put "api3-demo.js" on your PC and use src="api3-demo.js"
  -->
  </div>
  </body></html>    <!-- 110 lines -->
REFERENCE
http://www.sitepoint.com/jsonp-examples/
http://www.kliptu.com/free-script/jquery-getjson-cross-domain-json-example-with-php

Popular posts from this blog

PHP JQUERY PROXY DEMO

Image
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...
Read more

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

Previously in March and April 2016 I posted OBSERVE nextPageToken IN YOUTUBE JSON DATA and SEARCH BY KEYWORD - GETTING MAXIMAL NUMBER OF ITEMS. Now those posts were old, some links were broken, They are written for PC and then youtube did not restrict video search by granting quota. Now I update it to suit the quota situation and write for programming on the ipad. <!DOCTYPE html> <html> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <meta name= "author" content= "pvhung20" > <head> <script src= "https://code.jquery.com/jquery-3.6.0.js" ></script> <style> body { font-family :Arial; font-size : 14pt ; background-color : #003333 ; margin : 0px ; padding : 0px ; margin-bottom : 50px ; color : white ; } button , input , textarea , span { font-size : 14pt ; } textarea { ...
Read more