6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记06-多媒体/iframe

2022-04-15 0 24 web前端社区

6.jpg 0 前端程序猿

多媒体标签

video

<video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

  1. <video src="example.mp4" controls>
  2.   <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
  3. </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（跨域时发送用户凭证）。
  • currentTime：指定当前播放位置（双精度浮点数，单位为秒）。如果尚未开始播放，则会从这个属性指定的位置开始播放。
  • duration：该属性只读，指示时间轴上的持续播放时间（总长度），值为双精度浮点数（单位为秒）。如果是流媒体，没有已知的结束时间，属性值为+Infinity。
  1. <video width="400" height="400"
  2.        autoplay loop muted
  3.        poster="poster.png">
  4. </video>

视频播放器的大小是 400 x 400，会自动播放和循环播放，并且静音，还带有封面图。这是网站首页背景视频的常见写法。

HTML 标准没有规定浏览器需要支持哪些视频格式，完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式，可以使用<source>标签，放置同一个视频的多种格式。

  1. <video controls>
  2.   <source src="example.mp4" type="video/mp4">
  3.   <source src="example.webm" type="video/webm">
  4.   <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
  5. </video>

<source>标签的type属性的值是视频文件的 MIME 类型，上例指定了两种格式的视频文件：MP4 和 WebM。如果浏览器支持 MP4，就加载 MP4 格式的视频，不再往下执行了。如果不支持 MP4，就检查是否支持 WebM，如果还是不支持，则显示提示。

audio

  1. <audio controls>
  2.   <source src="foo.mp3" type="audio/mp3">
  3.   <source src="foo.ogg" type="audio/ogg">
  4.   <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p>
  5. </audio>

上面代码中，<audio>标签内部使用<source>标签，指定了两种音频格式：优先使用 MP3 格式，如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频，则提供下载链接。

  • autoplay：是否自动播放，布尔属性。
  • controls：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。
  • crossorigin：是否使用跨域方式请求。
  • loop：是否循环播放，布尔属性。
  • muted：是否静音，布尔属性。
  • preload：音频文件的缓冲设置。
  • src：音频文件网址。

track

<track>标签用于指定视频的字幕，格式是 WebVTT （.vtt文件），放置在<video>标签内部。它是一个单独使用的标签，没有结束标签。

  1. <video controls src="sample.mp4">
  2.    <track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en">
  3.    <track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
  4. </video>

上面代码指定视频文件的英文字幕和中文字幕。

<track>标签有以下属性。

  • label：播放器显示的字幕名称，供用户选择。
  • kind：字幕的类型，默认是subtitles，表示将原始声音成翻译外国文字，比如英文视频提供中文字幕。另一个常见的值是captions，表示原始声音的文字描述，通常是视频原始使用的语言，比如英文视频提供英文字幕。
  • src：vtt 字幕文件的网址。
  • srclang：字幕的语言，必须是有效的语言代码。
  • default：是否默认打开，布尔属性。

source

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

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

embed

一般不用
<embed>标签用于嵌入外部内容，这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致，很可能不是所有浏览器的用户都能访问这部分内容，建议谨慎使用。

下面是嵌入视频播放器的例子。

  1. <embed type="video/webm"
  2.        src="/media/examples/flower.mp4"
  3.        width="150"
  4.        height="100">

上面代码嵌入的视频，将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件，视频就无法播放。

<embed>标签具有如下的通用属性。

  • height：显示高度，单位为像素，不允许百分比。
  • width：显示宽度，单位为像素，不允许百分比。
  • src：嵌入的资源的 URL。
  • type：嵌入资源的 MIME 类型。

浏览器通过type属性得到嵌入资源的 MIME 类型，一旦该种类型已经被某个插件注册了，就会启动该插件，负责处理嵌入的资源。

下面是 QuickTime 插件播放 MOV 视频文件的例子。

  1. <embed type="video/quicktime" src="movie.mov" width="640" height="480">

下面是启动 Flash 插件的例子。

  1. <embed src="whoosh.swf" quality="medium"
  2.        bgcolor="#ffffff" width="200" height="100"
  3.        name="whoosh" align="middle" allowScriptAccess="sameDomain"
  4.        allowFullScreen="false" type="application/x-shockwave-flash"
  5.        pluginspage="http://www.macromedia.com/go/getflashplayer">

上面代码中，如果浏览器没有安装 Flash 插件，就会提示去pluginspage属性指定的网址下载。

object，param

一般不用。

<object>标签作用跟<embed>相似，也是插入外部资源，由浏览器插件处理。它可以视为<embed>的替代品，有标准化行为，只限于插入少数几种通用资源，没有历史遗留问题，因此更推荐使用。

下面是插入 PDF 文件的例子。

  1. <object type="application/pdf"
  2.     data="/media/examples/In-CC0.pdf"
  3.     width="250"
  4.     height="200">
  5. </object>

上面代码中，如果浏览器安装了 PDF 插件，就会在网页显示 PDF 浏览窗口。

<object>具有如下的通用属性。

  • data：嵌入的资源的 URL。
  • form：当前网页中相关联表单的id属性（如果有的话）。
  • height：资源的显示高度，单位为像素，不能使用百分比。
  • width：资源的显示宽度，单位为像素，不能使用百分比。
  • type：资源的 MIME 类型。
  • typemustmatch：布尔属性，表示data属性与type属性是否必须匹配。

下面是插入 Flash 影片的例子。

  1. <object data="movie.swf"
  2.   type="application/x-shockwave-flash"></object>

<object>标签是一个容器元素，内部可以使用<param>标签，给出插件所需要的运行参数。

  1. <object data="movie.swf" type="application/x-shockwave-flash">
  2.   <param name="foo" value="bar">
  3. </object>

Iframe

  1. <iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。
  1. <iframe src="https://www.8i98.com"
  2.         width="100%" height="500" frameborder="0"
  3.         allowfullscreen sandbox>
  4.   <p><a href="https://www.8i98.com">点击打开嵌入页面</a></p>
  5. </iframe>

上面的代码在当前网页嵌入https://www.8i98.com，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<iframe>，则会显示一个链接，让用户点击。

浏览器普遍支持<iframe>，所以内部的子元素可以不写。

<iframe>的属性如下。

  • allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。
  • frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。
  • src：嵌入的网页的 URL。
  • width：显示区域的宽度。
  • height：显示区域的高度。
  • sandbox：设置嵌入的网页的权限，详见下文。
  • importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。
  • name：内嵌窗口的名称，可以用于<a>、<form>、<base>的target属性。
  • referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见<a>标签的介绍。

sandbox 属性

默认可以不用设置。
嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe>的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。

sandbox可以当作布尔属性使用，表示打开所有限制。

  1. <iframe src="https://www.8i98.com" sandbox></iframe>

sandbox属性可以设置具体的值，表示逐项打开限制。未设置某一项，就表示不具有该权限。

  • allow-forms：允许提交表单。
  • allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。
  • allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。
  • allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。
  • allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。
  • allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。
  • allow-presentation：允许嵌入的网页使用 Presentation API。
  • allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。
  • allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。
  • allow-storage-access-by-user-activation：sandbox属性同时设置了这个值和allow-same-origin的情况下，允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求，经由 Storage Access API 访问父窗口的 Cookie。
  • allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。
  • allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。
  • allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。

loading 属性

  3. `loading`属性可以触发`<iframe>`网页的懒加载。该属性可以取以下三个值。
  6. - `auto`：浏览器的默认行为，与不使用`loading`属性效果相同。
  7. - `lazy`：`<iframe>`的懒加载，即将滚动进入视口时开始加载。
  8. - `eager`：立即加载资源，无论在页面上的位置如何。


```

上面代码会启用<iframe>的懒加载。

有一点需要注意，如果<iframe>是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为<iframe>是隐藏的。

  • <iframe>的宽度和高度为4像素或更小。
  • 样式设为display: none或visibility: hidden。
  • 使用定位坐标为负X或负Y，将<iframe>放置在屏幕外。
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3