HTML-多媒体标签

除了图像,网页还可以放置视频和音频。

1.<video>

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

<video src="example.mp4" controls><p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件</a>。</p>
</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

下面是一个例子。

<video width="400" height="400"autoplay loop mutedposter="poster.png">
</video>

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

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

<video controls><source src="example.mp4" type="video/mp4"><source src="example.webm" type="video/webm"><p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件</a>。</p>
</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"><p>你的浏览器不支持 HTML5 音频,请直接下载<a href="foo.mp3">音频文件</a>。</p>
</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>

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

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

<embed type="video/webm"src="/media/examples/flower.mp4"width="250"height="200">

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

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

  • height:显示高度,单位为像素,不允许百分比。
  • width:显示宽度,单位为像素,不允许百分比。
  • 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>

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

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

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

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

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

  • data:嵌入的资源的 URL。
  • form:当前网页中相关联表单的id属性(如果有的话)。
  • height:资源的显示高度,单位为像素,不能使用百分比。
  • width:资源的显示宽度,单位为像素,不能使用百分比。
  • 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/65561.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】Linux常见指令(上)

个人主页~ 初识Linux 一、Linux基本命令1、ls指令2、pwd命令3、cd指令4、touch指令5、mkdir指令6、rmdir指令7、rm指令8、man指令9、cp指令10、mv命令 Linux是一个开源的、稳定的、安全的、灵活的操作系统&#xff0c;Linux下的操作都是通过指令来实现的 一、Linux基本命令 先…

【Vue.js 组件化】高效组件管理与自动化实践指南

文章目录 摘要引言组件命名规范与组织结构命名规范目录组织 依赖管理工具自动化组件文档生成构建自动引入和文档生成的组件化体系代码结构自动引入组件配置使用 Storybook 展示组件文档自动生成 代码详解QA 环节总结参考资料 摘要 在现代前端开发中&#xff0c;组件化管理是 V…

Golang环境配置on Macbook Air M2

Golang环境配置on Macbook Air M2 你好Go配置环境变量验证vscode插件安装将文件夹添加到工作区并保存go包管理 你好Go 去官网下载go的对应版本 配置环境变量 新建配置文件 vim &#xff5e;/.bash_profile #注意号前后不能有空格 export GOPATH/Users/xxxx/xxxxx/Go_Works/…

【Arthas命令实践】heapdump实现原理

&#x1f3ae; 作者主页&#xff1a;点击 &#x1f381; 完整专栏和代码&#xff1a;点击 &#x1f3e1; 博客主页&#xff1a;点击 文章目录 使用原理 使用 dump java heap, 类似 jmap 命令的 heap dump 功能。 【dump 到指定文件】 heapdump arthas-output/dump.hprof【只 …

智能控制器开发项目-项目章程

目录 1. 项目目的或理由 2. 项目描述 3. 高水平项目和产品需求 3.1项目需求&#xff1a; 3.2产品需求&#xff1a; 4. 总预算 5. 启动风险 6.里程碑总表 7.项目目标与成功标准 8. 验收标准 9. 项目经理职权层级 项目名称&#xff1a;智能控制器开发项目 项目发起人…

继承(补充)

大家好&#xff0c;今天补充一下继承上执行顺序的一点知识点&#xff0c;&#xff08;编者这两天要完成学院任务可能有点敷衍&#xff0c;抱歉抱歉&#xff09;&#xff0c;那么我们来看看。 [继承关系上的执行顺序] 1、父类静态代码优先于子类静态代码块执行,且是最早执行. …

IOMMU PT

什么是 IOMMU PT IOMMU PT&#xff08;Input/Output Memory Management Unit - Pass-Through&#xff09;是一种技术&#xff0c;主要用于虚拟化环境中&#xff0c;特别是在使用直接设备分配&#xff08;也称为设备直通&#xff09;的情况下。这项技术允许虚拟机直接访问物理硬…

如何解决HTML和CSS相关情况下会导致页面布局不稳定?

在实际开发过程中&#xff0c;HTML 和 CSS 的布局可能会出现不稳定的情况&#xff0c;导致页面显示混乱、错位或者不如预期。以下是一些常见原因及实际项目中的代码示例&#xff0c;帮助你理解如何避免这些问题。 1. 浮动元素未清除 (float 未清除) 问题&#xff1a;使用浮动…

【Rust自学】11.5. 在测试中使用Result<T, E>

喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.5.1. 测试函数返回值为Result枚举 到目前为止&#xff0c;测试运行失败的原因都是因为触…

【HTML+CSS+JS+VUE】web前端教程-16-HTML5新增标签

扩展知识 div容器元素,也是页面中见到的最多的元素 div实现

python学习笔记—16—数据容器之元组

1. 元组——tuple(元组是一个只读的list) (1) 元组的定义注意&#xff1a;定义单个元素的元组&#xff0c;在元素后面要加上 , (2) 元组也支持嵌套 (3) 下标索引取出元素 (4) 元组的相关操作 1. index——查看元组中某个元素在元组中的位置从左到右第一次出现的位置 t1 (&qu…

设计模式-结构型-桥接模式

1. 什么是桥接模式&#xff1f; 桥接模式&#xff08;Bridge Pattern&#xff09; 是一种结构型设计模式&#xff0c;它旨在将抽象部分与实现部分分离&#xff0c;使它们可以独立变化。通过这种方式&#xff0c;系统可以在抽象和实现两方面进行扩展&#xff0c;而无需相互影响…

Linux 虚拟机与windows主机之间的文件传输--设置共享文件夹方式

Linux 虚拟机与windows主机之间的文件传输 设置共享文件夹方式 在虚拟机中打开终端查看是否已经新建完成&#xff0c;到文件夹中找到它看一下&#xff0c;这个位置就能存储东西啦

关于linux网桥(Linux Bridge)的一些个人记录

文章目录 1. Linux Bridge简述2. 网桥创建创建配置持久化在Debian/Ubuntu系统上&#xff1a;在CentOS/RHEL系统上&#xff1a; 启用和验证 3. 关于linux网桥不转发ip帧的问题原因解决配置持久化 4. 查看网桥学习交换表手动添加或删除条目添加条目删除条目 配置静态条目设置条目…

期末概率论总结提纲(仅适用于本校,看文中说明)

文章目录 说明A选择题1.硬币2.两个事件的关系 与或非3.概率和为14.概率密度 均匀分布5.联合分布率求未知参数6.联合分布率求未知参数7.什么是统计量&#xff08;记忆即可&#xff09;8.矩估计量9.117页12题10.显著水平阿尔法&#xff08;背公式就完了&#xff09; 判断题11.事件…

Inno Setup制作安装包,安装给win加环境变量

加 ; 加环境变量&#xff0c;开启&#xff0c;下面一行 ChangesEnvironmentyes 和 ; 加环境变量wbrj变量名&#xff0c;{app}\project\bin变量值&#xff0c;{app}\后接文件名&#xff0c;{app}表示安装路径。下面一行,{olddata};原来的值上拼接 Root: HKLM; Subkey: “SYSTEM\…

Golang学习笔记_23——error补充

Golang学习笔记_20——error Golang学习笔记_21——Reader Golang学习笔记_22——Reader示例 文章目录 error补充1. 基本错误处理2. 自定义错误3. 错误类型判断3.1 类型断言3.2 类型选择 4. panic && recover 源码 error补充 1. 基本错误处理 在Go中&#xff0c;函数…

Python中的asyncio:高效的异步编程模型

随着互联网应用的快速发展&#xff0c;程序的响应性和处理效率成为衡量系统性能的重要指标。传统的同步编程模型在面对高并发和IO密集型任务时&#xff0c;常常显得捉襟见肘&#xff0c;难以满足现代应用的需求。Python的asyncio库作为一种高效的异步编程模型&#xff0c;为开发…

JavaScript -- 数组详解(使用频率高)【数组专题】

文章目录 前言一、创建数组1.1 使用Array构造函数1.2 使用数组字面量表示法1.3 ES6语法转换数组1.3.1 from( )用于将类数组结构转换为数组实例1.3.2 of( )用于将一组参数转换为数组实例 二、数组常用方法2.1 复制和填充2.1.1 copyWithin( )2.1.2 fill( ) 2.2 数组转换2.2.1 toS…

操作系统之文件系统的基本概念

目录 用户和磁盘视角的文件 文件控制块&#xff08;FCB&#xff09;和索引结点&#xff08;inode&#xff09; 文件的操作 创建文件&#xff08;create系统调用&#xff09; 写文件&#xff08;write系统调用&#xff09; 读文件&#xff08;read系统调用&#xff09; 重…