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

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

Image
Creating a video player using HTML5 is not too difficult. But it only plays some video formats such as MP4, OGG, WEBM. To watch more video formats, we must use the HTML5 video player plugin. I tried "Mediaelement.js" and found it great: in addition to the above mentioned formats, it can play YouTube, DaylyMotion, SoundCloud, Facebook, Vimeo, HLS, Dash, FLV and others. In the samples by "Mediaelement.js" I choose only two examples close to satisfy my needs. However in the sample for playlist, the player only plays mp4, mp3, ogg, webm and youtube. Meanwhile, the demo file can play a lot of formats but only play 1 video (when it is clicked) and stops. All the scripts are very short. Most just include only one function with multiple arguments to build the player. Nothing more. So I looked at the source code of the "mediaelement-js.com" page, where all js files are online and have more functions. However, it is very difficult for me...
Read more

COPY SOURCE CODE FOR ytvideo-play.html, test

Image
Before reading this post you should see the post: http://phanhung20.blogspot.com/2021/02/copy-source-code-for-ytvideo-searchhtml.html The file ytvideo-search.html can make all javascript files of the form objpage- ... .js. Those js files will be loaded by the file ytvideo-play.html for playing youtube videos. Tap COPY to create the file objpage-all.js COPY objpageAll = [ 'objpage-herald-winkler.js', 'objpage-paul-mauriat.js' ]; Tap COPY to create the file objpage-herald-winkler.js COPY /* 1- Tap the button COPY to copy this contain to clipboard. 2- Tap the button x in top right corner to quit this working file 3- Tap the button + in the bottom left to create a new javascript file with the name: objpage-herald-wingkler.js 4- Tap the name of this new file to open it and paste there the contain from clipboard. 5- Open the file objpage-all.js and add 'objpage-herald-wingkler.js' to the array objselect: objselect = [ ... , ... , objpage-herald-win...
Read more