20.5 HTML 媒体

news2024/12/23 12:27:53

image-20230808210214585

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>

GIF 2023-8-4 21-56-32

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>

GIF 2023-8-4 21-53-56

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>

GIF 2023-8-4 22-11-27

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>

GIF 2023-8-4 22-18-46

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>

image-20230804222412519

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>

image-20230806193351112

<!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>

GIF 2023-8-8 19-06-36

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中, 某些字符具有特殊含义, 无法被直接显示在浏览器中.
如果要在浏览器中展示这些字符, 需要使用字符实体或转义字符来代替.
实体字符          含义
-------------------------
&nbsp;           空格 
&lt;             < 小于
&gt;             > 大于
&amp;            & 和号
&quot;           " 引号
&apos;           ' 撇号
&yen;            ¥ 人民币
&euro;            欧元
&cope;           © 版权              
&reg;            ® 注册商标
&trade;           商标
&times;          × 乘号
&divide;         ÷ 除号

注意点: 大小写敏感.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>characters</title>
</head>
<body>
<p>&nbsp;&nbsp;</p>
<p>
    &lt;a&gt;标签
</p>
<p>
    &amp;和号
</p>
<p>
    &quot;引号
</p>
<p>
    &apos;撇号
</p>
<p>
    &yen;人名币
</p>
<p>
    &euro;欧元
</p>
<p>
    &copy;版权
</p>
<p>
    &reg;注册商标
</p>
<p>
    &trade;商标
</p>
<p>
    &times;乘号
</p>
<p>
    &divide;除号
</p>
</body>
</html>

image-20230806203516015

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>

image-20230806202317794

<!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>

image-20230806202405469

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

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

相关文章

ESP32 Max30102 (3)修复心率误差

1. 运行效果 2. 新建修复心率误差.py 代码如下: from machine import sleep, SoftI2C, Pin, Timer from utime import ticks_diff, ticks_us from max30102 import MAX30102, MAX30105_PULSE_AMP_MEDIUM from hrcalc import calc_hr_and_spo2BEATS = 0 # 存储心率 FINGER_F…

MATLAB详细安装教程(亲测有效!!)

1.复制以下链接&#xff0c;用百度网盘打开&#xff0c;下载 链接&#xff1a;https://pan.baidu.com/s/19AwQeCRYofGAV8sfDIm5PQ 提取码&#xff1a;mads 我是下载到D盘自己创建的文件中 2.下载完毕后打开此文件夹&#xff0c;点击最后一项 3.点击右上角高级选项&#xff0…

ESP32 Max30102 (2)检测 血氧、温度

1. 运行效果 thonny终端打印的信息如下 注意: 上述的心率值是有很大的误差的,会在下一节课解决这个问题2. 新模块hrcalc.py 在Micorpython端,新建文件hrcalc.py,内容如下 这个文件的作用,可以计算出 【血氧值】 # -*-coding:utf-8# 25 samples

基于身份的安全威胁正在迅速增长

根据端点安全和威胁情报供应商 CrowdStrike 发布的一份报告&#xff0c;目前最危险的网络安全威胁是能够访问给定系统合法身份信息的攻击者。 根据该报告&#xff0c;交互式入侵&#xff08;该公司将其定义为攻击者积极工作以在受害者系统上实现某种非法目的的入侵&#xff09;…

做接口测试如何上次文件

在日常工作中&#xff0c;经常有上传文件功能的测试场景&#xff0c;因此&#xff0c;本文介绍两种主流编写上传文件接口测试脚本的方法。 首先&#xff0c;要知道文件上传的一般原理&#xff1a;客户端根据文件路径读取文件内容&#xff0c;将文件内容转换成二进制文件流的格式…

FOHEART H1数据手套:连接虚拟与现实,塑造智能交互新未来

在全新交互时代背景中&#xff0c;数据手套无疑是一种重要的科技产物。它不仅彻底改变了我们与虚拟世界的互动方式&#xff0c;更为我们提供了一种全新、更为直观的交互形式。 FOHEART H1数据手套结合了虚拟现实、手势识别等高新技术&#xff0c;用先进的传感技术和精准的数据…

DDR4信号仿完整性仿真

在硬件电路设计中&#xff0c;DDR一直是电路设计中的难点。目前正在进行DDR4的电路设计&#xff0c;将基本的仿真设计过程进行一下记录。 主流的仿真工具都是支持DDR4的仿真的&#xff0c;目前使用的主力工具为Sigrity及Hyperlynx&#xff0c;下面以Sigrity系统软件为例说明一…

微服务01-SpringCloud

1、简介 SpringCloud集成了各种微服务功能组件&#xff0c;并基于SpringBoot实现了这些组件的自动装配&#xff0c;从而提供了良好的开箱即用体验。 其中常见的组件包括&#xff1a; 2、服务拆分和远程调用 2.1 服务拆分 这里总结了微服务拆分时的几个原则&#xff1a; …

干货 | 详述 Elasticsearch 向量检索发展史

1. 引言 向量检索已经成为现代搜索和推荐系统的核心组件。 通过将复杂的对象&#xff08;例如文本、图像或声音&#xff09;转换为数值向量&#xff0c;并在多维空间中进行相似性搜索&#xff0c;它能够实现高效的查询匹配和推荐。 图片来自&#xff1a;向量数据库技术鉴赏【上…

企业文件传输软件安全性分析与对比

随着科技的日新月异和应用领域的日益广泛&#xff0c;文件传输软件在人们生活和工作中发挥的作用越来越重大&#xff0c;因此出现了许多不同种类的文件传输软件。但是&#xff0c;随着网络安全问题的严峻&#xff0c;如何确保文件传输软件的安全性成为了一个亟待解决的问题。所…

编写简单的.gitlab-ci.yml打包部署项目

服务器说明&#xff1a; 192.168.192.120&#xff1a;项目服务器 192.168.192.121&#xff1a;GitLab 为了可以使用gitlab的cicd功能&#xff0c;我们需要先安装GitLab Runner 安装GitLab Runner参考&#xff1a; GitLab实现CICD自动化部署_gitlab cidi_程序员xiaoQ的博客-CS…

深入浅出对话系统——闲聊对话系统进阶

引言 本文主要关注生成式闲聊对话系统的进阶技术。 基于Transformer的对话生成模型 本节主要介绍GPT系列文章&#xff0c;这是由OpenAI团队推出的&#xff0c;现在大火的ChatGPT也是它们推出的。 GPT : Improving Language Understanding by Generative Pre-Traini ng 在自…

图的宽度优先深度优先遍历

图常见的遍历方式有两种&#xff0c;一种是宽度优先遍历&#xff0c;一种是深度优先遍历。 宽度优先遍历 宽度优先遍历和之前介绍的二叉树的层级遍历类似&#xff0c;主要也是利用Queue来完成层级的遍历&#xff0c;除此之外&#xff0c;因为图中很可能有环&#xff0c;所以还…

教雅川学缠论07-中枢实战众泰汽车000980

本文实战众泰汽车 下面是2023年11月14-2023年8月8众泰汽车日K图 先画日K 接下来处理包含&#xff0c;就变成下面这个样子 下面在套上缠论的理论&#xff0c;未来股价的走势应该是红色椭圆形虚线里面的样子 好了&#xff0c;文章就到这里&#xff0c;如果众泰最终不是这个走势…

ch6_1 中断及外部设备操作

1. 直接定制表 1.1 移位指令 1.2 操作显存数据 1.3 描述内存单元的标号 1.4 数据的直接定址表 1.5 代码的直接定址表 2.  内中断 2.1 中断及其处理 2.2 编写中断处理程序 2.3 单步中断 2.4 int 指令引发的中断 2.5 BIos , DOS 中断处理 2.5.1 BIOS——基本输…

TOPIAM 社区版 1.0.0 发布,开源 IAM/IDaaS 企业身份管理平台

文章目录 产品概述系统架构功能列表管理端门户端 技术架构后续规划相关地址 ​Hi&#xff0c;亲爱的朋友们&#xff0c;今天是传统 24 节气中的立秋&#xff0c;秋天是禾谷成熟、收获的季节。经过长时间优化和迭代&#xff0c;TOPIAM 企业身份管控平台也迎来了当下的成长和收获…

Nodejs下动态加载文件夹下的文件模块

个人博客 Nodejs下动态加载文件夹下的文件模块 个人博客&#xff0c;求关注&#xff0c;如果有不够清晰的&#xff0c;麻烦指出来&#xff0c;如果有很不正确的&#xff0c;多谢批评。 文章概叙 本文应用的场景是读取指定文件夹下面的所有文件&#xff0c;然后做操作&#…

【IMX6ULL驱动开发学习】01.编写第一个hello驱动+自动创建设备节点(不涉及硬件操作)

目录 一、驱动程序编写流程 二、代码编写 2.1 驱动程序hello_drv.c 2.2 测试程序 2.3 编写驱动程序的Makefile 三、上机实验 3.1 NFS 挂载 3.2 测试示例 一、驱动程序编写流程 构造file_operations结构体 在里面填充open/read/write/ioctl成员 注册file_operations结…

【计算机网络】TCP协议超详细讲解

文章目录 1. TCP简介2. TCP和UDP的区别3. TCP的报文格式4. 确认应答机制5. 超时重传6. 三次握手7. 为什么两次握手不行?8. 四次挥手9. 滑动窗口10. 流量控制11. 拥塞控制12. 延时应答13. 捎带应答14. 面向字节流15. TCP的连接异常处理 1. TCP简介 TCP协议广泛应用于可靠性要求…

P1398 [NOI2013] 书法家

题目描述 输入 #1 3 13 1 1 -1 -1 1 -1 1 1 1 -1 1 1 1 1 -1 1 -1 1 -1 1 -1 1 -1 -1 1 -1 1 -1 -1 1 1 -1 1 1 1 -1 1 1 1 输出 #1 24 输入 #2 3 13 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1…