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.rhkb.cn/news/503636.html

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

相关文章

数据结构与算法之二叉树: LeetCode 107. 二叉树的层序遍历 II (Ts版)

二叉树的层序遍历 II https://leetcode.cn/problems/binary-tree-level-order-traversal-ii/description/ 描述 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&a…

NOVA:AutoRegressive Video Generation Without Vector Quantization——自回归视频生成无需向量量化

这篇文章介绍了一种名为NOVA的新型自回归模型&#xff0c;用于高效的文本到图像和文本到视频生成。以下是文章的主要内容总结&#xff1a; 1. 研究背景与问题 自回归大语言模型&#xff08;LLMs&#xff09;在自然语言处理&#xff08;NLP&#xff09;中表现出色&#xff0c;但…

外驱功率管电流型PWM控制芯片CRE6281B1

CRE6281B1 是一款外驱功率管的高度集成的电流型PWM 控制 IC&#xff0c;为高性能、低待机功率、低成本、高效率的隔离型反激式开关电源控制器。在满载时&#xff0c;CRE6281B1工作在固定频率(65kHz)模式。在负载较低时&#xff0c;CRE6281B1采用节能模式&#xff0c;实现较高的…

C4D2025 win版本安装完无法打开,提示请将你的maxon App更新至最新版本,如何解决

最近安装C4D2025 win版本时&#xff0c;明明按步骤安装完成&#xff0c;结果打开提示提示请将你的maxon App更新至最新版本&#xff1f;遇到这种情况该如何解决呢。 一开始我的思路以为是旧版本没有删除干净&#xff0c;所以将电脑里有关maxon的软件插件都卸载了&#xff0c;重…

open61499符合新型工业控制测试要求吗

工业互联网产业联盟发起了一项新型工业控制产品测试活动&#xff0c;从官网上摘录了部分测试要求&#xff08;联盟动态-工业互联网产业联盟&#xff09;如下&#xff1a; 新型工业控制是通过有线无线混合组网、软硬件分层解耦和模块化功能调用、多层级算力通用底座&#xff0c…

119.使用AI Agent解决问题:Jenkins build Pipeline时,提示npm ERR! errno FETCH_ERROR

目录 1.Jenkins Build时的错误 2.百度文心快码AI智能体帮我解决 提问1&#xff1a;jenkins中如何配置npm的源 提问2&#xff1a;jenkins pipeline 类型为pipeline script from SCM时&#xff0c;如何配置npm源 3.最终解决方法-Jenkinsfile的修改 4.感触 1.Jenkins Build时…

Python学习笔记:显示进度条

文章目录 1. 安装progress包2. 编写程序,实现功能3. 运行程序,查看结果4. 实战小结1. 安装progress包 在Anaconda Prompt里执行命令:pip install progress -i https://pypi.tuna.tsinghua.edu.cn/simple 2. 编写程序,实现功能 创建显示进度条.py程序 """ 功…

搭建企业AI助理的创新应用与案例分析

在大健康零售行业&#xff0c;企业面临着日益增长的市场需求和复杂的供应链管理挑战。AI助理的应用不仅能够提升客户服务效率&#xff0c;还能优化供应链管理&#xff0c;降低运营成本。 一、AI助理在大健康零售行业的创新应用 个性化健康咨询 AI助理可以通过分析客户的健康…

poi-tl+kkviewfile实现生成pdf业务报告

需求背景&#xff0c;需要把ai生成的一些业务数据&#xff0c;生成一份pdf报告 需求分析 简单来说&#xff0c;就是json生成pdf的方案。 直接生成pdf。适合一些pdf样式简单的场景&#xff0c;一般就是纯文本按序渲染&#xff0c;或者是纯表格。如果需要一些复杂的排布&#x…

重温设计模式--13、策略模式

策略模式介绍 文章目录 策略模式介绍C 代码示例 策略模式是一种行为设计模式&#xff0c;它允许在运行时选择算法的行为。该模式将算法的定义和使用分离开来&#xff0c;使得算法可以独立于使用它的客户端而变化&#xff0c;提高了代码的灵活性和可维护性。 其主要包含以下几个…

nginx http反向代理

系统&#xff1a;Ubuntu_24.0.4 1、安装nginx sudo apt-get update sudo apt-get install nginx sudo systemctl start nginx 2、配置nginx.conf文件 /etc/nginx/nginx.conf&#xff0c;但可以在 /etc/nginx/sites-available/ 目录下创建一个新的配置文件&#xff0c;并在…

Sam Altman发布博客,回顾OpenAI九年历程,直言目标已瞄准ASI超级人工智能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

简单的jmeter数据请求学习

简单的jmeter数据请求学习 1.需求 我们的流程服务由原来的workflow-server调用wfms进行了优化&#xff0c;将wfms服务操作并入了workflow-server中&#xff0c;去除了原来的webservice服务调用形式&#xff0c;增加了并发处理&#xff0c;现在想测试模拟一下&#xff0c;在一…

C++编程基础之override关键字

在C中&#xff0c;override关键字用于显式地标识派生类中的成员函数是对基类中虚函数的重写&#xff0c;具有以下重要作用和使用说明&#xff1a; 作用 增强代码可读性&#xff1a;通过使用override关键字&#xff0c;能够清晰地向阅读代码的人表明该函数是有意重写基类中的虚…

Leecode刷题C语言之按键变更的次数

执行结果:通过 执行用时和内存消耗如下&#xff1a; int countKeyChanges(char* s) {int count0,i0;while(s[i]!\0){if((s[i]!s[i1])&&(s[i]!(s[i1]32))&&(s[i]!(s[i1]-32))&&s[i1]!0)count;i;}return count; }解题思路&#xff1a; 初始化变量&…

免费一键图片转3D模型,AI建模,一键把图片转三维模型,二维图片转3维模型,AI建模

免费一键图片转3D模型&#xff0c;AI建模&#xff0c;一键把图片转三维模型&#xff0c;二维图片转3维模型,AI建模&#xff0c;公测版&#xff0c;每天不定时免费开放&#xff0c;非常强大 1咱们先打开ai.glbxz.com http://ai.glbxz.com 22 2导入图片。支持单张和多张图片生成…

vue3中el-table实现多表头并表格合并行或列

1、el-table中添加事件 :span-method"genderSpanCity" <el-table :span-method"genderSpanCity":data"data.tableData":fit"true" table-layout"fixed" header-align"center" stripestyle"width:100%;he…

GOAT‘S AI早鸟报Part9

资讯 英伟达重磅发布5090&#xff0c;定价15000 老黄重磅发布5090&#xff0c;定价15000&#xff01;22000元的世界最小AI超级计算机也来了 英伟达在CES发布了最新的GPU——RTX 5090&#xff0c;采用Blackwell架构&#xff0c;具备920亿个晶体管&#xff0c;4000 AI TOPS的AI…

【STM32+CubeMX】 新建一个工程(STM32F407)

相关文章&#xff1a; 【HAL库】 STM32CubeMX 教程 1 --- 下载、安装 目录 第一部分、新建工程 第二部分、工程文件解释 第三部分、编译验证工程 友情约定&#xff1a;本系列的前五篇&#xff0c;为了方便新手玩家熟悉CubeMX、Keil的使用&#xff0c;会详细地截图每一步Cu…

HTML5实现喜庆的新年快乐网页源码

HTML5实现喜庆的新年快乐网页源码 前言一、设计来源1.1 主界面1.2 关于新年界面1.3 新年庆祝活动界面1.4 新年活动组织界面1.5 新年祝福订阅界面1.6 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 HTML5实现喜庆的新年快乐网页源码&#xff0c;春节新年网…