视频音频处理及Canvas
视频和音频的使用及处理
1.使用video和source搭配来解决视频格式的兼容性问题,如果都不支持,可以在video里面写上提示语
<video>
您的浏览器不支持播放该视频格式
<source src="一种视频格式">
<source src="一种视频格式">
<source src="一种视频格式">
</video>
2.video支持的视频格式
MP4 - 目前比较主流
OGG - 多用于移动端
WebM - 目前唯一支持超高清格式
在HTML页面中支持超高清格式HTML5
3.video元素的属性
src - 视频路径
autoplay - 自动播放
controls属性 - 提供视频播放的控制面板,只有属性名,没有属性值
loop - 视频的循环播放
poster属性 - 在视频播放之前,显示一张图片
width/height - 设置显示视频的宽度和高度
preload - 预加载
auto-(默认值)自动加载
none-不加载
metadata-只加载视频的基本信息(不含视频)
paused - 表示判断当前是否暂停,true表示暂停
ended - 表示判断当前视频是否播放完毕,true表示播放完毕
duration - 表示当前视频的时长,单位为s
currentTime - 表示当前视频播放的位置
4.video元素的方法
play() - 播放视频
pause() - 暂停视频
load() - 重新加载音频/视频元素
canPlayType() - 判断当前浏览器是否支持指定视频格式
5.video元素的事件
onplay - 当视频开始播放时调用
onpause - 当视频开始
onended - 当视频结束时被触发
onerror - 当视频错误时被触发
oncanplay - 当整个媒体可以顺利播放时,就会触发这个事件
oncanplaythrough - 不考虑整体状态,只要下载了一定的可放帧会会触发这个事件
onprogress - 用于更新媒体的下载进度,会周期性的触发
注意!!!
当video视频全屏时,浏览器会把video放到最前端,图片是有显示的,但被视频覆盖了,利用video事件完成广告效果
bug: 不能全屏
解决方案:
等到HTML5更新
使用video元素提供的高级编程自己实现
使用目前封装好的video的JS库 video.js
6.音频是audio,使用方法参照video
audio元素支持的音频格式:MP3 - 目前最主流,OGG,WAV
Canvas(画布)
1、 HTML5提供的新元素
2、 Canvas在HTML页面提供画布的功能,可以在页面中绘制各种图形
3、 canvas绘制的图形与HTML页面无关,无法通过DOM获取绘制的图形,无法为绘制的推行绑定DOM事件
4、 只能使用canvas提供的API
5、 主要用途 在HTML页面中绘制图标(例如柱状图、饼状图等) 网页游戏 - Flash技术 使用HTML5中的canvas
6. 如何使用canvas
1)在HTML页面中定义元素 默认宽度 300*150 效果上类似于div
问题:如果使用内联样式或者样式表改变canvas的宽高属性,都会拉伸或者压缩里面的图形,使用canvas的宽高属性没问题
2)获取元素
3)获取画布对象,context可以理解为画笔,getContext("2d");参数类型是string类型,参数必须是“2d”或“3d”(固定写法),字母必须是小写
4)使用canvas的API作图,设置位置:x,y 设置大小:width,height,位置是相对于canvas,context.fileRect(10,10,100,100);
7.矩形
1)绘制实心矩形
fillRect(x,y,width,heigth)
2)绘制空心矩形
strokeRect(x,y,width,heigth)
3)清除指定区域的像素,类似于橡皮擦
clearRect(x,y,width,height)
8. 设置颜色 - 如果在创建图像时,没有指定颜色,那么所有图形都会使用纯黑色
注意:设置绘制内容的属性,要在绘制之前设置好,绘制之后无效
1)声明形状线条的颜色
strokeStyle
2)声明形状内部区域的颜色
fillStyle
3)透明度属性。可以设置画布上图形的透明度
globalAlpha