HTML学习笔记十

系列笔记目录

在这里插入图片描述

第一章 HTML的概述
第二章 URL简介
第三章 网页元素的属性
第四章 html字符编码
第五章 网页的语义结构
第六章 文本标签
第七章 列表标签
第八章 图像标签
第九章 链接标签
第十章 多媒体标签


多媒体标签

  • 系列笔记目录
  • 前言
  • 一、简介
  • 二、常用标签
    • 2.1`<video>`
    • 2.2 `<audio>`
    • 2.3 `<source>`总结
    • 2.4 `<embed>`
    • 2.5 `<object>`,`<param>`


前言

此为读阮一峰先生的《HTML语言教程》所作的个人学习笔记,朋友们如有兴趣可直接跳转链接进行学习。
同时推荐一个学习网站进击的皇虫的书栈网,网站界面友好简洁,IT技术领域的书籍和文档可谓保罗万象,学习这一站足矣。

一、简介

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

二、常用标签

2.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>

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

(1)source标签

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)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:是否默认打开,布尔属性。

2.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:音频文件网址。

2.3 <source>总结

<source>标签用于<picture><video><audio>的内部,用于指定一项外部资源。单标签是单独使用的,没有结束标签。

它有如下属性,具体示例请参见相应的容器标签。

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

2.4 <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属性指定的网址下载。

2.5 <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/463537.html

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

相关文章

Thumb 汇编指令集,Thumb 指令编码方式,编译 Thumb 汇编代码

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ Thumb指令集 ARM 指令集&#xff1a;最早在 1985 年随第一代 ARM 处理器问世。ARM 指令集一开始是 32 位固定长度的指令&#xff0c;用于各种计算任务。 Thu…

【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画 在移动应用开发中&#xff0c;加载动画是提升用户体验的重要工具。在应用程序处理数据或加载页面时&#xff0c;为用户提供视觉反馈尤为关键。在这篇博客中&#xff0c;我们将探讨如何在 HarmonyOS NEXT 中使用 Sta…

Redis高级篇之缓存一致性详细教程

文章目录 0 前言1.缓存双写一致性的理解1.1 缓存按照操作来分 2. 数据库和缓存一致性的几种更新策略2.1 可以停机的情况2.2 我们讨论4种更新策略2.3 解决方案 总结 0 前言 缓存一致性问题在工作中绝对没办法回避的问题&#xff0c;比如&#xff1a;在实际开发过程中&#xff0c…

C++_day2

目录 1. 引用 reference&#xff08;重点&#xff09; 1.1 基础使用 1.2 特性 1.3 引用参数 2. C窄化&#xff08;了解&#xff09; 3. 输入&#xff08;熟悉&#xff09; 4. string 字符串类&#xff08;掌握&#xff09; 4.1 基础使用 4.2 取出元素 4.3 字符串与数字转换 5. …

Vuex的基本使用

文章目录 一、Vuex概述1.是什么2.使用场景3.优势4.注意二、如何构建vuex多组件共享数据环境1.创建项目2.创建三个组件3.源代码三、vuex 的使用 - 创建仓库1.安装 vuex2.新建 `store/index.js` 专门存放 vuex3.创建仓库 `store/index.js`4 在 main.js 中导入挂载到 Vue 实例上5.…

WPF+MVVM案例实战(二十一)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

揭开广告引擎的神秘面纱:如何在0.1秒内精准匹配用户需求?

目录 一、广告系统与广告引擎介绍 &#xff08;一&#xff09;广告系统与广告粗分 &#xff08;二&#xff09;广告引擎在广告系统中的重要性分析 二、广告引擎整体架构和工作过程 &#xff08;一&#xff09;一般概述 &#xff08;二&#xff09;核心功能架构图 三、标…

[论文阅读]A Survey of Embodied Learning for Object-Centric Robotic Manipulation

Abstract --以对象为中心的机器人操纵的Embodied learning是体现人工智能中一个快速发展且具有挑战性的领域。它对于推进下一代智能机器人至关重要&#xff0c;最近引起了人们的极大兴趣。与数据驱动的机器学习方法不同&#xff0c;具身学习侧重于通过与环境的物理交互和感知反…

NFTScan Site:以蓝标认证与高级项目管理功能赋能 NFT 项目

自 NFTScan Site 上线以来&#xff0c;它迅速成为 NFT 市场中的一支重要力量&#xff0c;凭借对各类 NFT 集合、市场以及 NFTfi 项目的认证获得了广泛认可。这个平台帮助许多项目提升了曝光度和可见性&#xff0c;为它们在竞争激烈的 NFT 市场中创造了更大的成功机会。 在最新更…

指数分布的原理和应用

本文介绍指数分布&#xff0c;及其推导原理。 Ref: 指数分布 开始之前&#xff0c;先看个概率密度函数的小问题&#xff1a; 问题描述&#xff1a;你于上午10点到达车站&#xff0c;车在10点到10:30 之间到达的时刻 X 的概率密度函数如图&#xff1a; 则使用分段积分&#xff0…

Javase——正则表达式

正则表达式的相关使用 public static void main(String[] args) {//校验QQ号 System.out.println("3602222222".matches("[1-9][0-9]{4,}"));// 校验18位身份证号 System.out.println("11050220240830901X".matches("^([0-9]){7,18}…

安装中文版 Matlab R2022a

下载安装包 压缩包有点大&#xff0c;大概20G 百度网盘&#xff1a;下载链接 提取码&#xff1a;rmja 安装 解压后打开目录&#xff0c;右键以管理员身份运行 setup.exe 选择输入安装秘钥 输入秘钥&#xff1a; 50874-33247-14209-37962-45495-25133-28159-33348-18070-6088…

SICTF Round #4|MISC

1.派森 腐乳昂木 奥普瑞特儿 阴坡尔特 艾克斯奥尔 腐乳昂木 提克有第爱慕 阴坡尔特 ⭐ 弗拉格 等于 布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉 印刻 等于 左中括号右中括号 佛儿 唉 因 梯软者左括号 零&#xff0c;楞左括号弗拉格右…

保研考研机试攻略:python笔记(2)

&#x1f428;&#x1f428;&#x1f428;宝子们好呀&#xff0c;今天我们继续来学习N诺提供的python笔记&#xff0c;fighting&#xff01;( •̀ ω •́ )✧ 对这个系列感兴趣的宝子欢迎关注保研考研机试攻略专栏哦 ~ 目录 &#x1f428;&#x1f428;&#x1f428;4进制转…

Hyper-V 安装 KylinOS V10【图文教程】

文章目录 下载 KylinOSHyper-V 安装 KylinOS新建虚拟机配置虚拟机启动虚拟机并配置下载 KylinOS KylinOS 没有直接提供下载地址,需要在页面上点试用,填写个人信息后,才能看到下载地址。 https://www.kylinos.cn/support/trial.html?trial=425887 试用地址:产品试用申请国…

LeetCode 0685.冗余连接 II:并查集(和I有何不同分析)——详细题解(附图)

【LetMeFly】685.冗余连接 II&#xff1a;并查集&#xff08;和I有何不同分析&#xff09;——详细题解(附图) 力扣题目链接&#xff1a;https://leetcode.cn/problems/redundant-connection-ii/ 在本问题中&#xff0c;有根树指满足以下条件的 有向 图。该树只有一个根节点&…

mysql查表相关练习

作业要求&#xff1a; 单表练习&#xff1a; 1 . 查询出部门编号为 D2019060011 的所有员工 2 . 所有财务总监的姓名、编号和部门编号。 3 . 找出奖金高于工资的员工。 4 . 找出奖金高于工资 40% 的员工。 5 找出部门编号为 D2019090011 中所有财务总监&#xff0c;和…

GHuNeRF: Generalizable Human NeRF from a Monocular Video

研究背景 研究问题&#xff1a;这篇文章要解决的问题是学习一个从单目视频中泛化的人类NeRF模型。尽管现有的泛化人类NeRF已经取得了令人印象深刻的成果&#xff0c;但它们需要多视图图像或视频&#xff0c;这在某些情况下可能不可用。此外&#xff0c;一些基于单目视频的人类…

Linux - grep的正则用法

新建u.txt&#xff0c;文本内容如图&#xff1a; 搜寻特定字符串 利用中括号[]搜寻集合字符 行首与行位字符^$ 任意一个字符.与重复字符*限定连续RE字符范围{} 总结: