老生常谈h5新特性2:(媒体)-原创手记-慕课网

老生常谈h5新特性2:(媒体)
HTML5新特性 —— 十大新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)WebWorker
(9)WebStorage
(10)WebSocket

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

  音频和视频 ——  <video>和<audio>
  绘图        —— <canvas>
  动画/游戏 —— <canvas>+定时器
  统计图表  —— <canvas>、<svg>
  客户端数据存储   —— WebStorage

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

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

<video src="x.mp4"></video>
<video>
    <source src="x.mp4">
    <source src="x.ogg">
    <source src="x.webm">
</video>

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

<audio src="x.mp3"></audio>
<audio>
    <source src="x.mp3">
    <source src="x.ogg">
    <source src="x.wav">
</audio>

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)<body bgsound="x.mp3">属性是老IE的专有属性，也可以用于播放背景音乐，但音量、静音、暂停、停止都无法精准的控制。其它浏览器不支持此属性。
(2)当前iOS中的Safari浏览器默认不支持audio标签！只能使用video标签代替。