HTML-canvasVideo

最新推荐文章于 2023-07-26 20:26:58 发布

littleSYao

最新推荐文章于 2023-07-26 20:26:58 发布

阅读量254

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_45538481/article/details/99697766

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML-canvasVideo

特定视频帧画框

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body{background:black;color:#CCCCCC;}
    div{float:left;border:1px solid #444444;padding:10px;margin:10px;background:#3B3B3B;}
  </style>
</head>
<body onload="processor.doLoad()">
  <div style="display:none;">
    <video id="video" src="movie.mp4" controls="true" />
  </div>
  <div>
    <canvas id="c1" width="1680" height="640" />
 <script type="text/javascript">
  var fircanvas=document.getElementById("c1");
  var fircantxt=fircanvas.getContext("2d");
  var str="click to play the video!";
  
  fircantxt.beginPath();
  fircantxt.fillStyle="white";
  fircantxt.font="100px serif";
  fircantxt.fillText(str,200,200);
  fircantxt.closePath(); 
 </script>
  </div>
</body>
</html>
  <script type="text/javascript">
var btn = document.getElementById('c1');
var video = document.getElementById('video');
btn.addEventListener('click',function(){
  if(video.paused){
      video.play();
    }
  else{
      video.pause();
    }
 });
 
 var processor = {
      timerCallback: function() {
        if (this.video.paused || this.video.ended) {
          return;
        }
        this.computeFrame(2,200,200,300,350);
        var self = this;
        setTimeout(function () {
            self.timerCallback();
          }, 0);
      },
      doLoad: function() {
        this.video = document.getElementById("video");
        this.c1 = document.getElementById("c1");
        this.ctx1 = this.c1.getContext("2d");
        var self = this;
        this.video.addEventListener("play", function() {
            self.width = self.video.videoWidth;
            self.height = self.video.videoHeight;
   //console.log( self.width,self.height);
   self.c1.width = self.width;
   self.c1.height = self.height;
            self.timerCallback();
          }, false);
      },
      computeFrame: function(offset,upl,upr,downl,downr) {
  //console.log(Math.round(this.video.currentTime));
  this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
        if (Math.floor(this.video.currentTime) == offset) {
  this.ctx1.lineWidth=5;
  this.ctx1.strokeStyle = "rgba(255,0,0,1)";
        //this.ctx1.strokeRect(2*Math.round(Math.random()*10),Math.round(Math.random()*20),10*Math.round(Math.random()*10),20*Math.round(Math.random()*10));
  this.ctx1.strokeRect(upl,upr,downl,downr);
  }
        return;
      }
    };
   </script>

littleSYao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML-canvasVideo

HTML-canvasVideo特定视频帧画框<!DOCTYPE html><html lang="en"><head> <style> body{background:black;color:#CCCCCC;} div{float:left;border:1px solid #444444;padding:10px;ma...
复制链接

扫一扫