【HTML 教程】多媒介标签

nykek5i · 发表于 2024-10-3 11:13:27

作者 | 阮一峰除了图像，网页还能够安置视频和音频。

1、<video>

<video>标签是一个块级元素，用于安置视频。倘若浏览器支持加载的视频格式，就会表示一个播放器，否则表示<video>内部的子元素。<video src="example.mp4" controls> 你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</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（跨域时发送用户凭证）。

下面是一个例子。<video width="400" height="400" autoplay loop muted poster="poster.png"></video>上面代码中，视频播放器的体积是 400 x 400，会自动播放和循环播放，并且静音，还带有封面图。这是网站首页背景视频的平常写法。HTML 标准无规定浏览器需要支持那些视频格式，完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式，能够运用<source>标签，安置同一个视频的多种格式。<video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> 你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</video>上面代码中，<source>标签的type属性的值是视频文件的 MIME 类型，上例指定了两种格式的视频文件：MP4 和 WebM。倘若浏览器支持 MP4，就加载 MP4 格式的视频，再也不往下执行了。倘若不支持 MP4，就检测是不是支持 WebM，倘若还是不支持，则表示提示。

2、<audio>

<audio>标签是一个块级元素，用于安置音频，用法与<video>标签基本一致。<audio controls> <source src="foo.mp3" type="audio/mp3"> <source src="foo.ogg" type="audio/ogg"> 你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</audio>上面代码中，<audio>标签内部运用<source>标签，指定了两种音频格式：优先运用 MP3 格式，倘若浏览器不支持则运用 Ogg 格式。倘若浏览器不可播放音频，则供给下载链接。<audio>标签的属性与<video>标签类似，参见上一节。

autoplay：是不是自动播放，布尔属性。

controls：是不是表示播放工具栏，布尔属性。倘若不设置，浏览器不表示播放界面，一般用于背景音乐。

crossorigin：是不是运用跨域方式请求。

loop：是不是循环播放，布尔属性。

muted：是不是静音，布尔属性。

preload：音频文件的缓冲设置。

src：音频文件网址。

3、<track>

<track>标签用于指定视频的字幕，格式是 WebVTT （.vtt文件），安置在<video>标签内部。它是一个单独运用的标签，无结束标签。<video controls src="sample.mp4"> <track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en"> <track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default></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>

height：表示高度，单位为像素，不准许百分比。

weight：表示宽度，单位为像素，不准许百分比。

src：嵌入的资源的 URL。

type：嵌入资源的 MIME 类型。

浏览器经过type属性得到嵌入资源的 MIME 类型，一旦该种类型已然被某个插件注册了，就会起步该插件，负责处理嵌入的资源。下面是 QuickTime 插件播放 MOV 视频文件的例子。<embed type="video/quicktime" src="movie.mov" width="640" height="480">下面是起步 Flash 插件的例子。<embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">上面代码中，倘若浏览器无安装 Flash 插件，就会提示去pluginspage属性指定的网址下载。

6、<object>，<param>

data：嵌入的资源的 URL。

form：当前网页中关联联表单的id属性（倘若有的话）。

height：资源的表示高度，单位为像素，不可运用百分比。

weight：资源的表示宽度，单位为像素，不可运用百分比。

type：资源的 MIME 类型。

typemustmatch：布尔属性，暗示data属性与type属性是不是必须匹配。

下面是插进 Flash 影片的例子。<object data="movie.swf" type="application/x-shockwave-flash"></object><object>标签是一个容器元素，内部能够运用<param>标签，给出插件所需要的运行参数。<object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"></object>关联文案【HTML 教程】链接标签

		自动登录	找回密码
密码			立即注册