onlyforbopi
9/25/2018 - 6:19 AM

JS.AudioVideo.ApplyingCSS3Effects.Mouseclick

JS.AudioVideo.ApplyingCSS3Effects.Mouseclick

js-audiovideo-applyingcss3effects-mouseclick.markdown
content_copyfile_download
  • Rendered
  • Source

JS.AudioVideo.ApplyingCSS3Effects.Mouseclick

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html> 
<html lang="en">
  <head>
<title>Video/Canvas Demo 0</title> 
<meta charset="utf-8">    
    <style> 
video {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -180px 0 0 -240px;
}
  
#output {
  width: 307px;
  height: 250px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #ccc;
}
#screenshot-stream {
  width: initial;
  height: initial;
}
#screenshot {
  vertical-align: top;
}
.blur {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}
.brightness {
  -webkit-filter: brightness(5);
  -moz-filter: brightness(5);
  -o-filter: brightness(5);
  -ms-filter: brightness(5);
  filter: brightness(5);
}
.contrast {
  -webkit-filter: contrast(8);
  -moz-filter: contrast(8);
  -o-filter: contrast(8);
  -ms-filter: contrast(8);
  filter: contrast(8);
}
.hue-rotate {
  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  -o-filter: hue-rotate(90deg);
  -ms-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
.hue-rotate2 {
  -webkit-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  -o-filter: hue-rotate(180deg);
  -ms-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.hue-rotate3 {
  -webkit-filter: hue-rotate(270deg);
  -moz-filter: hue-rotate(270deg);
  -o-filter: hue-rotate(270deg);
  -ms-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}
.saturate {
  -webkit-filter: saturate(10);
  -moz-filter: saturate(10);
  -o-filter: saturate(10);
  -ms-filter: saturate(10);
  filter: saturate(10);
}
.grayscale {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
}
.sepia {
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  -o-filter: sepia(1);
  -ms-filter: sepia(1);
  filter: sepia(1);
}
.invert {
  -webkit-filter: invert(1);
  -moz-filter: invert(1)
  -o-filter: invert(1)
  -ms-filter: invert(1)
  filter: invert(1)
}
</style>
  </head>
  <body>
<h1>Click the video to apply CSS3 effects!</h1> 
<!-- <video> tag, with the @controls attribute
     giving it the play/pause/seeker controls. Try removing the controls attribute, 
     adding autoplay or loop -->
<video id="output" controls autoplay> 
	<!-- I have three versions of the video encoded with
	     different codecs.  The browser will automatically
	     choose the first one it knows it can play. --> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.webm type=video/webm> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.ogg type=video/ogg> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.mp4 type=video/mp4> 
</video> 
<!-- That's it!  You now have video playing in your browser! --> 
 <script>

  var output = document.getElementById('output');

  var idx = 0;
  var filters = [
    'grayscale',
    'sepia',
    'blur',
    'brightness',
    'contrast',
    'hue-rotate', 'hue-rotate2', 'hue-rotate3',
    'saturate',
    'invert'
  ];
  
  function changeFilter(e) {
    var el = e.target;
    var effect = filters[idx++ % filters.length];
    console.log("effect : " + effect + " idx = " + idx);
   
      el.className = effect;
   
    // Do not propagate the event
    event.stopPropagation();    
    event.preventDefault(); 
  }
  
  output.addEventListener('click', changeFilter, false);
</script>



  </body>
</html>