在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>标签的属性:
<video>标签的嵌套标签:
<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:视频的宽和高
方法:
其他属性参照http://techbrood.com/jsref?p=dom-obj-video 事件:
其他具体事件可参看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>