多媒体标签

379 阅读3分钟

除了图像,网页还可以放置视频和音频。

1、<video>

video标签是一个块级元素,用于放置视频。 video标签内放置source标签可以放置同一个视频的多种格式,type属性值为视频文件的MIME类型:MP4、WebM。 video标签有以下属性:

  • src:视频文件的网址
  • controls:播放器是否显示控制栏。自定义播放器取消此属性。
  • width:播放器宽度
  • height:播放器高度
  • autoplay:视频是否自动播放
  • loop:视频是否循环播放
  • muted:是否默认静音
  • poster:视频播放器的封面图片的URL
  • preload:视频播放前,是否缓冲视频文件。配合autoplay使用。
  • playsinline:禁止iPhone的Safari浏览器自动全屏播放视频。
  • crossorigin:采用跨域的方式加载视频:anonymous/use-credentials
  • currentTime:指定当前播放位置
  • duration:只读属性,指示时间轴上的持续播放时间

2、<audio>

audio标签是一个块级元素,用于放置音频。用法与video标签一致。 audio标签内放置source标签可以指定多种音频格式,type属性值可以为mp3、ogg。 audio标签属性与video标签类似:

  • autoplay:是否自动播放
  • controls:是否显示播放工具栏
  • crossorigin:是否使用跨域方式请求
  • loop:是否循环播放
  • muted:是否静音
  • preload:音频文件的缓冲设置
  • src:音频文件网址

3、<track>

track标签用于指定视频的字幕,格式是WebVTT,放置在video标签内,单标签。 track标签有以下属性:

  • label:播放器显示的字幕名称
  • kind:字幕的类型,默认是subtitiles,还有captions
  • src:vtt字幕文件的网址
  • srclang:字幕的语言
  • default:是否默认打开

4、<source>

source标签用于picture、video和audio内部,用于指定一项外部资源,单标签。 source标签有以下属性:

  • type:指定外部资源的MIME类型
  • src:指定源文件,用于video和audio
  • srcset:指定不同条件下加载的图像文件,用于picture
  • media:指定媒体查询表达式,用于picture
  • sizes:指定不同设备的显示大小,用于picture,必须跟srcset搭配使用

5、<embed>

embed标签用于嵌入外部内容,外部内容通常由浏览器插件负责控制,浏览器默认插件不一致,谨慎使用。 embed标签有以下属性:

  • height:显示高度,不允许百分比
  • width:显示宽度,不允许百分比
  • src:嵌入资源的URL
  • type:嵌入资源的MIME类型

6、<object>,<param>

object标签跟embed标签类似,插入外部资源,由浏览器处理,可以视为embed的替代品,有标准化行为,无历史遗留问题,推荐使用。 object标签有以下属性:

  • data:嵌入资源的URL
  • form:当前网页中相关联表单的id属性
  • height:资源的显示高度,不能使用百分比
  • width:资源的显示宽度,不能使用百分比
  • type:资源的MIME类型
  • typemustmatch:布尔属性,表示data属性与type属性是否必须匹配 object标签为容器标签,内部可以使用param标签,给出插件所需要的运行参数。