Animando el fondo de reproducción de Youtube con HTML5

Animando el fondo de reproducción de Youtube con HTML5

  22:08    vhanla

---

Hace bastante tiempo hice una extensión para Google Chrome con la finalidad de poder ocultar el fondo mientras reproducía el vídeo de Youtube, sin embargo alguien más se apoderó de mi código fuente para su extensión pésima en ese entonces pero que invirtió en publicidad; y francamente me quitó las ganas de continuar con el proyecto Focus on video y lo dejé abandonado (supongo que ya ni funciona).

Ahora me encontré con una excelente extensión para reproducir vídeos de Youtube utilizando HTML5, y se me ocurrió agregarle un efecto como fondo de tal forma que en lugar de oscurecer u ocultar el fondo como lo hacía en Focus on video, y ahora se mostraría con una imagen del mismo vídeo en forma desenfocada, dándole un efecto que en lo personal me agrada.

Como pueden ver, el fondo adopta la misma imagen de la del vídeo pero desenfocada para no distraer y darle un efecto de reflejo utilizando el color original.

La extensión pertenece a Chris Robins y es muy popular en la tienda de Chrome y el código fuente está disponible en Github

 https://github.com/chrisrobins/YouTubeHTML5

Ahora sólo hice algunos ajustes para poder agregar ese efecto.

• Una función que dibuja el efecto
• Una función que gestione el efecto (habilitar/deshabilitar en modo pantalla completa)

Sin embargo, el efecto tiene su deficiencia, utiliza mucho el procesador de tal forma que al estar utilizándolo verán un aumento considerable en el Administrador de Tareas.

El uso de CPU se levanta bastante, pero dependiendo de su PC.

Para poder apreciarlo deben modificar algunas opciones de la extensión.

Por ejemplo, esta es la configuración que utilizo en Opera 15

Efecto de dibujo en canvas

 1 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 2 // Canvas effect
 3 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 4 var lienzo = document.createElement('canvas');
 5 lienzo.id = 'c';
 6 lienzo.setAttribute('style','position:fixed; top:0;left:0;width:100%; height:100%;');
 7 document.body.insertBefore(lienzo,document.body.firstChild);
 8 
 9 function draw(v,c,w,h) {
10     if(v.paused || v.ended || tabhidden || fullscreen){
11         document.getElementById('watch7-content').style.opacity = 1;
12         document.getElementById('guide').style.opacity = 1;
13         document.getElementById('watch7-sidebar').style.opacity = 1;
14         return false;
15     }
16     document.getElementById('watch7-content').style.opacity = 0.5;
17     document.getElementById('guide').style.opacity = 0.5;
18     document.getElementById('watch7-sidebar').style.opacity = 0.5;
19     //sometimes player shows a blank space, so lets change its background color
20     if(document.getElementById('player'))
21     document.getElementById('player').setAttribute('style','background-color:none');
22     
23     c.drawImage(v,0,0,w,h);
24     setTimeout(draw,50,v,c,w,h); // 100 = 10fps , 50 = 20fps, 33 = 30fps, original 20 milliseconds
25 }

Gestión del efecto : permite desactivar el efecto cuando la pestaña se esconda y se entre en modo pantalla completa, para evitar uso inútil de la CPU.

 1 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 2 // Visibility Events
 3 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 4 var hidden, visibilityChange;
 5 hidden = "webkitHidden";
 6 visibilityChange = "webkitvisibilitychange";
 7 
 8 var videoElement = document.getElementById("crx-html5-video");
 9 // If the page is hidden, pause the video;
10 // If the page is shown, play the video
11 function handleVisibilityChange(){
12     if(document[hidden]){
13         if(autopause)
14             videoElement.pause();
15         tabhidden = true;
16     }else{
17         if(autopause)
18             videoElement.play();
19         if(!document.getElementById("crx-html5-video").ended){
20             videoElement.pause();
21             tabhidden = false;
22             videoElement.play();
23         }
24     }
25 }
26 
27 document.addEventListener(visibilityChange, handleVisibilityChange, false);

En la función que activa o desactiva el reproductor HTML5 agregamos el efecto

 1 ...
 2 //add effect ;)
 3     var v = document.getElementById('crx-html5-video');
 4     var canvas = document.getElementById('c');
 5     var context = canvas.getContext('2d');
 6     var cw = Math.floor(canvas.clientWidth / 100);
 7     var ch = Math.floor(canvas.clientHeight / 100);
 8     canvas.width = cw;
 9     canvas.height = ch;
10 
11     v.addEventListener('play', function(){
12         draw(this,context,cw,ch);
13     },false);
14     //for fullscreen
15     v.addEventListener('webkitfullscreenchange',function(){
16         if(this.webkitDisplayingFullscreen){            
17             fullscreen = true;
18         }
19         else{            
20             //re enable drawing
21             if(!document.getElementById("crx-html5-video").ended){
22                 videoElement.pause();
23                 fullscreen = false;
24                 videoElement.play();
25             }
26         }        
27     },false);
28         
29     videoElement = document.getElementById("crx-html5-video");
30 ...

El código es fácil de entender según creo, así que ahí lo ven.

La extensión la pueden descargar desde el siguiente enlace, funciona tanto en Chrome como en Opera 15.

Extensión

Guardar con cualquier nombre cambiándole la extensión a .zip luego de ello descomprima en cualquier carpeta, copie esa ubicación y agréguela en el gestor de extensiones de Chrome u Opera con el botón Cargar extensión descomprimida utilizando la ubicación de la carpeta de la extensión descomprimida.

No olvide modificar sus opciones como lo mencioné anteriormente.

NOTA: Desactivar la extensión original, si la tienen instalada.