H5新特性-视频,音频-Flash-canvas绘图

json格式

json - > AJAX

json:数据格式,通常是以字符串形式表示

对象 {"name":"james","age":19}

数组 [{"name":"tom"},{"name":"jerry"},{"name","james"}]

所有key 必须添加双引号

所有value 如果字符串类型加上双引号

key和value之间 : 分隔

对象与对象之间 ,

常用数据格式:xml  json

<books>

<book>

<name>tom</name>

</book>

<book>

<name>jerry</name>

</book>

</books>

验证码:解决网络攻击手段(机器人攻击)

1:动态创建数字图片/字母数字角度/算术/

一组图片/拖动滑块

2:短信(金融)

如何实现功能:

1:创建php动态生成一张图片

2:用户输入图片中字母或数字

js/index.js

3:01_admin_login.php

先把用户输入字母和数字  a001

再把图片中数字获取      $_SESSION["code"]

常见错误

1: syntax error,

<b>C:\xampp\htdocs\h5\admin\data\01_admin_login.php</b> on line <b>10</b><br />

原因:程序第10 行(附近)有语法错误...

2: {"code":1,"msg":"登录成功"}

应该对象 header("Conten....");

3:今天的目标

3.1:h5新特性--视频,音频

视频:网站卖点[腾讯/爱奇艺/优酷/tmooc/抖音/直播..]

3.2:Flash被H5 取代体现的哪些方面?

Flash  绘图  ==>Canvas/SVG

Flash  动画  ==>定时器+Canvas

Flash  视频和视频播放==>video/audio

Flash  客户端存储    ==>WebStorage

3.3:h5新特性--视频播放

h5提供一个新的标签用于播放视频

mp4/mov/webm/ogg

<video src="x.mp4">您的浏览器版本太低，请升级<video>

<video>

<source src="x.mp4" />

<source src="x.mov" />

<source src="x.webm" />

您的浏览器版本太低，请升级

</video>

它本身是一个300*150的inline-block元素

video标签常用属性和成员

autoplay:false 是否自动播放

controls:false 是否显示控件

muted:true  是否静音

poster:""    在播放第一帧之前显示海报

preload:""   视频预加载策略

auto:     预加载视频元数据及缓冲一定时长视频

metadata: 只预加载元数据(尺寸,时长,第一帧内容)

none:     不预加载任何数据

###js对象属性###

currentTime:   当前播放时长

paused:true    当前视频是否处理暂停状态

volume:1      当前音量 0~1

playbackRate:1 回放速率 大于1快放,小于1慢播

成员方法:

play();   播放视频

pause();  暂停视频

成员事件:

onplay    播放视频

onpause   暂停播放

练习1:不使用video自带controls，自定义播放/暂停按钮

移标移出视频区域，隐藏按钮,鼠标移入视频区域显

示按钮

练习2:只要视频暂停显示一副广告,只要播放，就隐藏广告

周一:弹幕...

3.4:h5新特性--音频播放

h5提供了一个新的标签用于播放音频

<audio src="bg.mp3"></audio>

<audio>

<source src="bg.wav">

<source src="bg.ogg">

<source src="bg.mp3">

</audio>

它默认是一个300*30的inline-block,但若没有controls属性,不可见.

成员属性:事件/方法/属性

autoplay:false 是否自动播放

controls:false 是否显示控件

muted:true  是否静音

preload:""   视频预加载策略

auto:     预加载视频元数据及缓冲一定时长视频

metadata: 只预加载元数据(尺寸,时长,第一帧内容)

none:     不预加载任何数据

###js对象属性###

currentTime:   当前播放时长

paused:true    当前视频是否处理暂停状态

volume:1      当前音量 0~1

playbackRate:1 回放速率 大于1快放,小于1慢播

成员方法:

play();   播放视频

pause();  暂停视频

成员事件:

onplay    播放视频

onpause   暂停播放

练习:使用复选框控制网页背景音乐

cb.onchange = function(){

this.checked

}

3.5 h5新特性--canvas绘图(重点)

网页中走势图,统计图,网页游戏,特效,地图应用都要使用绘图技术。

(1)SVG绘图:2D矢量图绘图技术，2000出现，后纳入h5标

(2)Canvas绘图:2D位图绘图技术,h5 提出绘图技术

(3)WebGL绘图:3D绘图技术，尚未纳入标准

Canvas绘图难点所在:

(1)坐标系

(2)单词比较多

canvas:画布，是h5提供绘图技术
   3.6 h5新特性--canvas绘图技术

<canvas  width="500" height="400">

您的浏览器版本太低，请升级!!!

</canvas>

canvas标签在浏览器默认300*150的inline-block

注意:画布宽和高只能html/js属性来赋值，

不能用css样式赋值

每个画布上有且只有一个"画笔"对象,

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

(1)使用canvas绘制矩形

矩形的定位在自己左上角

ctx.lineWidth = 1;       描边宽度

ctx.strokeStyle = "#000"; 描边样式

ctx.fillStyle = "#000";    填充样式

ctx.fillRect(x,y,w,h);     填充一个矩形(实心矩形)

ctx.strokeRect(x,y,w,h);  描边一个矩形

ctx.clearRect(x,y,w,h);   清除一个矩形范围内所有图形

练习1:在画布的左上角，右上角，左下角，右下角，

居中位置 绘制100*80描边矩形(颜色不同)

练习2:在画布上描边一个可以左右移动100*80描边矩形

提示:使用定时器，先清除画布上己有内容,

再重新绘制一个(x不停修改)

上下移动/右角45度..

(2)使用canvas绘制文本

ctx.textBaseline = "alphabetic"; 文本基线

ctx.font = "12px sans-serif";    文本大小和字体

ctx.fillText(str,x,y);            填充一段文本

ctx.strokeText(str,x,y);         描边一段文本

ctx.measureText(str);          测量文本宽度{width:w}