媒体标签和本地存储

1.媒体标签

（1）<embed>标签定义嵌入的内容，比如插件，添加视频音频；常用属性有width、height、src

(2)<object>标签添加视频或者音频 ；常用属性：type、data、width、height

配合使用标签：param(常用属性：name、value)

(3)audio元素用于在网页上播放音频文件

 

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。
src	url	要播放的音频的 URL。

 

(4)video元素用于在网页上播放视频文件

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	px	设置视频播放器的高度。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。
src	url	要播放的音频的 URL。
width	px	设置视频播放器的宽度。

（5）<source>标签

作用：为媒体数据指定多个播放格式与编码，让浏览器可以从中进行选择适合的编码视频播放，拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件

HTML5支持的视频编码：mpeg4(mp4)、ogg、webm

 

(6)video/audio的API方法说明

•audio方法:

canPlayType(type)：能否播放某个资源文件，返回三个字符串之一：empty、maybe 或probably

load()：重新加载资源

pay()：播放

pause()：暂停

•video方法：

Media.canPlayType(type); //是否能播放某种格式的资源

Media.load(); //重新加载src指定的资源

Media.play(); //播放

Media.pause(); //暂停

2. web storage本地存储

功能：客户端浏览器本地保存数据的机制

web sotrage分类：

(1)sessionStorage：浏览器本地保存机制，浏览器关闭数据则丢失

把数据存储在session对象中

数据生命周期为：从打开网站开始到关闭网站时候

数据保存基本使用格式：

sessionStorage.setItem(key，value);

sessionStorage.key = value

数据读取的基本使用格式：

value = sessionStorage.getItem(key);

value = sessionStorage.key

(2)localStorage：计算机本地保存数据，浏览器重启数据依然存在

把数据存储在本地客户端硬件设备上

数据保存基本使用格式：

localStorage.setItem(key，value);

localStorage.key = value

数据读取的基本使用格式：

value = localStorage.getItem(key);

value = localStorage.key