Javascript Tutorial to Blur Live MP4 HTML5 Video Completely in Browser Full Project For Beginners

 

 

Welcome folks today in this blog post we will be blurring live html5 video in browser using javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<video controls autoplay webkit-playsinline playsinline loop muted>
       <source src="http://video.itunes.apple.com/apple-assets-us-std-000001/Video118/v4/67/76/0d/67760df3-65e6-a3d3-02a7-81340664bcf2/mzvf_5168019211393929040.720w.h264lc.U.p.m4v">
 </video>


<canvas></canvas>

 

 

 

style.css

 

 

 

body {
    background: black;
}
 
canvas {

  width:320px;
  height:320px;
  
  filter: blur(10px);
}

video {
  width:320px;
  height:320px;
}

 

 

 

script.js

 

 

 

var video = document.querySelector("video");

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var w = canvas.clientWidth;
var h = canvas.clientHeight;

canvas.width = w;
canvas.height = h;

video.addEventListener("play", function() {
    drawBlur();
});

function drawBlur() {
  if (video.paused || video.ended) return false;
  ctx.drawImage(video, 0, 0, w, h);
  requestAnimationFrame(function() {
    drawBlur();
  });
}

document.addEventListener("touchstart", function() {
 // video.requestFullscreen();
  video.webkitEnterFullScreen();
});

setTimeout(function() {
  video.webkitRequestFullscreen();
},3000);
/*
window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});
*/

Leave a Reply