HTML学习笔记（HTML5新特性）NO.5

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()设置被拖数据的数据类型和值

放置：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);
    }
}

HTML5的Canvas标签使用
该标签用于图形的绘制，通过脚本来完成（通常为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

使用方法：
外联
内嵌样式