20.5 HTML 媒体
1. video视频标签
video视频标签: 是HTML中用于在网页上嵌入视频的元素.常用的视频标签属性:
- src属性: 指定视频文件的URL地址.
- controls属性: 用于显示视频播放控件(如播放按钮, 进度条等), 使用户能够控制视频的播放.
- width和height: 指定视频的宽度和高度.
- autoplay: 自动播放视频.
- loop: 循环播放视频.
- poster: 指定视频封面图像的URL地址. 当视频加载或播放出错时将显示该图像.
- preload: 指定视频在页面加载时是否预加载.
- muted: 静音播放视频.注意点:
* 1. chrome禁止了audio的autoplay属性.音频是静音状态, autoplay属性才可以生效. 可以播放, 不能干扰用户的听觉.
* 2. proload属性与autoplay属性有冲突, 如果设置了autiplay那么proload就会失效.video标签的基本用法示例: <video src="视频地址" controls></video> .
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media</title>
</head>
<body>
<!-- 视频在配套资源内 -->
<video src="video/movie.ogv" controls></video>
</body>
</html>
1.1 自动播放视频
设置autoplay属性自动播放后需要搭配muted属性静音.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media1</title>
</head>
<body>
<video src="video/movie.ogv" autoplay="autoplay" muted="muted"></video>
</body>
</html>
1.2 poster视频封面
使用<video>标签来嵌入视频时, 会经历加载的步骤.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media2</title>
</head>
<body><video src="video/movie.ogv" controls="controls" poster="image/xiongda.png" width="407" height="250"></video>
</body>
</html>
1.3 loop循环播放
循环播放需要搭配自动播放, 自动播放又需要搭配禁音.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media3</title>
</head>
<body>
<video src="video/movie.ogv" muted="muted" autoplay="autoplay" loop="loop"></video>
</body>
</html>
1.4 视频的宽度和高度
设置其中一个属性另一个会自动等比例缩放.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media</title>
</head>
<body>
<video src="video/movie.ogv" height="1080px" controls="controls"></video>
</body>
</html>
1.5 视频格式
不同浏览器厂商对于视频格式的支持确实不统一, 这可能导致某些视频在某些浏览器上无法兼容播放.为了解决这个问题. 使用HTML5的<video>标签是一种较好的选择.
<video>标签: 用于在网页上播放视频的标准元素, 它支持多种视频格式, 并且在现代浏览器中具有广泛的兼容性.<video>标签支持的三种常见视频格式:
* 1. WebM(.webm): 一种开放的视频格式, 通常用于使用VP8或VP9编码的Web视频.
* 2. Ogg(.ogg): 一种开放的多媒体容器格式, 通常用于包含Theora视频和Vorbis音频.
* 3. MPEG 4(.mp4): 一种常见的视频格式, 通常使用H.264编码, 同时支持AAC音频.为了确保视频在各种浏览器中具有良好的兼容性. 可以提供多个视频源, 并在<video>元素中使用<source>子元素来指定不同格式的视频文件.
浏览器将选择第一个支持的格式来播放视频.示例代码:
<video controls><source src="video.webm" type="video/webm"><source src="video.ogv" type="video/ogg"><source src="video.mp4" type="video/mp4">Your browser does not support the video tag.
</video>示例中, 可以提供名为video.webm, video.ogv, video.mp4的视频文件, 分别对应WebM、Ogg和MPEG-4格式.
如果浏览器支持其中一种格式, 它将选择并播放相应的视频.另外, 如果旧版本的浏览器不支持HTML5的<video>元素, 可以使用JavaScript库(如html5media)来提供降级方案, 使其在这些浏览器上能够播放
这些库通常会检测浏览器的功能并选择适当的解决方案, 例如使用Flash来播放视频.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media5</title>
</head>
<body>
<video controls="controls"><source src="video/movie.mp4" type="video/mp4"><source src="video/movie.ogv" type="video/ogg"><source src="video/movie.webm" type="video/webm">
</video>
</body>
</html>
2. audio音频标签
<audio>标签: 用于在网页上播放音频的标准元素.
它提供了一种简单的方式来嵌入音频文件, 并允许用户控制音频的播放, 暂停, 音量等.常用的音频标签属性:
* 1. autoplay属性: 该属性用于自动播放音频. 当页面加载完成后, 音频会自动开始播放. 然而, 需要注意的是, 具有此属性的自动播放功能在某些浏览器中可能会被禁用, 因为自动播放功能经常被滥用并被认为是打扰用户体验的元素.* 2. controls属性: 该属性用于显示音频播放器的控制条组件.这些组件包括播放, 暂停按钮, 音量控制, 进度条等, 使用户可以控制音频的播放和暂停, 调整音量等.* 3. loop属性: 该属性用于使音频文件自动循环播放.当音频播放结束时, 它将自动重新开始播放, 形成一个循环.示例:
<audio src="audio.mp3" controls autoplay loop>Your browser does not support the audio tag.
</audio>* 如果浏览器不支持<audio>标签或指定的音频格式, 将显示后备内容'Your browser does not support the audio tag.' .
<audio>标签支持的三种常见音频格式:* 1. Ogg(.ogg): 一种开放的音频容器格式, 通常使用Vorbis音频编码.它提供了比较高的音频质量和压缩效率, 是一种常见的音频格式.* 2. MP3(.mp3): 一种广泛使用的音频格式, 它使用了损耗压缩算法, 能够在保持相对较高音质的同时将音频文件大小减小.* 3. WAV(.wav): 这是一种无损音频格式, 它以原始的脉冲编码调制(PCM)数据存储音频.WAV文件通常比较大, 因为它们没有经过压缩.需要注意的是, 这些音频格式可以在大多数现代浏览器中正常工作, 但浏览器对音频格式的支持仍然可能存在差异.
因此, 为了提供更好的浏览器兼容性, 可以提供多个音频源, 并使用<source>元素为每个源文件指定不同的格式.示例代码:
<audio controls><source src="audio.ogg" type="audio/ogg"><source src="audio.mp3" type="audio/mpeg"><source src="audio.wav" type="audio/wav">Your browser does not support the audio tag.
</audio>示例中, 提供了三个不同格式的音频文件, 分别是Ogg, MP3和WAV.
如果浏览器支持其中一种格式, 它将选择并播放相应的音频文件.
如果浏览器不支持<audio>元素或指定的音频格式, 则会显示后备内容.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>audio</title>
</head>
<body>
<audio src="music/文艺复兴的浩宇.mp3" controls="controls"></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>audio2</title>
</head>
<body><audio controls="controls" loop="loop"><source src="music/文艺复兴的浩宇.mp3" type="audio/mp3"><source src="music/文艺复兴的浩宇.ogg" type="audio/ogg"><source src="music/文艺复兴的浩宇.wav" type="audio/wav"></audio>
</body>
</html>
3. details可折叠内容块
details标签: 用于为文档中的内容提供更多的细节和补充信息. 它通常用于展示文档的摘录, 补充说明或隐藏的内容.使用details标签, 可以创建一个可折叠的内容块, 用户可以点击标题以展开或收起内容.
这样的交互可以有效地组织和展示大段的文本内容, 使用户可以选择性地查看信息, 节省页面空间.details标签通常包含以下一个子标签summary, 用于定义标题或概要文本, 显示在可折叠内容块的顶部.在浏览器中, 将显示一个默认为折叠状态的内容块, 点击"点击展开"标题将展开内容.
用户可以根据需要展开或收起内容, 以获取所需的详细信息.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>summary</title>
</head>
<body>
<details><summary>点击展开</summary><p>这是一段详细的描述.</p><p>更多内容可以在这里展示.</p>
</details>
</body>
</html>
4. marquee滚动条
<marquee>标签: 用于在网页中创建滚动内容的标签, 尽管它不是W3C官方的标准, 但多数浏览器(包括某些现代浏览器)仍支持它.
常用的属性及其用法:* 1. direction属性: 用于指定滚动的方向. 可以通过以下值进行设置:- up: 从下往上滚动.- down：从上往下滚动.- left：从右往左滚动(默认值).- right：从左往右滚动.* 2. behavior属性: 用于设置滚动的行为方式. 可取的值包括:- scroll: 单方向循环滚动.- slide: 只滚动一次靠边停止.- alternate: 来回滚动.* 3. bgcolor属性: 用于设置滚动条的颜色. 可以使用CSS颜色值或颜色名称.* 4. scrollamount属性: 用于设置滚动的速度. 数值越大, 滚动速度越快.* 5. loop属性: 用于设置滚动的次数. 表示滚动内容循环的次数, 默认情况下是无限滚动.以下是一个示例，展示了如何使用`<marquee>`标签设置滚动条的属性：需要注意的是, 尽管某些浏览器仍然支持<marquee>标签,
但在现代的Web开发中, 更推荐使用CSS和JavaScript来实现自定义的滚动效果, 以提供更好的可访问性和更好的跨浏览器兼容性.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>marquee</title>
</head>
<body>
<marquee behavior="alternate">来回滚动</marquee>
<marquee behavior="slide">滚动一次</marquee>
<marquee behavior="scroll">一直滚动</marquee>
<hr>
<marquee direction="up">向上滚动</marquee>
<marquee direction="down">向下滚动</marquee>
<marquee direction="right">向右滚动</marquee>
<marquee direction="left">向左滚动</marquee>
<hr>
<marquee scrollamount="1">滚得慢</marquee>
<marquee scrollamount="100">滚得快</marquee>
<hr>
<marquee bgcolor="red">我有颜色</marquee>
<hr>
<marquee scrollamount="30"><img src="image/ghost.png" alt="图片" height="100px">
</marquee>
</body>
</html>
5. 实体字符
在HTML中, 某些字符具有特殊含义, 无法被直接显示在浏览器中.
如果要在浏览器中展示这些字符, 需要使用字符实体或转义字符来代替.
实体字符 含义
-------------------------
空格
< < 小于
> > 大于
& & 和号
" " 引号
' ' 撇号
¥ ¥ 人民币
€ € 欧元
&cope; © 版权
® ® 注册商标
™ ™ 商标
× × 乘号
÷ ÷ 除号注意点: 大小写敏感.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>characters</title>
</head>
<body>
<p>空 格
</p>
<p><a>标签
</p>
<p>&和号
</p>
<p>"引号
</p>
<p>'撇号
</p>
<p>¥人名币
</p>
<p>€欧元
</p>
<p>©版权
</p>
<p>®注册商标
</p>
<p>™商标
</p>
<p>×乘号
</p>
<p>÷除号
</p>
</body>
</html>
6. 废弃标签
HTML的标签通常被设计为具有语义, 并用于表示文档中的结构和内容.
然而, 早期的HTML标准中确实存在一些标签, 它们的目的是为了样式化文本或实现特定的显示效果, 而不是传达具体的语义,
随着HTML的发展和标准化, 为了更好地符合语义化的原则, 一些标签被淘汰或不再推荐使用.以下是一些早期标签及其作用: <br>, <hr>, <font>, <b>, <u>, <i>, <s>等标签.需要强调的是, 在现代的Web开发中, 尽量避免使用这些被淘汰的标签.
CSS提供了更灵活和可维护的样式控制方式.
此外, 使用应该更关注语义化, 可访问性和可扩展性, 以确保网页的正确解析, 表达和可读性.
HTML5引入了一些具有语义的标签, 来替代一些被淘汰的标签, 并更好地表达文档的结构和内容.以下是一些新增的HTML5语义标签及其作用:- <strong>标签用于定义重要强调的文字.它与<b>标签类似, 都可以用于加粗文本, 但<strong>标签具有更强的语义含义, 表示文本的重要性或紧迫性.- <ins>标签用于定义插入的文字. 它可以给文本添加下划线, 但也更强调插入内容的语义.- <em>标签用于定义强调的文字.与<i>标签类似, 都可以用于使文本以斜体显示, 但<em>标签表示文本的强调重点, 增加了语义.- <del>标签用于定义被删除的文字.它可以给文本添加删除线, 表示该文本已被删除或不再有效.通过使用这些语义标签, 开发人员可以更准确地描述文档中的内容, 并提供更好的语义信息, 使得文档更易于理解和解析.需要注意的是, 这些语义标签并不仅仅是样式上的替代品, 它们还赋予了文本更准确的含义,
并为搜索引擎,屏幕阅读器等提供了更好的理解和可访问性.
因此, 在适当的情况下, 应该优先使用这些语义标签, 而不仅仅依赖于样式化标签来达到特定的外观效果.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font_style</title>
</head>
<body>
<p><strong>aaa</strong>
</p>
<p><ins>bbb</ins>
</p>
<p><em>ccc</em></p>
<p><del>ddd</del>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font_style2</title><style type="text/css">.one {font-weight: bold;}.two {text-decoration: underline;}.three {font-style: italic;}.four {text-decoration: line-through;}</style>
</head>
<body>
<p class="one">aaa</p>
<P class="two">bbb</P>
<p class="three">ccc</p>
<p class="four">ddd</p>
</body>
</html>
相关文章：
20.5 HTML 媒体
1. video视频标签 video视频标签: 是HTML中用于在网页上嵌入视频的元素.常用的视频标签属性: - src属性: 指定视频文件的URL地址. - controls属性: 用于显示视频播放控件(如播放按钮, 进度条等), 使用户能够控制视频的播放. - width和height: 指定视频的宽度和高度. - autopla…...
科大讯飞分类算法挑战赛2023的一些经验总结
引言: ResNet是he kaiming大佬的早年神作，当年直接刷榜各大图像分类任务。ResNet是一种残差网络，咱们可以把它理解为一个子网络，这个子网络经过堆叠可以构成一个很深的网络，而ResNext在其基础上，进行了一定修改完善&am…...
2023年京东按摩仪行业数据分析（京东销售数据分析）
近年来，小家电行业凭借功能与颜值，取代黑电和白电，成为家电市场的主要增长点。在这一市场背景下，颜值更高、功能更丰富、品种更齐全的各类按摩仪，借助新消费和电子商务的风潮，陆续被推上市场。今年…...
【C语言】进阶指针，超详解，含丰富代码示例
文章目录 前言指针进阶的重点内容1.字符指针2.数组指针3.指针数组4.函数指针5.函数指针数组6. 指向函数指针数组的指针 总结 这里是初阶的链接，方便大家对照查看！！！添加链接描述 前言 大家好呀，今天和大家将指针进阶…...
wireshark入门指北
文章目录 前言安装Linux上wireshark安装 使用捕获的时候添加过滤条件抓取浏览器https内容 附录抓取非浏览器的https流量 前言 本文长期维护，记录使用wireshark的使用过程。 虽然有官方文档-Wireshark User’s Guide，但是不想去慢慢读。应用层的图形软件…...
18、SQL注入之堆叠及WAF绕过注入
目录 堆叠查询注入WAF绕过-SQL注入简要讲解安全狗、宝塔等防护waf策略规则大小写和关键字替换加密解密编码解码等价函数特殊符号反序列化注释符混用更改提交方式Fuzz大法数据库特性垃圾数据溢出HTTP参数污染 实测简易CMS头部注入漏洞Bypass原理分析 堆叠查询注入 stacked inje…...
nodejs+vue+elementui+express旅游出行指南网站_655ms
本文主要介绍了一种基于windows平台实现的旅游出行指南。该系统为用户找到景点信息和酒店信息提供了更安全、更高效、更便捷的途径。本系统有两个角色：管理员和用户，要求具备以下功能： （1）用户可以浏览主页了解旅游出行…...
【心电图信号压缩】ECG信号压缩与通过三次样条近似重建的ECG信号压缩研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
matlab使用教程(11)—创建随机数
MATLAB 使用算法来生成伪随机数和伪独立数。这些数在数学意义上并非严格随机和独立的，但它们能够通过各种随机和独立统计测试，并且其计算可以重复，方便用于测试或诊断目的。 rand 、 randi 、 randn 和 randperm 函数是创建随机数数组的主要…...
一、安全世界观
文章目录 1、 Web安全简史1.1 中国黑客简史1.2 黑客技术的发展历程1.3 web安全的兴起 2、黑帽子、白帽子3、安全的本质4、安全三要素5、如何实施安全评估5.1 资产等级划分5.2 威胁分析5.3 风险分析5.4 设计安全方案 6、白帽子兵法6.1 Secure By Default6.2 纵深防御原则6.3 数据…...
爬虫014_文件操作_打开关闭_读写_序列化_反序列化---python工作笔记033
报错,没有指定路径,没有指定路径无法创建文件 这样可以在当前目录下创建一个可写的文件 可以看到找到刚才生成的文件,看看内容...
企业前后端分离软件架构如何设计？
企业前后端分离软件架构的设计涉及到前端和后端的独立性、通信方式、数据流管理等多个方面。下面我将为你介绍一个常见的前后端分离软件架构设计： 1、前端层： 框架选择：选择适合项目需求的前端框架，例如React、Vue.js、Angular等…...
生产执行MES系统：提升企业灵活性和响应速度的关键利器
在竞争激烈的市场环境下，企业需要不断提高其灵活性和响应速度，以适应快速变化的需求和市场动态。生产执行MES（Manufacturing Execution System）系统作为信息技术的重要应用，为企业提供了强大的工具和平台，能…...
什么是分布式系统，如何学习分布式系统
正文 虽然本人在前面也写过好几篇分布式系统相关的文章，主要包CAP理论，分布式储存与分布式事务，但对于分布式系统，并没有一个跟清晰的概念。分布式系统涉及到很多的技术、理论与协议，很多人也说，分布式系统…...
数据库锁表 Lock wait timeout exceeded； try restarting transaction
锁等待超时 Lock wait timeout exceeded; try restarting transaction，是当前事务在等待其它事务释放锁资源造成的 解决办法 1、数据库中执行如下sql，查看当前数据库的线程情况： show full PROCESSLIST2、再到 INNODB_TRX 事务表中查看&…...
Oracle 知识篇+分区表上的索引由global改为local注意事项
★ 知识点 二、知识点 Local型索引有如下优点 1.Only one index partition must be rebuilt when a maintenance operation other than SPLIT PARTITION or ADD PARTITION is performed on an underlying table partition. 2.The duration of a partition maintenance opera…...
基于2.4G RF开发的无线游戏手柄解决方案
平时喜欢玩游戏的朋友，肯定知道键鼠在某些类型的游戏适配和操作方面，不如手柄。作为一个游戏爱好者，还得配上一个游戏手柄才行。比如动作和格斗、体育游戏，由于手柄更合理的摇杆位置和按键布局，操作起来也是得心应手。…...
Python之一：基础信息
#查看pip版本，cmd命令窗口（注意环境变量%PYTHON_HOME%\scripts，是否在path中） pip --version #安装pip，cmd命令窗口 python -m pip install pip #查看已安装模块，cmd命令窗口 python -m pydoc modules #查看…...
K8S系列文章之 Traefik快速入门
traefik 与 nginx 一样，是一款优秀的反向代理工具，或者叫 Edge Router。至于使用它的原因则基于以下几点 无须重启即可更新配置自动的服务发现与负载均衡与 docker 的完美集成，基于 container label 的配置漂亮的 dashboard 界面metrics 的支…...
RabbitMQ在CentOS下的安装
RabbitMQ的版本是3.8.2 1.环境配置：CentOs 7.6以上版本，我的版本是7.9，不要对yum换源，否则可能会安装失败。 echo "export LC_ALLen_US.UTF-8" >> /etc/profile source /etc/profile 以上命令，是…...
STM32学习之I2C（理论篇）
📢：如果你也对机器人、人工智能感兴趣，看来我们志同道合✨ 📢：不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢：文章若有幸对你有帮助，可点赞 👍…...
B站的视频怎么下载下来——Best Video下载器
B站（哔哩哔哩）作为国内最受欢迎的视频平台之一，聚集了无数优质内容：动漫番剧、游戏实况、学习课程、纪录片、Vlog、鬼畜剪辑……总有那么些视频让人想反复观看、离线观看，甚至剪辑创作。 但你是否遇到过这样的烦恼&am…...
【超详细】英伟达Jetson Orin NX-YOLOv8配置与TensorRT测试
文章主要内容如下： 1、基础运行环境配置 2、Torch-GPU安装 3、ultralytics环境配置 4、Onnx及TensorRT导出详解 5、YOLOv8推理耗时分析 基础库版本：jetpack5.1.3, torch-gpu2.1.0, torchvision0.16.0, ultralytics8.3.146 设备的软件开发包基础信息 需…...
)
使用 C/C++ 和 OpenCV 提取图像的感兴趣区域 (ROI)
使用 C/C 和 OpenCV 提取图像的感兴趣区域 (ROI) 在计算机视觉中，感兴趣区域 (Region of Interest, ROI) 是指从图像中选择的一个特定区域，我们希望对其进行进一步的处理或分析。例如，在人脸识别中，ROI 就是包含人脸的矩形框。Op…...
越狱蒸馏-可再生安全基准测试
大家读完觉得有帮助记得关注！！！ 摘要 大型语言模型（LLMs）正迅速部署在关键应用中，这引发了对稳健安全基准测试的迫切需求。我们提出了越狱提炼（JBDISTILL），这是一种新颖…...
# STM32F103 SD卡读写程序
下面是一个基于STM32F103系列微控制器的SD卡读写完整程序，使用标准外设库(StdPeriph)和FatFs文件系统。 硬件准备 STM32F103C8T6开发板(或其他F103系列)SD卡模块(SPI接口)连接线缆 硬件连接 SD卡模块 STM32F103 CS -> PA4 (SPI1_NSS) SCK -> PA5 (SPI…...
【计算机网络】Linux下简单的TCP服务器（超详细）
服务端 创建套接字 💻我们将TCP服务器封装成一个类，当我们定义出一个服务器对象后需要马上对服务器进行初始化，而初始化TCP服务器要做的第一件事就是创建套接字。 TCP服务器在调用socket函数创建套接字时，参数设置如下࿱…...
vue3单独封装表单校验函数
1.在页面中建一个.ts文件 import { useI18n } from /hooks/web/useI18n import { FormItemRule } from element-plusconst { t } useI18n()interface LengthRange {min: numbermax: numbermessage?: string } //必输项校验 export const useValidator () > {const requi…...
Go 语言实现高性能 EventBus 事件总线系统（含网络通信、微服务、并发异步实战）
前言 在现代微服务与事件驱动架构（EDA）中，事件总线（EventBus） 是实现模块解耦与系统异步处理的关键机制。 本文将以 Go 语言为基础，从零构建一个高性能、可扩展的事件总线系统，深入讲解&#…...
AI IDE 正式上线！通义灵码开箱即用
近期，通义灵码AI IDE正式上线，即日起用户可在通义灵码官网免费下载开箱即用。 作为AI原生的开发环境工具，通义灵码AI IDE深度适配了最新的千问3大模型，并全面集成通义灵码插件能力，具备编程智能体、行间建议预测、行间…...