首页手记老生常谈h5新特性2:(媒体)

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

标签：

Html/CSS

老生常谈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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.mp4"></video>
<video>
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.mp4">
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.ogg">
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.mp3"></audio>
<audio>
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.mp3">
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x.ogg">
    <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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