视频处理 video
插入video
在HTML5中我们可以使用video标签在网页中插入视频：
<video src="路径"></video>
考虑到浏览器兼容性问题，我们可以使用source标签来解决：
<vedio>
<source src="视频格式1"/>
<source src="视频格式2"/>
<source src="视频格式3"/>
</vedio>
video元素属性
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
插入audio
<audio src="音频文件路径"></audio>
考虑到浏览器兼容性问题，我们同样可以使用source标签来解决：
<audio>
<source src="音频格式1"/>
<source src="音频格式2"/>
<source src="音频格式3"/>
</audio>
audio的元素属性、方法、事件跟video类似，在此就不重复写了。
画布 canvas
什么是canvas
1. HTML5提供的新元素
2. Canvas在HTML页面提供画布的功能,可以在页面中绘制各种图形
3. canvas绘制的图形与HTML页面无关,无法通过DOM获取绘制的图形,无法为绘制的推行绑定DOM事件
4. 只能使用canvas提供的API
5. 主要用途:
在HTML页面中绘制图标(例如柱状图、饼状图等)
网页游戏 - Flash技术
使用HTML5中的canvas
怎么用canvas
1. 在HTML页面中定义<canvas>元素
<canvas id="canv"></canvas>
2. 获取<canvas>元素
var canvas=document.getElementById('canv')
3. 获取画布对象
var painter=canvas.getContext("2d");
//参数类型是string类型参数必须是“2d”或“3d”(固定写法)
4. 使用Canvas提供的API
painter.fileRect(10,10,100,100);
//painter.fiRect(x,y,width,height)
//其中：x，y分别是相对于canvas的横、纵坐标，width、height是画布对象painter的宽和高
上面说只能使用canvas提供的API画图，那么canvas常用的API有哪些呢？
1）绘制实心矩形
fillRect(x,y,width,heigth)
2）绘制空心矩形
strokeRect(x,y,width,heigth)
3）清除指定区域的像素，类似于橡皮擦
clearRect(x,y,width,height)
怎么设置画布对象的颜色呢？
1）声明形状线条的颜色
strokeStyle
2）声明形状内部区域的颜色
fillStyle
3）透明度属性。可以设置画布上图形的透明度
globalAlpha
举例：在canvas画一个颜色为red的实心矩形
这是错误的
painter.fileRect(10,10,100,100);
painter.fileStyle="red";
这是才是正确
painter.fileStyle="red";
painter.fileRect(10,10,100,100);
