html5画布视屏,HTML5视频、音频和画布

视频处理

HTML5中的视频，使用video和source搭配，来解决浏览器视频格式兼容问题，如果都不支持，可以在video里面写提示语

video支持的视频格式

MP4 ：目前比较主流

OGG ：多用于移动端

WebM ：目前唯一支持超高清格式，在HTML页面中支持超高清格式HTML5

vedio元素的属性

src ：视频路径

autoplay ：自动播放

controls ：提供视频播放的控制面板，只有属性名，没有属性值

loop ：视频的循环播放

poster ：在视频播放之前，显示一张图片

width/height ：设置显示视频的宽度和高度

preload ：预加载

auto：(默认值)自动加载

none：不加载

metadata：只加载视频的基本信息(不含视频)

视频处理进阶

方法

play() ：播放视频

pause() ：暂停视频

load() ：重新加载音频/视频元素

canPlayType() ：判断当前浏览器是否支持指定视频格式

事件

onplay ：当视频开始播放时调用

onpause ：当视频开始

onended ：当视频结束时被触发

onerror ：当视频错误时被触发

oncanplay ：当整个媒体可以顺利播放时，就会触发这个事件

oncanplaythrough ：不考虑整体状态，只要下载了一定的可放帧会会触发这个事件

onprogress ：用于更新媒体的下载进度，会周期性的触发

属性

paused ：表示判断当前是否暂停，true表示暂停

ended ：表示判断当前视频是否播放完毕，true表示播放完毕

duration ：表示当前视频的时长,单位为s

currentTime ：表示当前视频播放的位置

音频处理

音频处理和视频处理基本上都相同，音频处理使用audio和source搭配

audio支持的音频格式有MP3/OGG/WAV

画布处理

如何使用画布？

1. 在html里创建canvas标签

如果使用内联样式或者样式表改变canvas的宽和高，都会拉伸或者压缩里面的图形

使用canvas的宽高属性一切正常

2. 获取元素

var canvas = document.getElementsByTagName('canvas')[0];

3. 获取到画布对象,可以理解为画笔，参数是字符串，而且字母必须是小写

var context = canvas.getContext("2d");

4. 使用canvas的API作图，x,y,width,height, x y设置位置，width height设置宽高，位置相对于canvas

context.fileRect(10,10,100,100);

常见的canvas的API

1. 绘制实心矩形

fillRect(x,y,width,heigth);

2. 绘制空心矩形

strokeRect(x,y,width,heigth);

3. 清除指定区域的像素，类似于橡皮擦

clearRect(x,y,width,height);

设置颜色和透明度：如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色。在绘制之前设置颜色和透明度，绘制之后再设置是无效的。

图形的透明度：context.globalAlpha = 0.3;

图形内部区域的颜色：context.fillStyle = "blue";

图形线条的颜色：context.strokeStyle = "green";