☰

YouTube Video Only

Hide video and only play audio on YouTube

  1. // ==UserScript==
  2. // @name            YouTube Video Only
  3. // @name:en         YouTube Video Only
  4. // @namespace       https://greasyfork.org/users/44041
  5. // @include         http://*youtube.*/*watch*
  6. // @include         https://*youtube.*/*watch*
  7. // @version         1
  8. // @grant           none
  9. // @description     Hide video and only play audio on YouTube
  10. // @require         http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
  11. // @locale 
  12. // ==/UserScript==
  13.  
  14. $('video').ready(function() {
  15.   //$('video').css('display','none');
  16. console.log('video ready');
  17.  
  18.   var video = document.getElementsByTagName("video")[0];
  19.   if(video) {
  20.     video.addEventListener("playing", function() {
  21.       //$('video').css('z-index','-9999');
  22.       //$('video').css('width','0');
  23.       wallPattern.init();
  24.       $('#canvas').ready();
  25.       //$('.html5-video-container').css('display','none');
  26.       console.error("playing");
  27.     })
  28.   } else {
  29.     console.error("Video element not found");
  30.   }
  31.   
  32. });
  33.  
  34. jQuery(function($){
  35.     //$('video').css('width','0');
  36.     var _highest = 0;   
  37.  
  38.     $("div").each(function() {
  39.         var _current = parseInt($(this).css("zIndex"), 10);
  40.         if(_current > _highest) {
  41.             _highest = _current + 1;
  42.         }
  43.     });
  44.     //$('.html5-video-container').append('<div style="position:absolute;z-index:'+_highest+';background:#ecebeb;border:1px solid #333;border-radius:5px;height:360px;width:640px;background-image: url("http://i.imgur.com/iZHYO4N.jpg");"> </div>');
  45.     $('.html5-video-container').append('<canvas id="canvas" onload="wallPattern.init();" style="position:absolute;z-index:'+_highest+';border-radius:5px;height:360px;width:640px;"> </div>');
  46.  
  47.    $('#canvas').ready(function() {
  48.      console.log('loaded');
  49.      wallPattern.init();
  50.      });
  51.   
  52. });
  53.  
  54. var wallPattern = {
  55.   
  56.   // Settings
  57.   spacingX: 55,
  58.   spacingY: 35,
  59.   offsetVariance: 13,
  60.   baseRadius: 55,
  61.   
  62.   // Other Globals
  63.   points: [],
  64.   canvas: null,
  65.   context: null,
  66.   
  67.   init: function() {
  68.     console.log('init');
  69.     this.canvas = document.getElementById( 'canvas' );
  70.     this.context = canvas.getContext( '2d' );
  71.     this.canvas.width = 640;
  72.     this.canvas.height = 360;
  73.     this.preparePoints();
  74. 		this.createPattern();
  75. 		this.drawTitle();
  76.     
  77.   },
  78.   
  79.   drawTitle: function() {
  80.     
  81.     var rawtitletext = $('#eow-title').text().trim();
  82.     var titletext = $('#eow-title').text().trim();
  83.     //var titletext = rawtitletext.replace(/(.{1,32})(?:\n|$| )/g, "$1\n");
  84.     //var titletext = "The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog";
  85.  
  86.     
  87.     this.context.fillStyle = "white";
  88.     this.context.font = "bold 30px Helvetica";
  89.     //this.context.fillText(titletext, (canvas.width / 2) - 17, (canvas.height / 2) + 8);
  90.     this.context.textAlign = 'center';
  91.     this.context.fillText(titletext, (canvas.width / 2), (canvas.height / 2));
  92.     
  93.   },
  94.   
  95.   preparePoints: function() {
  96.     
  97.     var width, height, i, j, k, offsetX, offsetY;
  98.     var maxVariance = this.offsetVariance * 2;
  99.     
  100.     // Vertical spacing
  101.     for ( i = this.spacingY; i < this.canvas.height; i += this.spacingY ) {
  102.       
  103.       var pointSet = [];
  104.       
  105.       // Horizontal spacing
  106.       for(j = this.spacingX; j < this.canvas.width; j += this.spacingX ) {
  107.         
  108.         offsetX = Math.round((Math.random() * maxVariance) - this.offsetVariance);
  109.         offsetY = Math.round((Math.random() * maxVariance) - this.offsetVariance);
  110.         var offsetR = Math.round((Math.random() * maxVariance) - this.offsetVariance);
  111.         
  112. 				pointSet.push( {x: j + offsetX, y: i + offsetY, radius: this.baseRadius + offsetR} )
  113.       }
  114.       
  115.       this.points.push( this.shuffleArray( pointSet ) );
  116.     } 
  117.   },
  118.  
  119.   createPattern: function() {
  120.     this.context.beginPath();
  121.     this.context.rect(0, 0, 640, 360);
  122.     this.context.fillStyle = "black";
  123.     this.context.fill();
  124.     
  125. 		var i, j, k, currentPoints, currentPoint;
  126.     
  127.     for ( i = 0; i < this.points.length; i++ ) {
  128.       
  129.       currentPoints = this.points[i]; 
  130.       
  131.       for ( j = 0; j < currentPoints.length;  j++ ) {
  132.         	
  133.        	currentPoint = currentPoints[j];
  134.         for ( k = currentPoint.radius; k > 0; k-=10 ) {
  135.         	
  136.         	
  137.      		  this.context.beginPath();
  138.           this.context.arc(currentPoint.x, currentPoint.y, k ,0 , Math.PI*2, true);
  139.           this.context.closePath();
  140.           this.context.fillStyle='#000';
  141.           this.context.strokeStyle='purple';
  142.           this.context.fill();
  143.           this.context.stroke();   
  144.         }
  145.       }
  146.     }
  147.   },
  148.  
  149.   // Shuffle algorithm from: http://stackoverflow.com/questions/962802/is-it-correct-to-use-javascript-array-sort-method-for-shuffling
  150.   shuffleArray: function( array ) {
  151.     
  152.     var tmp, current, top = array.length;
  153.  
  154.     if(top) while(--top) {
  155.         current = Math.floor(Math.random() * (top + 1));
  156.         tmp = array[current];
  157.         array[current] = array[top];
  158.         array[top] = tmp;
  159.     }
  160.  
  161.     return array;
  162.   }
  163. }
  164.  
  165. //wallPattern.init();