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

JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

SEARCH VIDEOS AND SIMPLIFIED JSONP DEMO

Popular posts from this blog

PHP JQUERY PROXY DEMO

SEARCH FOR PIXABAY PHOTOS

DOWNLOAD pixab-15.html