Fe-interview: [html] 第106天 除了音频和视频，HTML5还支持哪些媒体标签？

[haizhilin2013]

第106天 除了音频和视频，HTML5还支持哪些媒体标签？

[EmiyaYang]

标签 | 作用 | 应用
---|---|---
embed | 标签定义嵌入的内容 | CodePen等网站的代码编辑器可直接嵌入html
track | 为video、audio添加.vtt格式的字幕文件
source | 为媒体元素如video、audio定义不同格式的媒体资源，让浏览器选择其所支持的一个 |
canvas | 定义画布 | web游戏开发
picture | 响应式处理图片 | 适配Retina屏幕
marquee | 实现跑马灯效果，现已过时 |

[nowherebutup]

source,canvas比较常用

[xxf1996]

<object>和<embed>标签；

[Miiskye]

媒体标签的出现意味着随着富媒体的发展可以在不使用插件的情况下操作媒体文件，极大的提升了用户体验。
除了video和audio，还有source（定义媒体资源）、embed（定义外部的可交互内容和插件），比较常用的是canvas（定义图片（画布））

[LinStan]

<source> 一般用于定义不同的媒体资源，由于各浏览器对视频格式的支持不同，可以通过video/audio内嵌source来链接多种视频格式，实现浏览器兼容

<audio controls>
  <source src="test.mp3" type="audio/mp3" />
  <source src="test.ogg" type="audio/ogg" />
</audio>

<track> 用于给音频和视频文件添加字幕文件

<video width=”450″ height=”340″ controls>
     <source src=”W3Cschool.mp4″ type=”video/mp4″>
     <source src=”W3Cschool.ogg” type=”video/ogg”>
     <track kind=”subtitles” label=”English” src=”W3Cschool_en.vtt” srclang=”en”></track>
</video>

<canvas> 用于自定义图形，通过css/js自行绘制图像
<canvas width="200px" height="200px" style="border:1px solid black;">
<embed> 可用于显示外嵌的内容：例如媒体对象，插件
<embed height="100" width="100" type="audio/mp3" src="src="test.mp3".mp3" />
<object> 大致同embed，不过h5之前就支持
<object height="100" width="100" data="src="test.mp3".mp3"></object>

[EragonBubble]

楼上很优秀啊

audio 定义音频，如音乐和音频流

video 定义视屏，如视频片段和视频流
还有

canvas 定义画布，然后通过css/js绘制图像，前端在做图像处理的时候用的比较多

marquee 滚动的文字，可以设置滚动方向，快慢等

object 定义一个嵌入对象，比如图像、音频、视频、Java applets、ActiveX、PDF以及Flash。比如在实现web系统使用读卡器，会用到。

embed 定义嵌入的内容，比如插件。

track 为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

souorce 为 audio和video媒介元素定义媒介资源

picture 通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。 tip: IE不支持。

---

举几个例子帮助记忆：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<picture>
<source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>