HTML中如何设置音频和视频?

文章目录

  • 🔊嵌入音频
  • 🎞️嵌入视频

🔊嵌入音频

HTML 元素用于在文档中嵌入音频内容。 元素可以包含一个或多个音频资源, 这些音频资源可以使用 src 属性或者 元素来进行描述:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><audio src="叮叮当.mp3" autoplay></audio>
</body>
</html>

音频属性:

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放,必须与muted属性联合使用才有效果
controlscontrols如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)
looploop如果出现该属性,则每当音频结束时重新开始播放
mutedmuted如果出现该属性,则音频输出为静音
preloadauto、metadata、none规定当网页加载时,音频是否默认被加载以及如何被加载
srcURL规定音频文件的 URL。

🎞️嵌入视频

HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 标签用于音频内容,但是 元素可能在用户体验上更合适。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><video src="sp.mp4" controls autoplay></video>
</body>
</html>

视频属性:

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放,必须与muted属性联合使用才有效果
controlscontrols如果出现该属性,则向用户显示控件(比如播放/暂停按钮)
looploop如果出现该属性,则每当媒介文件完成播放后重新开始播放
mutedmuted如果出现该属性,则音频输出为静音
preloadauto、metadata、none如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性
srcURL规定音频文件的 URL。
posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮
widthpixels设置视频播放器的宽度
heightpixels设置视频播放器的高度

需要注意的是,为了确保兼容性和最佳体验,建议提供多种格式的音频和视频文件(如mp3、ogg、mp4等),以便不同浏览器和设备能够播放。另外,还可以使用一些属性和方法来控制音频和视频的播放,例如play()、pause()、currentTime等。这些功能可以通过JavaScript与相应的元素进行交互。

⭐最后⭐

总结不易,希望小宝们不要吝啬你们的👍哟(^U^)ノ~YO!!😀
如有问题,欢迎评论区批评指正😁

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

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

相关文章

Centos7云服务器上安装cobalt_strike_4.7。附cobalt_strike_4.7安装包

环境这里是阿里的一台Centos7系统。 开始安装之前首先要确保自己安装了java11及以上环境。 安装java11步骤&#xff1a; sudo yum update sudo yum install java-11-openjdk-devel把服务器端&#xff08;CS工具分服务器端和客户端&#xff09;的CS安装到服务器上后给目录下的…

Mongoose 对象文档模型库

一、介绍 Mongoose是一个对象文档模型库&#xff0c;官网&#xff1a;http://www.mongoosejs.net/ 二、作用 方便使用代码操作Mongodb数据库 三、使用流程 //1. 安装 mongoose //2. 导入 mongoose const mongoose require(mongoose); //3. 连接数据库 mongoose.connect(m…

某省资源交易中心 (js逆向)

该文章只是用于逆向学习&#xff0c;不得以商用或者是破坏他人利益的目的进行使用。如有侵权请联系作者。 网站链接&#xff1a; bse64 aHR0cHM6Ly9nZ3p5ZncuZnVqaWFuLmdvdi5jbi9idXNpbmVzcy9saXN0Lw 分析环节 进入网站 进行翻页请求时我们会发现改请求时ajax请求。 这里&…

hive-窗口函数

1 窗口函数语法 分析函数/专用窗口函数 over(partition by 列名 order by 列名 rows between 开始位置 and 结束位置) 常用的分析函数 常用的分析函数&#xff1a;sum()、max()、min()、avg()、count() 常用的专用窗口函数 专用窗口函数&#xff1a;row_number()、rank()、dens…

【简易版】Linux下Protobuf 实现网络版通讯录--C++

一、介绍 该项目的主要目的是用于熟悉protobuf的使用&#xff0c;体验数据在网络中序列化反序列化的形式&#xff0c;并非一个完整的项目。 该通讯录只实现了增加联系人的功能。服务器端接收到请求后会将联系人的信息打印。 二、环境搭建 使用Httplib库&#xff0c;可以快速…

jsp文件引用的css修改后刷新不生效问题

问题 在对 JavaWeb 项目修改的过程中&#xff0c;发现修改了 jsp 文件引入的 css 文件的代码后页面的样式没有更新的问题。 原因 导致这个问题的原因可能是因为浏览器缓存的问题。 解决方法 下面介绍两种解决方法&#xff0c;供大家参考&#xff1a; 1、给 link 标签的 c…

TrustZone之安全虚拟化

在Armv7-A首次引入虚拟化时,它仅在非安全状态中添加。在Armv8.3之前,Armv8也是如此,如下图所示: 如前所述在切换安全状态时,EL3用于托管固件和安全监视器。安全EL0/1托管受信任的执行环境(TEE),由受信任的服务和内核组成。 在安全状态下,没有对多个虚拟机的需…

Java基础——什么是main方法

main方法是Java虚拟机调用的入口&#xff0c;该方法的权限必须是public&#xff0c;Java虚拟机在执行main方法时不必创建对象&#xff0c;所以该方法是static修饰&#xff0c;接收一个String类型的数组参数&#xff0c;数组保存执行Java命令时传递给所运行的类的参数&#xff0…

基于微信小程序和Spring、SpringMVC、MyBatis的汽车租赁管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于微信小程序和Spring、SpringMVC、My…

Kafka生产问题总结及性能优化实践

1、消息丢失情况 消息发送端&#xff1a; &#xff08;1&#xff09;acks0&#xff1a; 表示producer不需要等待任何broker确认收到消息的回复&#xff0c;就可以继续发送下一条消息。性能最高&#xff0c;但是最容易丢消息。大数据统计报表场景&#xff0c;对性能要求很高&am…

JavaCV之rtmp推流(FLV和M3U8)

JavaCV与FFmpeg FFmpeg是一款开源的多媒体处理工具集&#xff0c;它包含了一系列用于处理音频、视频、字幕等多媒体数据的库和工具。 JavaCV集成了FFmpeg库&#xff0c;使得Java开发者可以使用FFmpeg的功能&#xff0c;比如视频解码、编码、格式转换等。 除了FFmpeg&#xff0…

LeetCode力扣每日一题(Java):35、搜索插入位置

一、题目 二、解题思路 1、我的思路&#xff08;又称&#xff1a;论API的重要性&#xff09; 读完题目之后&#xff0c;我心想这题目怎么看着这么眼熟&#xff1f;好像我之前学过的一个API呀&#xff01; 于是我回去翻了翻我之前写的博客&#xff1a;小白备战蓝桥杯&#xf…

通用的AGI 安全风险

传统安全风险 平台基础设施安全风险 模型与数据层安全风险 应用层安全风险 平台基础设施安全风险 &#xff08;1&#xff09;物理攻击&#xff1a;机房管控不到位 &#xff08;2&#xff09;网络攻击 &#xff08;3&#xff09;计算环境&#xff1a;自身安全漏洞&#xf…

编辑器Sublime text 常用快捷命令 列模式 替换空行

平替notepad 下载可取官网 www.sublimetext.com 据说可以无限试用&#xff0c;没有功能限制 1、快速删除空行 ctrl h选择正则表达式 .*Find输入&#xff1a; ^(\t)*$\nReplace输入&#xff1a;点击Replace All 2、快速选择指定字符 用鼠标选中alt f3修改 3、列编辑模式 ct…

如何理解HTML下的网页结构?

HTML&#xff08;Hypertext Markup Language&#xff09;是一种标记语言&#xff0c;用于描述网页的结构和内容。以下是对网页结构的理解以及网络爬虫在处理不同类型网页时可能遇到的情况&#xff1a; 1. HTML基本结构 HTML文档的基本结构通常包括以下几个部分&#xff1a; …

宇视科技视频监控 main-cgi 文件信息泄露漏洞复现

0x01 产品简介 宇视(Uniview)高清网络摄像机是一种高性能的网络摄像机,它可以通过网络进行视频传输和监控。该摄像机采用先进的视频技术,具有高清晰度、低照度、宽动态等特点,能够提供高质量的视频图像。 0x02 漏洞概述 宇视(Uniview)高清网络摄像机存在信息泄露漏洞…

ppt编辑密码如何设置?

大家在PPT中设置了限制编辑&#xff0c;发现后面任然可以编辑文件。那么如何将PPT文件设置成禁止修改模式呢&#xff1f;今天分享几个方法给大家。 方法一 将PPT文件直接保存或者另存为一份文件&#xff0c;在保存时&#xff0c;将文件格式选择为PowerPoint图片演示文稿 方法…

.NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(测试篇)

WebAppDbTest 项目测试 测试工具 ltt介绍安装使用方式1、Drill2、Hammer3、Nailgun 测试主机规格配置CRUD 性能测试对比1、ltt 工具测试1.1、AddSingle 单条数据添加1.2、AddBulk 批量数据&#xff08;1000&#xff09;条添加1.3、GetSingle 单条数据查询1.4、GetAll 多条&…

Spring Boot使用JUnit和Mockito进行Service层单元测试

文章目录 前言一、单元测试是什么二、为什么要写单元测试三、简单示例假设我们有一个简单的UserService类&#xff0c;其中包含了一些用户相关的逻辑&#xff1a;首先&#xff0c;我们需要引入JUnit和Mockito的依赖。在Maven项目中&#xff0c;可以在pom.xml文件中添加以下依赖…

多合一iPhone 解锁工具:iMyFone LockWiper iOS

多合一iPhone 解锁工具 无需密码解锁 iPhone/iPad/iPod touch 上所有类型的屏幕锁定 在几分钟内解锁 iPhone Apple ID、Touch ID 和 Face ID 立即绕过 MDM 并删除 iPhone/iPad/iPod touch 上的 MDM 配置文件 支持所有 iOS 版本和设备&#xff0c;包括最新的 iOS 17 和 iPhone 1…