博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【HTML 教程】多媒体标签
阅读量:4116 次
发布时间:2019-05-25

本文共 2984 字,大约阅读时间需要 9 分钟。

640?wx_fmt=jpeg
作者 | 阮一峰
除了图像,网页还可以放置视频和音频。

1、<video>

<video> 标签是一个块级元素,用于放置视频。如果浏览器支持加载的视频格式,就会显示一个播放器,否则显示
<video> 内部的子元素。
上面代码中,如果浏览器不支持该种格式的视频,就会显示
<video> 内部的文字提示。
<video> 有以下属性。
  • src:视频文件的网址。

  • controls:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。

  • width:视频播放器的宽度,单位像素。

  • height:视频播放器的高度,单位像素。

  • autoplay:视频是否自动播放,该属性为布尔属性。

  • loop:视频是否循环播放,该属性为布尔属性。

  • muted:是否默认静音,该属性为布尔属性。

  • poster:视频播放器的封面图片的 URL。

  • preload:视频播放之前,是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值,分别是none(不缓冲)、metadata(仅仅缓冲视频文件的元数据)、auto(可以缓冲整个文件)。

  • playsinline:iPhone 的 Safari 浏览器播放视频时,会自动全屏,该属性可以禁止这种行为。该属性为布尔属性。

  • crossorigin:是否采用跨域的方式加载视频。它可以取两个值,分别是anonymous(跨域请求时,不发送用户凭证,主要是 Cookie),use-credentials(跨域时发送用户凭证)。

下面是一个例子。
上面代码中,视频播放器的大小是 400 x 400,会自动播放和循环播放,并且静音,还带有封面图。这是网站首页背景视频的常见写法。
HTML 标准没有规定浏览器需要支持哪些视频格式,完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式,可以使用
<source> 标签,放置同一个视频的多种格式。
上面代码中,
<source> 标签的
type 属性的值是视频文件的 MIME 类型,上例指定了两种格式的视频文件:MP4 和 WebM。如果浏览器支持 MP4,就加载 MP4 格式的视频,不再往下执行了。如果不支持 MP4,就检查是否支持 WebM,如果还是不支持,则显示提示。

2、<audio>

<audio> 标签是一个块级元素,用于放置音频,用法与
<video> 标签基本一致。
上面代码中,
<audio> 标签内部使用
<source> 标签,指定了两种音频格式:优先使用 MP3 格式,如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频,则提供下载链接。
<audio> 标签的属性与
<video> 标签类似,参见上一节。
  • autoplay:是否自动播放,布尔属性。

  • controls:是否显示播放工具栏,布尔属性。如果不设置,浏览器不显示播放界面,通常用于背景音乐。

  • crossorigin:是否使用跨域方式请求。

  • loop:是否循环播放,布尔属性。

  • muted:是否静音,布尔属性。

  • preload:音频文件的缓冲设置。

  • src:音频文件网址。

3、<track>

<track> 标签用于指定视频的字幕,格式是 WebVTT (
.vtt 文件),放置在
<video> 标签内部。它是一个单独使用的标签,没有结束标签。
上面代码指定视频文件的英文字幕和中文字幕。
<track> 标签有以下属性。
  • label:播放器显示的字幕名称,供用户选择。

  • kind:字幕的类型,默认是subtitles,表示将原始声音成翻译外国文字,比如英文视频提供中文字幕。另一个常见的值是captions,表示原始声音的文字描述,通常是视频原始使用的语言,比如英文视频提供英文字幕。

  • src:vtt 字幕文件的网址。

  • srclang:字幕的语言,必须是有效的语言代码。

  • default:是否默认打开,布尔属性。

4、<source>

<source> 标签用于
<picture>
<video>
<audio> 的内部,用于指定一项外部资源。单标签是单独使用的,没有结束标签。
它有如下属性,具体示例请参见相应的容器标签。
  • type:指定外部资源的 MIME 类型。

  • src:指定源文件,用于<video><audio>

  • srcset:指定不同条件下加载的图像文件,用于<picture>

  • media:指定媒体查询表达式,用于<picture>

  • sizes:指定不同设备的显示大小,用于<picture>,必须跟srcset搭配使用。

5、<embed>

<embed> 标签用于嵌入外部内容,这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致,很可能不是所有浏览器的用户都能访问这部分内容,建议谨慎使用。
下面是嵌入视频播放器的例子。
上面代码嵌入的视频,将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件,视频就无法播放。
<embed> 标签具有如下的通用属性。
  • height:显示高度,单位为像素,不允许百分比。

  • weight:显示宽度,单位为像素,不允许百分比。

  • src:嵌入的资源的 URL。

  • type:嵌入资源的 MIME 类型。

浏览器通过
type 属性得到嵌入资源的 MIME 类型,一旦该种类型已经被某个插件注册了,就会启动该插件,负责处理嵌入的资源。
下面是 QuickTime 插件播放 MOV 视频文件的例子。
下面是启动 Flash 插件的例子。
上面代码中,如果浏览器没有安装 Flash 插件,就会提示去
pluginspage 属性指定的网址下载。

6、<object>,<param>

<object> 标签作用跟
<embed> 相似,也是插入外部资源,由浏览器插件处理。它可以视为
<embed> 的替代品,有标准化行为,只限于插入少数几种通用资源,没有历史遗留问题,因此更推荐使用。
下面是插入 PDF 文件的例子。
上面代码中,如果浏览器安装了 PDF 插件,就会在网页显示 PDF 浏览窗口。
<object> 具有如下的通用属性。
  • data:嵌入的资源的 URL。

  • form:当前网页中相关联表单的id属性(如果有的话)。

  • height:资源的显示高度,单位为像素,不能使用百分比。

  • weight:资源的显示宽度,单位为像素,不能使用百分比。

  • type:资源的 MIME 类型。

  • typemustmatch:布尔属性,表示data属性与type属性是否必须匹配。

下面是插入 Flash 影片的例子。
<object> 标签是一个容器元素,内部可以使用
<param> 标签,给出插件所需要的运行参数。
  

相关文章

640?wx_fmt=jpeg
640?wx_fmt=png

转载地址:http://nyfpi.baihongyu.com/

你可能感兴趣的文章
web.py 0.3 新手指南 - 多数据库使用
查看>>
一步步开发 Spring MVC 应用
查看>>
python: extend (扩展) 与 append (追加) 的差别
查看>>
「译」在 python 中,如果 x 是 list,为什么 x += "ha" 可以运行,而 x = x + "ha" 却抛出异常呢?...
查看>>
浅谈JavaScript的语言特性
查看>>
LeetCode第39题思悟——组合总和(combination-sum)
查看>>
LeetCode第43题思悟——字符串相乘(multiply-strings)
查看>>
LeetCode第44题思悟——通配符匹配(wildcard-matching)
查看>>
LeetCode第45题思悟——跳跃游戏(jump-game-ii)
查看>>
LeetCode第46题思悟——全排列(permutations)
查看>>
LeetCode第47题思悟—— 全排列 II(permutations-ii)
查看>>
LeetCode第48题思悟——旋转图像(rotate-image)
查看>>
驱动力3.0,动力全开~
查看>>
记CSDN访问量10万+
查看>>
Linux下Oracle数据库账户被锁:the account is locked问题的解决
查看>>
记CSDN访问20万+
查看>>
Windows 环境下Webstorm 2020.3 版本在右下角找不到Git分支切换部件的一种解决方法
查看>>
Electron-Vue项目中遇到fs.rm is not a function问题的解决过程
查看>>
飞机换乘次数最少问题的两种解决方案
查看>>
有向无回路图的理解
查看>>