html插入flash代码_HTML从零开始——多媒体和iframe标签

4bc5a2417e6a6f1783eb3d93c277ff4c.png

网页从文本走来,经过了纯文字、富文本、图文等等过程,展现力越来越强,同时也逐渐的提出了多媒体的需求,比如在页面上增加音乐,为了展现某一个不容易用文字描述的场景、动作等等,需要视频,所以就引入了多媒体标签。

有些时候,还需要从其他地方引用内容,则iframe标签就是个很常见的方式了。

接下来就看看这两类标签。


1 <video>

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

<

b703b30e94e7a39d29ae7584dd0342d5.png

上面代码中,如果浏览器不支持该种格式的视频,就会显示<video>内部的文字提示。

<video>有以下属性:

  • src:视频文件的网址。
  • controls:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。
  • width:视频播放器的宽度,单位像素。
  • height:视频播放器的高度,单位像素。
  • autoplay:视频是否自动播放,该属性为布尔属性。
  • loop:视频是否循环播放,该属性为布尔属性。
  • muted:是否默认静音,该属性为布尔属性。
  • poster:视频播放器的封面图片的 URL。
  • preload:视频播放之前,是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值,分别是none(不缓冲)、metadata(仅仅缓冲视频文件的元数据)、auto(可以缓冲整个文件)。
  • playsinlineiPhone Safari 浏览器播放视频时,会自动全屏,该属性可以禁止这种行为。该属性为布尔属性。
  • crossorigin:是否采用跨域的方式加载视频。它可以取两个值,分别是anonymous(跨域请求时,不发送用户凭证,主要是 Cookie),use-credentials(跨域时发送用户凭证)。
  • currentTime:指定当前播放位置(双精度浮点数,单位为秒)。如果尚未开始播放,则会从这个属性指定的位置开始播放。
  • duration:该属性只读,指示时间轴上的持续播放时间(总长度),值为双精度浮点数(单位为秒)。如果是流媒体,没有已知的结束时间,属性值为+Infinity

下面是一个例子:

<

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

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

<

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

2 <audio>

<audio>标签是一个块级元素,用于放置音频,用法与<video>标签基本一致:

<

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

如果没有对应的音频文件,则只会显示出音频控件:

f105d4727539da90c5e1f0455ff8cc4e.png

<audio>标签的属性与<video>标签类似,参见上一节:

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

3 <track>

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

<

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

<track>标签有以下属性。

  • label:播放器显示的字幕名称,供用户选择。
  • kind:字幕的类型,默认是subtitles,表示将原始声音成翻译外国文字,比如英文视频提供中文字幕。另一个常见的值是captions,表示原始声音的文字描述,通常是视频原始使用的语言,比如英文视频提供英文字幕。
  • srcvtt 字幕文件的网址。
  • 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:显示高度,单位为像素,不允许百分比。
  • width:显示宽度,单位为像素,不允许百分比。
  • 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:资源的显示高度,单位为像素,不能使用百分比。
  • width:资源的显示宽度,单位为像素,不能使用百分比。
  • type:资源的 MIME 类型。
  • typemustmatch:布尔属性,表示data属性与type属性是否必须匹配。

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

<

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

<

7 iframe标签的基本用法

<iframe>标签生成一个指定区域,在该区域中嵌入其他网页。它是一个容器元素,如果浏览器不支持<iframe>,就会显示内部的子元素:

<

上面的代码在当前网页嵌入https://www.example.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>标签的介绍。

8 sandbox 属性

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

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

<

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:允许在用户激动的情况下,嵌入的网页通过 Storage Access API 访问父窗口的储存。
  • allow-top-navigation:允许嵌入的网页对顶级窗口进行导航。
  • allow-top-navigation-by-user-activation:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。
  • allow-downloads-without-user-activation:允许在没有用户激活的情况下,嵌入的网页启动下载。

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

9 loading 属性

<iframe>指定的网页会立即加载,有时这不是希望的行为。<iframe>滚动进入视口以后再加载,这样会比较节省带宽。

loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值:

  • auto:浏览器的默认行为,与不使用loading属性效果相同。
  • lazy<iframe>的懒加载,即将滚动进入视口时开始加载。
  • eager:立即加载资源,无论在页面上的位置如何。
<

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

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

  • <iframe>的宽度和高度为4像素或更小。
  • 样式设为display: nonevisibility: hidden
  • 使用定位坐标为负X或负Y,将<iframe>放置在屏幕外。
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页