HTML5标签变化-多媒体标签

多媒体标签
<video></video> 标记定义一个视频
<audio></audio> 标记定义一个音频
<source>标记定义媒体资源
<canvas></canvas> 标记定义图片
<embed>标记定义外部的可交互的内容或插件，例如flash

简单使用

  // 使用音频
  <audio 
    src="./xxx.mp3" 
    autoplay="autoplay" 
    loop="-1" 
    controls="controls">
    你的浏览器不支持该标签，请更换最新的浏览器
  </audio>

audio标签内有几个属性：
src：用于指定所要播放音频的资源路径
autoplay：设置了该属性以后，在打开页面后音频会自动播放
loop：设置音频播放的循环次数，设置2，就循环播放两次，如果设置为-1，则表示无限循环播放
controls：如果不设置这个标签，那么在页面中是无法看到具体的音频图标的，但是如果设置了这个标签，在页面中就能看到一块界面区域，可以控制音频的前进，后退，播放/暂停，音量等。
在audio中设置的文字，表示用户的浏览器如果不支持audio，则会显示出该文字；如果用户的浏览器支持该标签，那么不会显示这段文字，音频使用正常。

  <audio autoplay="autoplay">
    <source src="xxx.mp3" type="audio/mpeg">
    <source src="xxx.ogg" type="audio/ogg">
  </audio>

在audio中使用source，表示，市面上有很多各种各样的音频格式，而这里使用source则表示可以更大限度的支持各个不同格式的音频，如果mp3不支持，那么就跳到下一行查看是否支持ogg格式音频。

video标签的使用和audio类似

  <video 
    src="./xxx.mp4" 
    autoplay="autoplay"
    controls="controls">
    你的浏览器不支持该标签，请更换最新的浏览器
  </video>

  <video controls="controls" width="800" height="400">
    <source src="xx.mp4" type="video/mp4">
  </video>

embed标签
支持flash等：<embed src="xxx.swf" width="800" height="400"></embed>

多媒体标签的意义
意味着富媒体的发展以及支持不使用插件的情况下就可以操作媒体文件，极大的提升了用户体验