HTML音视频
Audio音频,HTML5提供了播放音频的标准
control控制器,该属性体统添加播放、暂停和音量调剂的空间
标签
<audio>定义声音
<source>规定多媒体资源,可以是多个
编解码工具,不是所有浏览器都是支持所有统一的视频格式,这时需要编解码工具来对不同的浏览器进行支持
使用FFmpeg开发工具插件,www.ffmpeg.org其转码的命令ffmpeg -i 待转码文件 -acodec libvorbis 转换完成应该的格式和名称
HTML5的视频播放功能
HTML5提供了展示视频的标准
有control属性提供添加播放、暂停和音量空间
表现有video定义声音,source定义多媒体资源,可以是多个
其中还有width和height的属性,用来设置视频的高度和宽度
HTML5的拖放:
拖放drag和drop是HTML5标准的组成部分
拖动开始:
ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据
设置拖动数据:
setData()设置被拖数据的数据类型和值
该标签用于图形的绘制,通过脚本来完成(通常为JS)
canvas标签只是图形容器,必须使用脚本来绘制图形
可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像
canvas中使用createjs来进行创建
HTML5的SVG
指可伸缩矢量图形scalable vector graphics
可以用来定义用于网络的基于矢量的图形
使用XML格式定义图形
该图像在放大或者改变尺寸的情况下其图形质量不会有损失
它是万维网联盟的标准
优势:
该图像可通过文本编辑器来创建和修改
可以被搜索、索引、脚本化或压缩
可以进行伸缩
在任何的分辨率下被高质量地打印
可在图像质量不下降的情况下被放大
sessionStorage->
HTML5应用缓存与web workers
HTML5引入了应用缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问
优势
离线浏览-用户可在应用离线时使用它们
速度-已缓存资源加载得更快
减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源
实现缓存:
如需启用应用缓存,请在文档的<html>标签中包含manifest属性
manifest文件的建议文件扩展名是:“.appcache”
Manifest文件
1.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2.NETWORK在此标题列出的文件需要与服务器的连接,且不会被缓存
3.FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
HTML5的Web Workers
它是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能(利用的是多线程进行处理的)
方法:
postMessage()-它用于向HTML页面传回一段消息
terminate()-终止web worker,并释放浏览器/计算机资源
事件 onmessage
例子
HTML5服务器推送事件->是HTML5规范中的一个组成部分,可以用来从服务器端实时推送数据到浏览器端
传统的服务器端推送数据技术:
websocket规范是HTML5中的一个重要组成部分,已经被很多主流浏览器所支持,也有不少基于websocket开发的应用。该规范使用的是套接字连接,基于TCP协议。使用该协议之后,实际上在服务器端和浏览器端之间建立一个套接字连接,可以进行双向的数据连接。WebSocket的功能是很强大的,使用起来也灵活,可以适用于不同的场景。不过WebSocket技术也比较复杂,包括服务器端和浏览器端的实现都不同于一般的web应用
另一种方式->
HTTP协议:简易轮询,即浏览器端定时向服务器端发送请求,来查询是否有数据更新,这种做法比较简单,可以在一定程度上解决问题。不过轮询的时间间隔需要进行仔细考虑。轮询的时间间隔过长,会导致用户不能及时接受到更新的数据;轮询的间隔过短,会导致查询请求过多,增加服务器端的负担。
HTML5服务器推送事件实现
服务器代码头header('Content-Type:text/event-stream');
Audio音频,HTML5提供了播放音频的标准
control控制器,该属性体统添加播放、暂停和音量调剂的空间
标签
<audio>定义声音
<source>规定多媒体资源,可以是多个
编解码工具,不是所有浏览器都是支持所有统一的视频格式,这时需要编解码工具来对不同的浏览器进行支持
使用FFmpeg开发工具插件,www.ffmpeg.org其转码的命令ffmpeg -i 待转码文件 -acodec libvorbis 转换完成应该的格式和名称
HTML5的视频播放功能
HTML5提供了展示视频的标准
有control属性提供添加播放、暂停和音量空间
表现有video定义声音,source定义多媒体资源,可以是多个
其中还有width和height的属性,用来设置视频的高度和宽度
HTML5的拖放:
拖放drag和drop是HTML5标准的组成部分
拖动开始:
ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据
设置拖动数据:
setData()设置被拖数据的数据类型和值
放置:ondrop:当放置被拖数据时,会发生drop事件
var imgContainer; window.onload = function(){ imgContainer = document.getElementById("imgContainer"); imgContainer.ondragover = function(e){ e.preventDefault(); } imgContainer.ondrop = function(e){ //阻止事件的默认处理方式 e.preventDefault(); //读取事件文件中的文件信息,即文件网络编码格式和信息 var f = e.dataTransfer.files[0]; //创建文件读取对象 var fileReader = new FileReader(); //对文件读取属性的onload方法进行重写 //对div内部的内容进行修改 //其中fileReader中的result保存的是想要拖拽本地资源的网络编码地址名称 fileReader.onload = function(e){ imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">" } fileReader.readAsDataURL(f); } }
该标签用于图形的绘制,通过脚本来完成(通常为JS)
canvas标签只是图形容器,必须使用脚本来绘制图形
可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像
canvas中使用createjs来进行创建
var canvas; var stage; var img = new Image(); var sprite; window.onload = function () { canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); stage.addEventListener("stagemousedown",clickcanvas); stage.addEventListener("stagemousemove",movecanvas); var data = { images:["3.jpg"], frames:{width:20,height:20,regX:10,regY:10} } sprite = new createjs.Sprite(new createjs.SpriteSheet(data)); createjs.Ticker.setFPS(20); createjs.Ticker.addEventListener("tick",tick); } function tick(e){ var t = stage.getNumChildren(); for(var i = t -1 ; i>0 ; i--){ var s = stage.getChildAt(i); s.vY +=2; s.vX +=1; s.x += s.vX; s.y += s.vY; s.scaleX = s.scaleY = s.scaleX + s.vS; s.alpha += s.vA; if(s.alpha <= 0|| s.y >canvas.height){ stage.removeChildAt(i); } } stage.update(e); } function clickcanvas(e){ addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2); } function movecanvas(e){ addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1); } function addS(count,x,y,speed){ for(var i=0;i <count;i++){ var s = sprite.clone(); s.x = x; s.y = y; s.alpha = Math.random()*0.5 + 0.5; s.scaleX = s.scaleY = Math.random() + 0.3; var a = Math.PI * 2 * Math.random(); var v =( Math.random() - 0.5 ) * 30 * speed; s.vX = Math.cos(a) * v; s.vY = Math.sin(a) * v; s.vS = (Math.random()-0.5)*0.2;//scale s.vA = -Math.random() * 0,05 - 0.01;//alpha stage.addChild(s); } }
HTML5的SVG
指可伸缩矢量图形scalable vector graphics
可以用来定义用于网络的基于矢量的图形
使用XML格式定义图形
该图像在放大或者改变尺寸的情况下其图形质量不会有损失
它是万维网联盟的标准
优势:
该图像可通过文本编辑器来创建和修改
可以被搜索、索引、脚本化或压缩
可以进行伸缩
在任何的分辨率下被高质量地打印
可在图像质量不下降的情况下被放大
HTML5的WEB存储
客户端存储数据->
localStorage没有时间限制的数据存储
sessionStorage针对一个session的数据存储,当浏览器关闭之后数据就会被清除掉
与cookie作对比->
之前,这些都是有cookie完成的。但是cookie不适合大量数据的存储,因为他们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。
例子:
localStorage->
var ta; var btn; window.onload = function(){ ta =document.getElementById("ta"); btn = document.getElementById("btn"); if(localStorage.text){ ta.value = localStorage.text; } btn.onclick = function(){ alert(ta.value); localStorage.text = ta.value; } }
sessionStorage->
var txt; var btn; var num=0; window.onload = function(){ txt = document.getElementById("txt"); btn = document.getElementById("addbtn"); if(sessionStorage.num){ num = sessionStorage.num; }else{ num = 0; } btn.onclick = function(){ num++; sessionStorage.num =num; show(); } } function show(){ txt.innerHTML = num; }
HTML5应用缓存与web workers
HTML5引入了应用缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问
优势
离线浏览-用户可在应用离线时使用它们
速度-已缓存资源加载得更快
减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源
实现缓存:
如需启用应用缓存,请在文档的<html>标签中包含manifest属性
manifest文件的建议文件扩展名是:“.appcache”
Manifest文件
1.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2.NETWORK在此标题列出的文件需要与服务器的连接,且不会被缓存
3.FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
HTML5的Web Workers
它是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能(利用的是多线程进行处理的)
方法:
postMessage()-它用于向HTML页面传回一段消息
terminate()-终止web worker,并释放浏览器/计算机资源
事件 onmessage
例子
var numdiv; var worker =null; window.onload = function(){ numdiv = document.getElementById("numdiv"); document.getElementById("start").onclick = startWorker; document.getElementById("stop").onclick = function(){ if(worker){ worker.terminate(); worker =null; } } } function startWorker(){ if(worker){ return; } worker =new Worker("count.js"); worker.onmessage = function(e){ numdiv.innerHTML = e.data; } } var countnum =0; function count(){ postMessage(countnum); countnum++; setTimeout(count,1000); } count();
HTML5服务器推送事件->是HTML5规范中的一个组成部分,可以用来从服务器端实时推送数据到浏览器端
传统的服务器端推送数据技术:
websocket规范是HTML5中的一个重要组成部分,已经被很多主流浏览器所支持,也有不少基于websocket开发的应用。该规范使用的是套接字连接,基于TCP协议。使用该协议之后,实际上在服务器端和浏览器端之间建立一个套接字连接,可以进行双向的数据连接。WebSocket的功能是很强大的,使用起来也灵活,可以适用于不同的场景。不过WebSocket技术也比较复杂,包括服务器端和浏览器端的实现都不同于一般的web应用
另一种方式->
HTTP协议:简易轮询,即浏览器端定时向服务器端发送请求,来查询是否有数据更新,这种做法比较简单,可以在一定程度上解决问题。不过轮询的时间间隔需要进行仔细考虑。轮询的时间间隔过长,会导致用户不能及时接受到更新的数据;轮询的间隔过短,会导致查询请求过多,增加服务器端的负担。
HTML5服务器推送事件实现
服务器代码头header('Content-Type:text/event-stream');
EventSource事件
onopen服务器的连接被打开
onmessege接收消息
onerror错误发生
响应式布局->
就是一个网站能够兼容多个终端-而不是为每个终端做一个特定版本。这个概念是为解决移动互联网浏览器而诞生的。其墓地是为用户提供更加舒适的界面和更好的用户体验
优缺点
优点->
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点->
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
CSS中的Media Query媒介查询,响应式布局
设备宽高:device-width,device-height
渲染窗口的宽和高:width,height
设备的手持方向:orientation
设备的分辨率:resolution
使用方法:
外联
内嵌样式