flash生产html 前端,flash正式陨落 之 HTML前端网页网站替代方案

一、视频处理

1、基本内容

1.1、使用HTML实现视频处理：

video标签

如果当前浏览器不支持video，可以在viedo里面编写提示内容

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

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

二、音频处理

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

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