Question

我有一个使用带有画布覆盖的HTML5播放的视频剪辑（用于应用JSManipulate gamma filter），我打算隐藏原始视频剪辑 - 并仅显示画布。当然，问题是当我隐藏视频时我丢失了控件。我想使用video.js code覆盖画布上的一些控件，但我的代码不起作用。请看看我有什么。

<!DOCTYPE html>
<html>
<head>
 <title>Video Manipulation Example</title>
 <script type="text/javascript" src="jsmanipulate.js"></script>
   <link href="video-js.css" rel="stylesheet" type="text/css">
  <!-- video.js must be in the <head> for older IEs to work. -->
  <script src="video.js"></script>
</head>
<body>
 <video controls id="video" autoplay loop crossorigin="anonymous">
 <source src="FF_cropped.mp4" type="video/mp4" />
 </video>
 <canvas id="canvas" class="video-js vjs-default-skin" controls preload="none" width="640" height="480"
          data-setup="{}"></canvas>

 <script type="text/javascript">
 function setup(){
 var video = document.getElementById("video");
 var canvas = document.getElementById("canvas");

 var canvas2DContext = canvas.getContext("2d");

 video.addEventListener("play", function(){
 canvas.height = video.clientHeight;
 canvas.width = video.clientWidth;
 paintCanvas(video, canvas, canvas2DContext);
 }, false);
 }

 function paintCanvas(video, canvas, canvas2DContext){
 if(video.paused || video.ended) return false;

 canvas2DContext.drawImage(video,0,0);
 var data = canvas2DContext.getImageData(0,0,canvas.width, canvas.height);
 JSManipulate.exposure.filter(data, {});
 canvas2DContext.putImageData(data,0,0);

 setTimeout(function(){
 paintCanvas(video,canvas,canvas2DContext);
 }, 5);
 }

 setup();
 </script>
</body>
</html>

使用video.js作为HTML5画布视频控件叠加

0 个答案: