关键词：视频处理、音频处理、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、代码示例

您的浏览器不支持播放该格式视频

var btn = document.getElementById('btn');

btn.onclick = function(){

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

//paused当前视频是否暂停，暂停返回true

if (video.paused) {

video.play();

btn.innerHTML = "暂停";

}else{

video.pause();

btn.innerHTML = "播放";

}

video.onplay = function(){

console.log("====");

}

video.onended = function(){

console.log("++++");

}

}

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页面中定义元素

默认宽度 300*150

效果上类似于div

问题：

定义canvas元素的宽度和高度

style设置-绘制图形被拉伸

属性方式 - 没有任何问题

2)获取元素

3)获取画布对象

getContext("2d");

参数类型是string类型，参数必须是“2d”或“3d”(固定写法)

4)使用Canvas提供的API

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

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、代码示例

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

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

function myCanvas() {

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

const WIDTH = canvas.width;

const HEIGHT　=　canvas.height;

var x = Math.random()*WIDTH;

var y = Math.random()*HEIGHT;

var width = Math.random()*WIDTH;

var height = Math.random()*HEIGHT;

//让图形生成在canvas里

if((x+width)>=WIDTH){

//重新生成

x = Math.random()*WIDTH;

width = Math.random()*WIDTH;

}

if((y+height)>=height){

y = Math.random()*height;

height = Math.random()*height;

}

context.strokeStyle = "rgb("+r+","+g+","+b+")";

context.strokeRect(x,y,width,height);

}

setInterval(myCanvas,1000);

6、运行结果

Paste_Image.png