关键词：视频处理、音频处理、Canvas(画布)
一、视频处理
1、基本内容
1.1、使用HTML实现视频处理：
-
video标签
如果当前浏览器不支持video，可以在veido里面编写提示内 src - 引入视频文件的路径 autoplay - 自动播放视频
2）souce元素
1.2、video支持的视频格式
MP4 - 目前比较主流
OGG - 多用于移动端
WebM - 目前唯一支持超高清格式
1.3、video元素的属性
src - 视频路径
autoplay - 自动播放
controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值
loop - 视频的循环播放
poster属性 - 在视频播放之前，显示一张图片
width/height - 设置显示视频的宽度和高度
preload - 预加载：
auto-(默认值)自动加载
none-不加载
metadata-只加载视频的基本信息(不含视频)
2、高级内容
2.1、 方法
play() - 播放视频
pause() - 暂停视频
load() - 重新加载音频/视频元素
canPlayType() - 判断当前浏览器是否支持指定视频格式
2.2、 事件
onplay - 当视频开始播放时调用
onpause - 当视频开始
onended - 当视频结束时被触发
onerror - 当视频错误时被触发
oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件
oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件
onprogress - 用于更新媒体的下载进度，会周期性的触发
2.3、 属性
paused - 表示判断当前是否暂停，true表示暂停
ended - 表示判断当前视频是否播放完毕，true表示播放完毕
duration - 表示当前视频的时长,单位为s
currentTime - 表示当前视频播放的位置
2.4、 video元素
当video视频全屏时，浏览器会把video放到最前端，图片是有显示的，但被视频覆盖了
利用video事件完成广告效果
bug: 不能全屏
解决方案：
等到HTML5更新
使用video元素提供的高级编程自己实现
使用目前封装好的video的JS库 video.js
3、代码示例
4、运行结果
Paste_Image.png
二、音频处理
1、 audio元素
第一种：只支持一种音频格式
第二种： 同时引入多个音频格式
2、audio元素支持的音频格式
MP3 - 目前最主流
OGG
WAV
3、代码示例
三、Canvas(画布)
1、基本内容
1.1、 HTML5提供的新元素
1.2、 Canvas在HTML页面提供画布的功能
可以在页面中绘制各种图形
1.3、 canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
1.4、 只能使用canvas提供的API
1.5、 主要用途
在HTML页面中绘制图标(例如柱状图、饼状图等)
网页游戏 - Flash技术
使用HTML5中的canvas
1.6. 如何使用canvas
1）在HTML页面中定义2、高级内容
1、API提供的工具非常广泛，包括创建图形、颜色、文本等
2、矩形
1）绘制实心矩形
fillRect(x,y,width,heigth)
2）绘制空心矩形
strokeRect(x,y,width,heigth)
3）清除指定区域的像素，类似于橡皮擦
clearRect(x,y,width,height)
3.、设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色
1）声明形状线条的颜色
strokeStyle
2）声明形状内部区域的颜色
fillStyle
3）透明度属性。可以设置画布上图形的透明度
globalAlpha
HTML5的难度
HTML5的核心API相对来讲，都不难
HTML5的案例真正难在逻辑(js代码)
总结：HTML5离不开js
第二阶段js，抓紧复习
个人不建议 - 留级
4、 渐变效果 - canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点
1）在画布上创建一个渐变对象
var grd = context.createLinearGradient(x1,y1,x2,y2)
x1,y1 - 基准线的起点坐标值
x2,y2 - 基准线的终点坐标值
var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2)
x1,y1 - 第一个基准圆的元素坐标值
r1 - 第一个基准圆的半径
x2,y2,r2同上
返回一个渐变对象
2）给渐变对象指定渐变颜色值
addColorStop(position,color)
position - 指设置渐变颜色的位置(0-1)
3） 将渐变对象作为画布对象的颜色
context.fillStyle = grd;
4） 绘制矩形
context.fillRect(0,0,400,400);
5、代码示例
6、运行结果
Paste_Image.png