彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > HTML 5 Video, Canvas, ECMAScript 6

HTML 5 Video, Canvas, ECMAScript 6

发布时间:2019-10-11 20:57编辑:学会党委浏览(176)

    HTML5:使用Canvas实时处理Video

    2015/09/11 · HTML5 · Canvas

    本文由 伯乐在线 - cucr 翻译,唐尤华 校稿。未经许可,禁止转载!
    英文出处:mozilla。欢迎加入翻译组。

    结合HTML5下的videocanvas的功能,你可以实时处理视频数据,为正在播放的视频添加各种各样的视觉效果。本教程演示如何使用JavaScript代码实现chroma-keying特效(也被称为“绿色屏幕效应”)。

    请看这个实例.

    HTML 5 Video, Canvas, ECMAScript 6

    文档内容

    本文使用的XHTML文档如下所示。

    XHTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <style> body { background: black; color:#CCCCCC; } #c2 { background-image: url(foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3B3B3B; } </style> <script type="text/javascript;version=1.8" src="main.js"></script> </head> <body onload="processor.doLoad()"> <div> <video id="video" src="video.ogv" controls="true"/> </div> <div> <canvas id="c1" width="160" height="96"/> <canvas id="c2" width="160" height="96"/> </div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <style>
          body {
            background: black;
            color:#CCCCCC;
          }
          #c2 {
            background-image: url(foo.png);
            background-repeat: no-repeat;
          }
          div {
            float: left;
            border :1px solid #444444;
            padding:10px;
            margin: 10px;
            background:#3B3B3B;
          }
        </style>
        <script type="text/javascript;version=1.8" src="main.js"></script>
      </head>
     
      <body onload="processor.doLoad()">
        <div>
          <video id="video" src="video.ogv" controls="true"/>
        </div>
        <div>
          <canvas id="c1" width="160" height="96"/>
          <canvas id="c2" width="160" height="96"/>
        </div>
      </body>
    </html>

    以上代码关键部分如下:

    1.创建了两个canvas元素,ID分别为c1和c2。c1用于显示当前帧的原始视频,c2是用来显示执行chroma-keying特效后的视频;c2预加载了一张静态图片,将用来取代视频中的背景色部分。
    2.JavaScript代码从main.js文件导入;这段脚本使用JavaScript 1.8的特性,所以在导入脚本时,第22行中指定了版本。
    3.当网页加载时,main.js中的processor.doLoad()方法会运行。

    <html>
    <head>
    <title>HTML5 Video+Canvas with ECMAScript 6</title>
    <script>
    class Position{
        static caculate(obj){
            let x = 0, y = 0;
            if(obj.offsetLeft && obj.offsetTop){
                x = obj.offsetLeft, y = obj.offsetTop;
            }
            let p;
            if(obj.parentNode){
                p = Position.caculate(obj.parentNode);
                x = x + p.x, y = y + p.y;
            }
            return {'x': x, 'y': y};
        }
    }
    class Player{
        constructor(w = 640, h = 360){
            this.w = w, this.h = h;
            this.video  = document.createElement('video');
            this.canvas = document.createElement('canvas');
            //document.body.appendChild(this.player);
            document.body.appendChild(this.canvas);
            this.video.id       = 'objPlayer'
            this.video.width    = this.w;
            this.video.height   = this.h;
            this.canvas.id      = 'objCanvas'
            this.canvas.style.position  = 'absolute';
            this.canvas.width   = this.w;
            this.canvas.height  = this.h;
            let p = Position.caculate(this.video);
            this.canvas.style.left  = p.x;
            this.canvas.style.top   = p.y;
            this.canvas.style.zIndex    = 1000;
        }
        load(url){
            this.video.src = url;
        }
        play(){
            this.video.play();
        }
        capture(){
            this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.w, this.h);
        }
        record(speed){
            this.timer = window.setInterval(() => {
                this.capture();
            }, 1000/speed);
        }
    }
    
    var player;
    document.onreadystatechange = function(e){
        if(document.readyState == 'complete'){
            //console.log('ready');
            player = new Player(640, 360);
            player.load('/Users/Hao/Downloads/ReshmaSaujani_2016-480p.mp4');
            player.play();
            player.record(15);
        }
    }
    </script>
    </head>
    <body>
    </body>
    </html>
    

    JavaScript代码

    main.js中的JS代码包含三个方法。

    初始化chroma-key

    doLoad()方法在XHTML文档初始加载时调用。这个方法的作用是为chroma-key处理代码准备所需的变量,设置一个事件侦听器,当用户开始播放视频时我们能检测到。

    JavaScript

    doLoad: function() { this.video = document.getElementById("video"); this.c1 = document.getElementById("c1"); this.ctx1 = this.c1.getContext("2d"); this.c2 = document.getElementById("c2"); this.ctx2 = this.c2.getContext("2d"); let self = this; this.video.addEventListener("play", function() { self.width = self.video.videoWidth / 2; self.height = self.video.videoHeight / 2; self.timerCallback(); }, false); },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    doLoad: function() {
        this.video = document.getElementById("video");
        this.c1 = document.getElementById("c1");
        this.ctx1 = this.c1.getContext("2d");
        this.c2 = document.getElementById("c2");
        this.ctx2 = this.c2.getContext("2d");
        let self = this;
        this.video.addEventListener("play", function() {
            self.width = self.video.videoWidth / 2;
            self.height = self.video.videoHeight / 2;
            self.timerCallback();
          }, false);
      },

    这段代码获取XHTML文档中video元素和两个canvas元素的引用,还获取了两个canvas的图形上下文的引用。这些将在我们实现chroma-keying特效时使用。

    addEventListener()监听video元素,当用户按下视频上的播放按钮时被调用。为了应对用户回放,这段代码获取视频的宽度和高度,并且减半(我们将在执行chroma-keying效果时将视频的大小减半),然后调用timerCallback()方法来启动视频捕捉和视觉效果计算。

    本文由彩世界平台发布于学会党委,转载请注明出处:HTML 5 Video, Canvas, ECMAScript 6

    关键词:

上一篇:没有了

下一篇:没有了