标签是一个块级元素,用于放置视频。如果浏览器支持加载的视频格式,就会显示一个播放器,否则显示
代码中,如果浏览器不支持该种格式的视频,就会显示video内部的文字提示。
controls:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。
preload:视频播放之前,是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值,分别是none(不缓冲)、metadata(仅仅缓冲视频文件的元数据)、auto(可以缓冲整个文件)。
playsinline:iPhone 的 Sari 浏览器播放视频时,会自动全屏,该属性可以这种行为。该属性为布尔属性。
crossorigin:是否采用跨域的方式加载视频。它可以取两个值,分别是anonymous(跨域请求时,不发送用户凭证,主要是 Cookie),use-credentials(跨域时发送用户凭证)。
代码中,视频播放器的大小是 400 x 400,会自动播放和循环播放,并且静音,还带有封面图。这是网站首页背景视频的常见写法。
HTML 标准没有浏览器需要支持哪些视频格式,完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式,可以使用source标签,放置同一个视频的多种格式。
代码中,source标签的type属性的值是视频文件的 MIME 类型,上例指定了两种格式的视频文件:MP4 和 WebM。如果浏览器支持 MP4,就加载 MP4 格式的视频,不再往下执行了。如果不支持 MP4,就检查是否支持 WebM,如果还是不支持,则显示提示。
audio标签是一个块级元素,用于放置音频,用法与video标签基本一致。
代码中,脖子上有痣代表什么audio标签内部使用source标签,指定了两种音频格式:优先使用 MP3 格式,如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频,则提供下载链接。
track标签用于指定视频的字幕,格式是 WebVTT (.vtt文件),放置在video标签内部。它是一个单独使用的标签,没有结束标签。
embed标签用于嵌入外部内容,这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致,很可能不是所有浏览器的用户都能访问这部分内容,谨慎使用。
代码嵌入的视频,将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件,视频就无法播放。
浏览器通过type属性得到嵌入资源的 MIME 类型,一旦该种类型已经被某个插件注册了,就会启动该插件,负责处理嵌入的资源。
代码中,如果浏览器没有安装 Flash 插件,就会提示去pluginspage属性指定的网址下载。
object标签作用跟embed相似,也是插入外部资源,由浏览器插件处理。它可以视为embed的替代品,有标准化行为,只限于插入少数几种通用资源,没有历史遗留问题,因此更推荐使用。
object标签是一个容器元素,内部可以使用param标签,给出插件所需要的运行参数。