HTML5新元素(2)

HTML5添加了很多新元素及其标签<video><audio>…….

HTML5对音视频添加了支持,使得多媒体应用更加丰富

视频格式

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

<video  src=”    ……   ” ></video>

<audio   src=”    ……   ” ></audio>

可以使用<source>链接不同的视频文件 ,使得支持的更多浏览器观看

<video/audio> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。(audio无效)
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload auto

/none

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 “autoplay”,则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。(audio无效)

 事件属性

<video> 标签支持 HTML 中的事件属性

 HTML DOM 参考手册:Video 对象

HTML5本地存储

在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。

本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。

HTML 本地存储提供了两个在客户端存储数据的对象:

  • window.localStorage – 存储没有截止日期的数据
  • window.sessionStorage – 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)

直接使用

  • localStorage.text = “cwj95.com”      —-> 直接赋值可以使用
  • sessionStorage.text = “cwj95.com”
  • delete(  )     可以使用该方法删除

使用对象方法

  • setItem(“key” , “value”)
  • getItem(“key”)
  • remover(“key”)
  • clear()    —–〉清除所有

HTML5 应用缓存和web worker

 离线缓存优势
  1. 离线浏览
  2. 速度更快
  3. 减少服务器负载

在html中添加manifest属性,推荐扩展名是”.appcache”

<html   manifest=”index.appcache”>

示例:    [index.appcache]

Manifest文件配置

  1. CACHE           文件将在首次下载后缓存
  2. NETWORK         文件不进行缓存,需要连接服务器
  3. FALLBACK         当页面无法访问,可以回退的页面

 

Web Worker:运行在后台的JS脚本,不影响页面性能(多线程)

var work = new Worker("work.js");   //创建对象
work.onmessage=function(e){ e.data }     //  监听消息函数
work.terminate();         //  终止Worker,释放资源
//[work.js]
postMessage('需要发送的内容');    //向页面传递数据

发表评论

发表评论

*

沙发空缺中,还不快抢~