(本科)9 移动Web前端的HTML5 APIppt课件.pptx
《(本科)9 移动Web前端的HTML5 APIppt课件.pptx》由会员分享,可在线阅读,更多相关《(本科)9 移动Web前端的HTML5 APIppt课件.pptx(124页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、课程主讲人:9 移动移动Web前端的前端的HTML5 API第九章 移动Web前端的HTML5 API陈童博客:博客:目录1. 脚本化音频和视频2. 中的图形3. History API的基本概念4. Web存储5. 类型化数组和ArrayBuffer6. Blob7. 文件系统API8. 客户端数据库9. 应用程序存储和离线Web应用1. 脚本化音频和视频陈童博客:博客:脚本化音频和视频HTML5引入的和元素:由于各家浏览器制造商未能在对标准音频和视频编解码器支持上达成一致,因此,通常都需要使用元素来为指定不同格式的媒体源:脚本化音频和视频video element not supporte
2、d and Flash plugin not installed.脚本化音频和视频1. 类型选择和加载测试一个媒体元素能否播放指定类型的媒体文件,可以调用canPlayType()方法并将媒体的MIME类型(有时需要包含codec参数)传递进去。如果它不能播放该类型的煤体文件,该方法会返回一个空的字符串(一个假值)。反之,它会返回一个字符串:“maybe”或者“probably”var a = new Audio();if (a.canPlayType(audio/wav) a.src = soundeffect.wav; a.play();脚本化音频和视频2. 控制媒体播放和元素最重要的方法
3、是play()和pause()方法window.addEventListener(load, function() document.getElementById(music).play(); , false);通过设置currentTime属性来进行定点播放。该属性指定了播放器应该跳过播放的时间(单位为秒)volume属性表示播放音量,介于0(静音)-1(最大音量)之间。将muted属性设置为true则会进入静音模式,设置为false则会恢复之前指定的音量继续播放playbackRate属性用于指定媒体播放的速度。该属性值为1.0表示正常速度,大于1则表示“快进”,0-1之间的值则表示“慢放
4、”。负值则表示回放脚本化音频和视频2. 控制媒体播放controls属性指定是否在浏览器中显示播放控件loop属性是布尔类型,它指定媒体是否需要循环播放preload属性指定在用户开始播放媒体前,是否或者多少媒体内容需要预加载。该属性值为“none”则表示不需要预加载数据。为“metadata”则表示诸如时长、比特率、帧大小这样的元数据而不是媒体内容需要加载。为“auto”则表示浏览器应当预加载它认为适量的媒体内容autoplay属性指定当已经缓存足够多的媒体内容时是否需要自动开始播放脚本化音频和视频3. 查询媒体状态和元素有一些只读属性,描述媒体以及播放器当前的状态如果播放器暂停,那么pau
5、sed属性的值就为true如果播放器正在跳到一个新的播放点,那么seeking属性的值就为true如果播放器播放完媒体并且停下来,那么ended属性的值就为trueduration属性指定了媒体的时长,单位是秒initialTime属性指定了煤体的开始时间,单位也是秒。对于固定时长的媒体剪辑而言,该属性值通常是0脚本化音频和视频3. 查询媒体状态其他三个属性分别指定包含媒体时间轴、播放和缓冲状态的较细粒度视图played属性返回已经播放的时间段buffered属性返回当前已经缓冲的时间段seekable属性则返回当前播放器需要跳到的时间段。played、buffered和seekable都是T
6、imeRanges对象。每个对象都有一个length属性以及start()和end()方法,前者表示当前的一个时间段,后者分别返回当前时间段的起始时间点和结束时间点(单位都是秒)。可以使用如下代码来确定当前缓存内容的百分比:var percent_loaded = Math.floor(song.buffered.end(0) / song.duration * 100);脚本化音频和视频3. 查询媒体状态还有另外三个属性:readyState, networkState和error,每个属性都是数字类型的,而且为每个有效值都定义了对应的常量。if (song.readyState = son
7、g.HAVE_ENOUGH_DATA) song.play();readyState属性指定当前已经加载了多少媒体内容,因此同时也暗示着是否已经准备好可以播放了脚本化音频和视频3. 查询媒体状态如下表格展示了该属性的取值以及对应的意义:常量值描述HAVE_NOTHING0没有加载任何媒体内容或者元数据HAVE_METADATA1媒体元数据已经加载完毕,但是媒体内容还没有加载。也就是说,这个时候可以获取媒体的时长或者视频文件的维度,以及可以通过设置currentTime来定点播放,不过,由于没有加载任何媒体内容,因此浏览器还是无法从设置的currentTime开始播放HAVE_CURRENT_D
8、ATA2currentTime的媒体内容已经加载完成,但是还没有加载完足够的内容播放媒体。对于视频文件而言,表示当前帧的数据已经加载完成,但是下一帧的数据还未加载。这种状态通常发生在到达一个音频或者视频文件的最后的时候HAVE_FUTURE_DATA3已经加载一些的媒体内容,可以开始播放了。但是,还没有达到足够多的内容能够允许流畅地播放全部媒体内容HAVE_ENOUGH_DATA4所有媒体内容都已经加载完毕,可以流畅地播放脚本化音频和视频3. 查询媒体状态NetworkState属性指定媒体元素是否使用网络或者为什么媒体文件不使用网络:常量值描述NETWORK_EMPTY0媒体元素还没有开始使
9、用网络。比如,在还未设置媒体元素的src属性之间,就是这种状态NETWORK_IDLE1媒体元素当前没有通过网络来加载内容。这种情况有可能是内容已经加载完毕或者是所需的内容都从缓存中直接读取了,又或者是preload属性设置成了“noneMnone,还没有要求加载或者播放媒体NETWORK_LOADING2媒体元素当前通过网络来加载媒体内容NETWORK_NO_SOURCE3媒体元素无法获取媒体源脚本化音频和视频3. 查询媒体状态error对象也定义了一些描述可能的错误代码的常量:常量值描述MEDIA_ERR_ABORTED0用户要求浏览器停止加载媒体内容MEDIA_ERR_NETWORK1媒
10、体类型正确,但是发生了网络错误导致无法加载MEDIA_ERR_DECODE2媒体类型正确,但是由于编码错误导致无法正常解码和播放MEDIA_ERR_SRC_NOT_SUPPORTED3通过src属性指定的媒体文件浏览器不支持,无法播放脚本化音频和视频4. 媒体相关事件时间类型描述loadstart当媒体元素开始请求媒体数据内容的时候触发。相应的networkState属性值为NETWORK_LOADINGprogress正在通过网络加载媒体内容,对应的networkState属性值为NETWORK_LOADING。此事件一般每秒触发28次loadedmetadata媒体元数据已经加载完成,对应
11、的媒体时长和维度数据也已经获取。此时,readyState属性值第一次变为HAVE_METADATAloadeddata当前播放位置的媒体内容首次加载完毕,同时readyState属性值变为HAVE_CURRENT_DATAcanplay已经加载一些媒体内容,可以开始播放,但是还需要继续缓冲更多数据。此时readyState属性值为HAVE_FUTURE_ DATAcanplaythrough所有媒体内容加载完毕,可以流畅播放,无须暂停也无须再缓冲更多数据。此时readyState属性值为HAVE_ENOUGH_DATAsuspend已经缓冲大量数据,暂时停止下载。此时networkState
12、属性值变为NETWORK_IDLEstalled尝试加载数据,但是无法获取到数据。此时networkState始终为NETWORK_LOADING脚本化音频和视频4. 媒体相关事件play调用play()方法或者设置相应的autoplay属性。如果已经加载足够多的数据,紧接着还会触发playing事件;否则,紧接着触发waiting事件waiting由于未缓冲足够数据导致播放未能开始或者播放停止。当缓冲足够多数据后,接着会触发playing事件playing已经开始播放媒体文件timeupdatecurrentTime属性发生改变了。此事件每秒会触发460次,具体次数可能取决于系统加载速度以及
13、事件处理程序完成时间pause调用了pause()方法,暂停了播放seeding通过播放控件将当前播放时间调至一个还未缓冲的时间点,导致在内容没有加载完时,停止播放。此时,seeking属性值为trueseekedseeking属性值又变回falseended媒体播放完毕,播放停止durationchangeduration属性值发生改变volumechangevolume或者muted属性值发生改变ratechangeplaybackRate或者defaultPlaybackRate发生改变abort停止加载媒体内容。对应的error.code值为MEDIA_ERR_ABORTEDerror
14、由于发生网络错误或者其他错误阻止媒体内容的加载。此时,code值不会是MEDIA_ERR_ABORTEDemptied发生了错误或者中止,导致networkState属性值又变回NETWORK_EMPTY2. 中的图形陈童博客:博客:中的图形元素和SVG之间一个重要的区别是:使用canvas来绘制图形是通过调用它提供的方法,而使用SVG绘制图形是通过构建一棵XML元素树来实现的大部分的画布绘制API不是在元素自身上定义的,而是定义在一个“绘制上下文”对象上,获取该对象可以通过调用画布的getContext()方法调用getContext()方法时,传递一个“2d”参数,会获得一个CanvasR
15、enderingContext2D对象,使用该对象可以在画布上绘制二维图形“画布API”指的也就是CanvasRenderingContext2D对象的方法中的图形This is a red square: .This is a blue circle: .var canvas = document.getElementById(square); / 获取第一个画布元素var context = canvas.getContext(2d); / 获取2D绘制上下文context.fillStyle = #f00; / 填充一个正方形context.fillRect(0,0,10,10); /
16、填充一个正方形canvas = document.getElementById(circle); /第二个画布元素context = canvas.getContext(2d); / 获取它的绘制上下文context.beginPath(); / 开始一条新的路径context.arc(5, 5, 5, 0, 2*Math.PI, true); / 将圆形添加到该路径中context.fillStyle = #00f; / 设置填充色为蓝色context.fill(); / 填充路径中的图形1. 绘制线段和填充多边形调用beginPath()方法开始定义一条新的路径调用moveTo()方法则开
17、始定义一条新的子路径调用lineTo()方法来将该点与新的一个点通过直线连接起来c.beginPath(); / 开始一条新路径c.moveTo(100, 100); /从(100,100)开始定义一条新的子路径c.lineTo(200, 200); / 从(100,100)到(200,200)绘制一条线段c.lineTo(100, 200); / 从(200,200)到(100,200)绘制一条线段通过调用stroke()方法在路径中绘制(或者勾勒)两条线段要填充这些线段闭合的区域可以通过调用fill()方法:c.fill(); / 填充一个三角形区域c.stroke(); / 绘制三角形的
18、两条边中的图形1. 绘制线段和填充多边形使用moveTo()、lineTo()和closePath()方法绘制规则多边形定义了一个函数,用于绘制规则的多边形,同时展示了如何使用moveTo()、lineTo()和closePath()方法来定义子路径以及如何使用fill()方法和stoke()方法来绘制这些路径中的图形2. 图形属性属性含义strokeStyle勾勒线段时的颜色、渐变或图案等样式fillStyle填充时候的颜色、渐变或图案等样式font绘制文本时候的CSS字体globalAlpha绘制像素时候要添加的透明度globalCompositeOperation如何合并新的像素点和下面
19、的像素点lineCap如何渲染线段的末端lineJoin如何渲染顶点lineWidth外框线的宽度miterLimit紧急斜接顶点的最大长度textAlign文本水平对齐方式textBaseline文本垂直对齐方式shadowBlur阴影的清晰或模糊程度shadowColor下拉阴影的颜色shadowOffsetX阴影的水平偏移量shadowOffsetY阴影的垂直偏移量中的图形2. 图形属性调用save()方法会将当前图形状态压入用于已保存状态的栈上调用restore()方法会从栈中弹出并恢复最近一次保存的状态Example 21-5 图形状态管理工具/ 恢复最后一次保存的图形状态,但是让该
20、状态从栈中弹出CanvasRenderingContext2D.prototype.revert = function() this.restore(); / 恢复最后一次保存的图形状态 this.save(); / 再次保存它以便后续使用 return this; / 允许方法链;中的图形2. 图形属性CanvasRenderingContext2D.prototype.attrs = function(o) if (o) for(var a in o) /遍历o对象中的每个属性 thisa = oa; / 将它设置成图形属性 return this; / 启用方法链 else return
21、 fillStyle: this.fillStyle, font: this.font, globalAlpha: this.globalAlpha, globalCompositeOperation: this.globalCompositeOperation, lineCap: this.lineCap, lineJoin: this.lineJoin, lineWidth: this.lineWidth, miterLimit: this.miterLimit, textAlign: this.textAlign, textBaseline: this.textBaseline, sha
22、dowBlur: this.shadowBlur, shadowColor: this.shadowColor, shadowOffsetX: this.shadowOffsetX, shadowOffsetY: this.shadowOffsetY, strokeStyle: this.strokeStyle ;中的图形3. 画布的尺寸和坐标元素的width以及height属性和对应的画布对象的宽度以及高度属性决定了画布的尺寸。画布的默认坐标系是以画布最左上角为坐标原点(0,0)0越往右X轴的数值越大,越往下Y轴的数值越大默认情况下,会按照它设置的HTML width和height属性值来显
23、示画布大小。但是,和其他HTML元素一样,元素还可以通过CSS的width和height样式属性来设置它的屏幕显示大小。如果指定画布的屏幕显示大小和它的实际尺寸不同,那么画布上所有的像素都会自动缩放以适合通过CSS属性指定的屏幕显示尺寸中的图形4. 坐标系变换尽管通过调用setTransform()方法能够直接设置画布的变换矩阵,但是通过转换、旋转和缩放操作更容易实现坐标系变换调用translate()方法只是简单地将坐标原点进行上、下、左、右移动调用rotate()方法会将坐标轴根据指定角度(画布API总是以弧度制来表示角度。要将角度制转换成弧度制,可以通过Math.PI来对180进行乘除来
24、实现)进行顺时针旋转调用scale()方法实现对X轴或者Y轴上的距离进行延长和缩短中的图形4. 坐标系变换把变换想象成一个在变换后坐标系中的点(x,y),到了原来的坐标系统就变成了(x,y)调用c.translate(dx,dy)方法就等效于如下表达式:x = x + dx; / 新系统中X轴的0,在原系统中就是dxy = y + dy;调用t.scale(sx,sy)就等效于如下表达式:x = sx * x; y = sy * y;调用rotate(a)可以通过三角法则等效于如下表达式:x = x * cos(a) - y * sin(a);y = y * cos(a) + x * sin(
25、a);中的图形4. 坐标系变换任意的仿射变换可以利用af 6个参数等效描述成如下形式:x = ax + cy + ey = bx + dy + f通过向transform()方法传递上述6个参数就可以应用任意仿射变换到当前的坐标系/ 扭曲变换:/ x = x + kx*y;/ y = y + ky*x;function shear(c,kx,ky) c.transform(1, ky, kx, 1, 0, 0); function rotateAbout(c,theta,x,y) var ct = Math.cos(theta), st = Math.sin(theta); c.transfo
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 本科9 移动Web前端的HTML5 APIppt课件 本科 移动 Web 前端 HTML5 APIppt 课件
限制150内