html5 媒体特征,老生常谈h5新特性2:(媒体)

老生常谈h5新特性2:(媒体)

HTML5新特性 —— 十大新特性

(1)新的语义标签和属性

(2)表单新特性

(3)视频和音频

(4)Canvas绘图

(5)SVG绘图

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

1.Flash被HTML5取代在哪些方面？

音频和视频 —— 和

绘图 ——

动画/游戏 —— +定时器

统计图表 —— 、

客户端数据存储 —— WebStorage

2.HTML5新特性——视频播放

HTML5提供了一个新的标签标签，用于播放视频。该标签默认是一个300*150的inline-block。使用方法：

VIDEO元素/对象的属性：

(1)src：指定要播放的视频的资源路径

(2)autoplay：false，是否自动播放

(3)controls：false，是否显示播放控件，提示：不同浏览器的播放控件外观不同

(4)currentTime：当前播放的时间点(s)

(5)duration：影片总时长(s)

(6)ended：false，是否播放到结尾

(7)loop：false，是否循环播放

(8)muted：false，是否静音

(9)volume：1，音量设置(0~1)，对象属性，不用于标签

(10)paused：当前是否处于暂停状态

(11)poster：''，指定视频第一帧播放前的电影海报

(12)preload：指定视频预加载方案，可取值：

auto：默认值，自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长

metadata：元数据，只预加载视频的宽高、时长、第一帧内容

none：不预加载任何内容

VIDEO对象的方法：

play()：开始播放

pause()：暂停播放

VIDEO对象的事件：

onplay：视频开始播放(可能多种原因引起)

onpause：视频开始暂停(可能多种原因引起)

onplaying

3.HTML5新特性——音频播放

HTML5提供了一个新的标签标签，用于播放音频。该标签若没有controls属性，则默认display:none；反之则是一个300*30的inline-block。使用方法：

AUDIO元素/对象的属性：

(1)src：指定要播放的视频的资源路径

(2)autoplay：false，是否自动播放

(3)controls：false，是否显示播放控件，提示：不同浏览器的播放控件外观不同

(4)currentTime：当前播放的时间点(s)

(5)duration：总时长(s)

(6)ended：false，是否播放到结尾

(7)loop：false，是否循环播放

(8)muted：false，是否静音

(9)volume：1，音量设置(0~1)，对象属性，不用于标签

(10)paused：当前是否处于暂停状态

(12)preload：指定视频预加载方案，可取值：

auto：默认值，自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长

metadata：元数据，只预加载视频的宽高、时长、第一帧内容

none：不预加载任何内容

AUDIO对象的方法：

play()：开始播放

pause()：暂停播放

AUDIO对象的事件：

onplay：视频开始播放(可能多种原因引起)

onpause：视频开始暂停(可能多种原因引起)

onplaying

(1)

属性是老IE的专有属性，也可以用于播放背景音乐，但音量、静音、暂停、停止都无法精准的控制。其它浏览器不支持此属性。

(2)当前iOS中的Safari浏览器默认不支持audio标签！只能使用video标签代替。