web 视频基础

利用<video></video>我们可以实现如下功能：

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

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

<video controls autoplay src="video/preroll.mp4" width="480" height="360" 
         poster="images/prerollposter.jpg" id="video">

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。我们可以在<video>元素中对应每种格式使用一个<source>元素，这样能提供一组视频，每个视频分别有自己的格式，可以让浏览器选择它支持的第一种格式。

<video id = "video" poster="video/prerollposter.jpg" controls width="480" height="360">
      <source src="video/preroll.mp4">
      <source src="video/preroll.webm">
      <source src="video/preroll.ogv">
      <p>Sorry, 你的浏览器不支持这些视频格式</p>
</video>

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

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

<video id = "video" poster="video/prerollposter.jpg" controls width="480" height="360">
      <source src="video/preroll.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2” '>
      <source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis" '>
      <source src="video/preroll.ogv" type='video/ogg; codecs="theota, vorbis" ’> 
      <p>Sorry, 你的浏览器不支持这些视频格式</p>
</video>

• type 是一种可选属性，他向浏览器提供了一个提示，帮组它确定能不能播放这种类型的文件。
• ‘video/mp4’ 这种type类型是一种MIME类型，制定了容器格式,注意其单引号。
• codecs参数指定使用哪个编解码器对视频和音频编码，来创建编码的视频文件。其中codecs="avc1.42E01E, mp4a.40.2”第一个参数表示视频编码器，第二个参数表示音频编码器。

注意：type 和codecs中的单双引号的位置。

---

Video在javaScript中的API

1. 调用的方法：

方法名	功能
play()	播放视频
pause()	暂停视频
load()	加载视频
canPlayType	通过编程帮组你确定可以播放哪些视频类型

2. 使用的属性

属性名	作用
videoWidth	播放器的宽度
videoHeight	播放器的高度
currentTime	播放的当前时间
duration	duration 属性返回当前音频/视频的长度，以秒计
ended	ended 属性返回音频/视频是否已结束。
error	错误原因
loop	是否可以循环 可以修改属性
muted	当设置该属性后，它规定视频的音频输出应该被静音。
readyState	就绪状态指示音频/视频是否已准备好播放。
seeking	寻址中（Seeking）指的是用户在音频/视频中移动/跳跃到新的位置。
volume	volume 属性设置或返回音频/视频的当前音量。

3. 捕获这些事件

下面这些是可以捕获的事件，如果增加事件处理程序，出现你监听的事件时就会调用相应的事件处理程序。

事件名称	作用
play	播放器开始播放的事件
pause	播放器开始暂停的事件
progress	当浏览器正在下载指定的音频/视频时，会发生 progress 事件。
error	当浏览器播放发生错误时
timeupdate	timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
ended	当浏览器播放当前视频结束触发
abort	该事件是在多媒体数据终止下载时触发，而不是发生错误时触发。
waiting	waiting 事件在视频由于需要缓冲下一帧而停止时触发。。
loadeddata	当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。
loadedmetadata	当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。
volumechange	当浏览器音量发生变化时触发。

---

实现一个视频的播放

//js
var position = 0;   //定义一个变量来记录我们播放的哪个视频
var playlist;     // 保存视频播放列表数组
var video;       //保存video元素的引用

window.onload = function() {
    playlist = ["video/preroll", 
                "video/areyoupopular", 
                "video/destinationearth"];
    video = document.getElementById('video');
    video.addEventListener("ended", nextVideo,false);  //监听事件

    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}

function nextVideo() {
    position++;
    if (position >= playlist.length) {
        position = 0;
    }
    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}

function getFormatExtension() {
    if (video.canPlayType("video/mp4") != "") {
        return ".mp4";
    } else if (video.canPlayType("video/ogg") != "") {
        return ".ogv";
    } else if (video.canPlayType("video/webm") != "") {
        return ".webm";
    }
}

• 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/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；****
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；