web 视频基础

利用我们可以实现如下功能：

• 控制视频的播放
• 创建自己的定制的视频界面
• 使用全新的方式集成视频与HTML的其余部分。

在HTML加入视频功能需要添加如下代码：

1. controls 属性表示，播放器会提供控件，允许用户控制视频和音频的播放。
2. autoplay 属性表示一旦加载视频就开始播放。
3. src 代表视频源位置
4. poster 表示如果不设置autoplay的话，在开始播放之前，视频显示的图片
5. loop 属性会使视频播放结束后自动的重新开始。
6. preload 通常用来细粒度的控制如何加载视频来实现优化。如果把preload设置为none,则在用户播放之前不下载任何视频。

---

视频格式

• mp4 容器，包含H.264视频和AAC音频， MP4/H264得到了Safari和IE9+的支持，一些版本的Chrome也提供了支持。
• WebM 容器，包含VP8视频和Vorbis音频。 WebM由google设计用来处理VP8编码视频。WebM/VP8得到Firefox,Chrome和Opera的支持。webm格式的视频扩展名为.webm
• Ogg 容器，包含Theora视频和Vorbis音频。 Theora是一个开源解码器。采用Theora编码的视频通常包含在Ogg文件中，文件扩展名为.ogv 。 Ogg/Theora得到了Firefox， Chrome和Opera的支持。

---

如何处理这些视频格式

1。我们可以在

浏览器从上向下查找，知道找到他能播放的一种格式。

2. 更具体的指定视频格式
   上面告诉浏览器视频源的位置，使他能在不同版本中作出选择。不过，浏览器真正确定一个文件是否可以播放，还需要做一个检测工作。我们可以为浏览器提供更多帮组，给出有关视频文件的MIME类型和编码器。

• canPlayType方法用来取一个视频格式为参数，返回一个字符串，表示浏览器对于播放这种类型的视频有多大的信心。共有三个等级:很可能(probably) 可能(maybe)和空。

---

给视频加上特效

主要方法是利用两层画布来创建特效，上面的画布显示完成的特效，下面的画布来实现一个scratch缓冲区，来操作每帧视频的rgb颜色值。

//window.onload方法中添加事件
video.addEventListener("play", processFrame, false);  //获取每帧视频

function processFrame(e) {
    var video = document.getElementById("video");

    if (video.paused || video.ended) {
        return;
    }

    var bufferCanvas = document.getElementById("buffer");
    var displayCanvas = document.getElementById("display");
    var buffer = bufferCanvas.getContext("2d");
    var display = displayCanvas.getContext("2d");
        
        //缓冲区获取画布的大小，并且把当前帧的视频转化为图片
    buffer.drawImage(video, 0, 0, bufferCanvas.width, bufferCanvas.height);  
    var frame = buffer.getImageData(0, 0, bufferCanvas.width, bufferCanvas.height);
    var length = frame.data.length / 4;

    for (var i = 0; i < length; i++) {
        var r = frame.data[i * 4 + 0];
        var g = frame.data[i * 4 + 1];
        var b = frame.data[i * 4 + 2];
        if (effectFunction) {
            effectFunction(i, r, g, b, frame.data);  //是执行像素转换的方法
        }
    }
    display.putImageData(frame, 0, 0);

    setTimeout(processFrame, 0);   //设置为0是为了获取每一帧视频
    // try this line instead of the setTimeout above if you are on Chrome
    //requestAnimationFrame(processFrame);

}

//effectFunction方法的匿名函数
function noir(pos, r, g, b, data) {
    var brightness = (3*r + 4*g + b) >>> 3;
    if (brightness < 0) brightness = 0;
    data[pos * 4 + 0] = brightness;
    data[pos * 4 + 1] = brightness;
    data[pos * 4 + 2] = brightness;
}

function western(pos, r, g, b, data) {
    var brightness = (3*r + 4*g + b) >>> 3;
    data[pos * 4 + 0] = brightness+40;
    data[pos * 4 + 1] = brightness+20;
    data[pos * 4 + 2] = brightness-20;
    data[pos * 4 + 3] = 255; //220;
}

知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，[email protected]；
【Master】zelo，[email protected]；
【运营】运维艄公，[email protected]；****
【产品设计】流浪猫，[email protected]；
【体验设计】兜兜，[email protected]；
【iOS】淘码小工，[email protected]；iMcG33K，[email protected]；
【Android】人猿居士，[email protected]；思路的顿悟，[email protected]；
【java】首席工程师MR_W，[email protected]；
【测试】土镜问道，[email protected]；
【数据】fox009521，[email protected]；