-
video标签
如果当前浏览器不支持video，可以在veido里面编写提示内容 src - 引入视频文件的路径 autoplay - 自动播放视频
-
souce元素
<vedio> <source src="一种视频格式"/> <source src="一种视频格式"/> <source src="一种视频格式"/> </vedio> -
video支持的视频格式
MP4 - 目前比较主流
OGG - 多用于移动端
WebM - 目前唯一支持超高清格式
在HTML页面中支持超高清格式HTML5
由Google公司推出 -
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元素
第一种：只支持一种音频格式
<audio src="音频文件路径"></audio>第二种： 同时引入多个音频格式
<audio> <source src="一种音频格式"> <source src="一种音频格式"> <source src="一种音频格式"> </audio> -
audio元素支持的音频格式
MP3 - 目前最主流
OGG
WAV
四、Canvas(画布) - 简单内容
1、 Canvas在HTML页面提供画布的功能
可以在页面中绘制各种图形
2、 canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
3、 只能使用canvas提供的API
4、 如何使用canvas
1）在HTML页面中定义<canvas>元素
默认宽度 300*150
效果上类似于div
问题：
定义canvas元素的宽度和高度
style设置-绘制图形被拉伸
属性方式 - 没有任何问题
2）获取<canvas>元素
3）获取画布对象
getContext("2d");
参数类型是string类型，参数必须是“2d”或“3d”(固定写法)
4）使用Canvas提供的API
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)
代码展示：
<body>
<canvas width="500px" height="500px">
</canvas>
</body>
<script>
var canvas=document.getElementsByTagName('canvas')[0];
var context=canvas.getContext("2d");
context.strokeRect(50,50,400,400);
context.strokeRect(50,50,150,150);
context.strokeRect(300,50,150,150);
context.strokeRect(50,300,150,150);
context.strokeRect(300,300,150,150);
context.clearRect(50,50,150,150);
context.clearRect(49,49,150,150);
context.clearRect(301,49,150,150);
context.clearRect(49,301,150,150);
context.clearRect(301,301,150,150);
</script>
-
设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色
1）声明形状线条的颜色
strokeStyle2）声明形状内部区域的颜色
fillStyle3）透明度属性。可以设置画布上图形的透明度
globalAlpha
