除了图像,网页还可以放置视频和音频。
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标签,给出插件所需要的运行参数。