MAKE PROGRESS BAR THAT LOOKS LIKE YOUTUBE'S

Progress bars are created using the Progress bar element. For example:
<progress id = "pBar" width = "576" height = "4" value = "0"></progress>

Being essentially a time clock, progress bar theoretically needs to perform an uniform motion with constant velocity v (v=xmax/tmax). However this velocity needs to change in two cases:

1- When the currently playing video reaches to its end and the new one starts playing (tmax changes).

2- When the webpage user click on the 'player size' button to change the player's and progress-bar's width (xmax changes). 

So we need to build the following mathematical  function :

distance(x) = velocity(v) * time(t) = (xmax/tmax)*t = f(t, tmax, xmax)
where t is variable and tmax, xmax are parametters (parametter are the variable which rarely changes)
(Notice that, in javascript all of them t, tmax, xmax are known as function's parameters)

(1) xmax = document.getElementById('pBar').offsetWidth
(2) tmax = player.getDuraiont ();
(3) t = player.getCurrentTime ()
(4) x(t) = v*t = (xmax/tmax)*t
We easily calculate the time t' when the user click on a point (pixel) with coordinate x' on the progress bar
x' = event.pageX - this.offsetLeft
(5) t' = x'/v =x'*(tmax/xmax)


Please continue reading the following at the bottom of the below embedded web page



Source code of this web page 

<!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>
  <style>
  body{
  font-family:Arial;font-size:10pt;background-color:#CCCCCC; 
  margin:0px;
  padding:0px;
  }  
  #header1{
  color:white;font-weight:bold;width:600px;
  background-color:#333366;padding-top:3px; 
  padding-bottom:3px;
  position: fixed;  top: 0px; 
  
  left: 0;
  right: 0;
  margin: 0 auto; 
  }
  #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:10pt;vertical-align:top;border:1px gray solid;padding:2px;
  background-color:white;
  }    
  .bar{
  width:586px;height:20px;background-color:#CC99CC; color:black;
  font-weight:bold;padding:6px; 
  }
  #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;
  }  
 </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">
PB&nbsp;</div>

<div id="showState" 
  style="margin-right:0px;float:left;width:70px;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">
    &#x25B6;</button>
    <button type="button" onclick="nextVid();">Next</button>
    <button type="button" onclick="bigSmall(600);" 
    style="background-color:#FFFF99">Sma</button>
    <button type="button" onclick="bigSmall(780);">Mid</button>
    <button type="button" onclick="bigSmall(960);">Big</button>
</div>
  
<div class="smallScr" id='player' 
  style="background-color:#CCCCCC;margin-top:31px"></div>

<div id="progressDiv" 
  style="background-color:#1B1B1B;width:600px;padding-top:0px;padding-bottom:3px">
  <progress id="progress-bar" max="580" value="0" 
    style="width:580px;background-color:#1B1B1B;margin-top:0px;margin-bottom:0px;padding:0px;border:1px solid gray">
  </progress>
</div>

<div id="vtitle" 
style="width:600px;height:34px;color:white;background-color:#1B1B1B;padding-top:1px;overflow:hidden">
</div>

<div style="margin:6px;">
<b>NOTE:</b>&nbsp;Open this page in <b>FireFox</b>
</div>
  <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">
<i>HELP</i>
</div>
<br>
<iframe id="help" src="POST2-progress-bar.html" 
style="width:600px;height:400px;background-color:#EEEEEE"></iframe>
<br>
<br>

<script>
  
vst = '';
 
vst += "ELVIS INSTRUMENTAL.Selección de Cecil González"+
"@yu4GCTSi8jc@";

vst += "Polinesia Francese"+ 
"@3TLqLuoP0aI@";

vst += "Italy/Napoli (Walking tour:Santa Lucia) Part 3"+     
"@G8RQZ_RmR_U@";

vst += "Chet Atkins ~ Santa Lucia"+
"@DA_gTGVOLXU@";

vst += "Elvis Presley - Torna a Surriento - With images of Sorrento - Naples - Italy"+
"@1vd3voNW-A4@";

vst += "Pablo Montero - Cuando Calienta El Sol"+
"@gh9YjuArZC0@";

vst += "Ivica Serfezi   Ximeroni"+
"@EzL5BG83YWk@";

vst += "Nana Mouskouri - Je chante avec toi liberté"+
"@1OWRrrVSF_I@";

vst += "Nana Mouskouri - Je Chante Avec Toi Liberté - Live Zénith Paris 1989"+
"@laNRCIkTg-Q@";

vst += "Cuando pienso en tì - Nana Mouskouri - Julio Iglesias"+
"@BZFVFKQHqzw@";

vst += "Nana Mouskouri - Serenade de Schubert  -"+
"@aQkcOYPYyiE@";

vst += "En Aranjuez con tu amor - Cantado por Nana Mouskouri"+
"@nrCRPodFZuo@";

vst += "Nana Mouskouri - O Tannenbaum"+
"@pLkr_WYvHec@";

vst += "NANA  MOUSKOURI - OVER  AND  OVER (with lyrics)( HD 2160p )"+
"@Bz61iL7qL58@";

vst += "Frank Chacksfield - Come Back To Sorrento"+
"@MasOYWdgfa8@";

vst += "Frank Chacksfield - April in Portugal"+
"@U1JhodspPcg@";

vst += "Paul mauriat 16 exitos"+
"@j9gbvwX6N-Q@";

vst += "HOT SAMBA IN RIO - 2013 - ГОРЯЧАЯ САМБА В РИО"+
"@PGsWB4-wmkU@";

vst += "Delilah • Tom Jones • Original • 1968"+
"@VBD-thfgX8o@";

 var vvsum = 0; 
 
 function readJS(){
    
    vst1 = vst.replace(/@$/,'');
    arr = vst1.split('@');
    mmm = '';
   
    for(i=0;i<arr.length;i++){
        if(i%2 == 0){
            if(arr[i+1].search(/^#/g) == -1){
                mmm = 'playVid(this)'
                sst1 = '<b>'+vvsum+
                '</b>:&nbsp;<a class="titCL" href="#" onclick="'+mmm+';return false">'+ 
                arr[i]+'</a>';
                sst2 = '<span class="vidCL">'+ arr[i+1]+'</span>';
            }else{
                mmm = 'playPid(this)'
                sst1 = '<b style="color:red">'+vvsum+
                '</b>:&nbsp;<a class="titCL" href="#" onclick="'+mmm+';return false">'+ 
                arr[i]+'</a>';
                sst2 = '<span class="vidCL">'+ arr[i+1]+'</span>';
            }
            sst3 = '<tr style="background-color:white">'+
            '<td width="80"><img width="80" height="60" '+
            'src="http://img.youtube.com/vi/'+ arr[i+1]+'/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('tbody2').innerHTML += sst3
            vvsum++;  
        }
    }    
}

  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 = 'VH8UzK_v6yI';
  
  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){
          nextVid();
      }
      
  function onPlayerStateChange(event){
      if (event.data == 0){
           playerState = 'ended';
           nextVid();
      }
    
      switch (event.data) {
          case YT.PlayerState.UNSTARTED:
            playerState = 'unstarted';
            break;
            
          case YT.PlayerState.PLAYING:
            playerState = 'playing';
            document.getElementById('durationDiv').innerHTML = 
            sformat(player.getDuration());
            break;
            
          case YT.PlayerState.PAUSED:
            playerState = 'paused';
            break;
            
          case YT.PlayerState.BUFFERING:
            playerState = 'buffering';
            break;
            
          case YT.PlayerState.CUED:
            playerState = 'video cued';
            break;
      }
      document.getElementById('showState').innerHTML = playerState;
  }
  
  par = {};
  
   function playVid(obj){
      par = obj.parentNode;
      showTit();
      if(player.getPlayerState() == 1){
          
      }
      ob = par.getElementsByClassName('vidCL');
      vidSt = ob[0].innerHTML;
      var ss = vidSt.search('#');
      if(ss == -1){
          player.loadVideoById(vidSt, "large");
      }else{
          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=',''));
          seEnd = a2;
          document.getElementById('myState').innerHTML = sformat(seEnd);
          seMode = true;
          playVidStart(ar[0], a1, a2)
      }
 }
 
 function playYoutube() {
      player.playVideo();
 }
        
 function pauseYoutube() {
      player.pauseVideo();
 }
        
 function stopYoutube() {
      player.seekTo(0, true);
      player.stopVideo();
 }
 
  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])
      }
 }
        
 function showTit(){
      var ob1 = par.getElementsByClassName('titCL');
      var tit = ob1[0].innerHTML;
      document.getElementById('vtitle').innerHTML = tit;
 }
 
 gInterval = 100; // OR = 10, 25, 50, 100, 200, 250 (miliseconds)    
   function init(){
      readJS();
      setInterval(myTime, gInterval); 
 }
      
  function myTime(){     
      curTime =  player.getCurrentTime();
      document.getElementById('curTimeDiv').innerHTML = sformat(curTime);
      if(curTime >0){
            updateProgressBar();
      }
  }
  
 gprogressWidth = 580;
  
 function updateProgressBar(){
      $('#progress-bar').val(
          (player.getCurrentTime()/player.getDuration()*gprogressWidth) ); 
 }
 
  $('#progress-bar').on('click', function (e){  
        gxx = Math.floor(e.pageX);
        gdur = Math.floor(player.getDuration());
        clickedValue = (gxx-this.offsetLeft)*player.getDuration()/this.offsetWidth;
        player.seekTo(clickedValue);
        document.getElementById('progress-bar').value = gxx-this.offsetLeft; 
 });
 
 function bigSmall(ww){
      hh = Math.round(ww*516/812);
      player.setSize(ww,hh);
      var size =  ww +'px';
      document.getElementById('vtitle').style.width = size;
      document.getElementById('header1').style.width = size;
      
      document.getElementById('progressDiv').style.width = size;
      document.getElementById('progress-bar').style.width = parseInt(size) -24;
      document.getElementById('progress-bar').max = parseInt(size) - 24; // xmax
      gprogressWidth = parseInt(size) - 24;  
      
 // minus 24 is used to make the lengths of our progress bar the one of YouToube equal 
 }
  
 function removeUndo(ob){
      var butVal = ob.innerHTML;
      if(butVal == '1'){
          ob.innerHTML = '0';
          ob.parentNode.style.backgroundColor = "#CCCCCC"
      }else{
          ob.innerHTML = '1'; 
          ob.parentNode.style.backgroundColor = "white"
      }
 }
 
 function scrollToElement(elem, add){ 
      var top = $("#"+ elem).position().top;
      $(window).scrollTop( top - add);
 }
 
 function sformat( s ) {
          var fm = [
                    Math.floor(Math.floor(s/60)/60)%60,                //HOURS
                    Math.floor(s/60)%60,                               //MINUTES
                    Math.floor(s%60)                                   //SECONDS
                      ];
          var xx = $.map(fm,function(v,i){ 
                return ( (v < 10) ? '0' : '' ) + v; }).join( ':' );
                var yy = xx.replace(/^0:|^00:|^0/g,'');
                zz = yy.replace(/^0/g,'');
                return zz
 }   b
  
  </script>
  </div>
</body></html>  <!--424 lines -->

Save this web page (as type: HTML only):

 

https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
Click example
http://jsfiddle.net/UselessCode/qm5AG/
Ok ok
https://discussions.apple.com/thread/8426145

The page is trying to access
resources outside the
application. It was blocked
because the setting "Block
external links in HTML
viewer" is enabled.

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

DOWNLOAD pixab-15.html

Image
Pixabay API sample demo Search for pixabay photos to make slideshow (1) Type in to search, for example: Nature; China; Japan; Kyoto; France; Paris; Scotland; Germany; Italy; Thailand; Tahiti; India; Mexico; Peru; flowers; castles; Europe; Asia ... (2) Tap this button (3) Scroll up to view 70 photos. Tap on a photo you like to select it. Tap it again to deselect. (4) Tap the "Search" button again to get another 70 photos. Select more photos. Then again tap "Search" then select the photo. Usually you only get up to 3*70 = 210 or 4*70 = 280 photos. Sometimes when you tap “Search” you don't get any photos or only a few provided. (Always make sure your phone (or ipad) is connected to the internet!) METHODS OF SELECTING A. All yes - no no  Select All B. All no - yes yes  Deselect All (5) Tap this button Load photos 1 Copy the below code Wa
Read more