Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[html] 第106天 除了音频和视频,HTML5还支持哪些媒体标签? #1005

Open
haizhilin2013 opened this issue Jul 30, 2019 · 6 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the html html label Jul 30, 2019
@EmiyaYang
Copy link

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

@nowherebutup
Copy link

source,canvas比较常用

@xxf1996
Copy link

xxf1996 commented Jul 31, 2019

<object><embed>标签;

@Chaya-cai
Copy link

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

@LinStan
Copy link

LinStan commented Jul 31, 2019

<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
Copy link

楼上很优秀啊

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
html html
Projects
None yet
Development

No branches or pull requests

7 participants