视频

在HTML5 Web中我们可以很方便的使用原生API来操作视频文件。

首先来看一下视频的例子

<video width="640" height="480" poster="video.jpg" controls autoplay preload loop tabindex="0">
 <source src="video.webm" type="video/webm">
 <source src="video.ogv" type="video/ogg">
 <source src="video.mp4" type="video/mp4">
 <track src="video.vtt" kind="subtitles" srclang="en" 
        label="English" default>
</video>

<video>标签的属性：

• width：视频的宽度
• height： 视频的高度
• poster：视频的替代图片，指定在视频加载完之前显示的图片
• controls：是否适用原生的视频控制UI
• preload：是否预加载视频
• autoplay：是否自动播放视频
• loop：是否循环播放
• tabindex：是否适用键盘控制播放

<video>标签的嵌套标签：

• <source>：视频文件地址描述标签，指明地址与格式
• <track>：视频信息描述标签

<video>标签和其它HTML元素一样，可以通过为其附加事件，如拖动、鼠标、焦点事件等，来处理相关操作。同时也能使用常规的css规则来定制视频的样式

比如下面的代码为video附加一个canplay的事件

video.addEventListener("canplay", function(e) {
  this.volume = 0.6;
  this.currentTime = 1;
  this.play();
}, false);

视频的属性，方法以及事件： 属性： * currentTime：当前播放的时间 * volume：当前的音量 * muted：返回视频是否应该被静音 * playbackRate： 播放速度 * currentSrc：当前播放视频的地址 * videoWidth & videoHeight：视频的宽和高

方法：

• load：重新加载视频
• play：播放
• pause： 暂停
• canPlayType：判断所给类型的视频格式是否支持
• addTextTrack：向视频添加新的文本轨道。

其他属性参照http://techbrood.com/jsref?p=dom-obj-video 事件：

• canPlaythrough：当浏览器认为可以完全播放当前视频时触发
• ended：视频结束时触发
• error：视频播放出错时触发
• playing：视频播放时触发（刚开始播放或者暂停后再播放）
• progress：加载视频时触发
• waiting：一个操作在等另一个操作时触发
• loadedmetadata：当浏览器加载完元数据时触发

其他具体事件可参看https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events

使用canvas可以很方便的在视频里导出导入图片。比如截屏功能可以这样实现：

function grabScreenshot() {
  var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  var img = new Image();
  img.src = canvas.toDataURL("image/png");
  img.width = video.width;
  container.appendChild(img);    
}  

使用SVG为视频添加蒙层，比如：

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <defs>
    <filter id="myblur"> 
      <feGaussianBlur stdDeviation="1" /> 
    </filter>
  </defs>
</svg>
<style>
  video { filter:url(#myblur); border: 2px solid red; }
</style>