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

目录


一、设置音频

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--       
 		controls:控制播放暂停的按钮
     	autoplay:自动播放
        loop:无限循环
        muted:静音-->
<audio controls autoplay loop muted>
    <source src="西瓜JUN%20-%20起风了.mp3">
</audio>
</body>
</html>

二、设置视频

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--
        controls:控制播放暂停的按钮
        autoplay:自动播放
        loop:无限循环
        muted:静音
		poster:视频封面
    -->
<video width="500" height="300" controls autoplay loop muted poster="../img/111.png">
    <source src="4.26登录完成页面.mp4" >
</video>
</body>
</html>
相关推荐
三水不滴33 分钟前
计网ping原理
经验分享·笔记·计算机网络
anOnion2 小时前
构建无障碍组件之Alert Dialog Pattern
前端·html·交互设计
架构师沉默3 小时前
这个问题,决定你能不能进大厂!
经验分享
软件检测小牛玛3 小时前
软件功能测试机构推荐:资质权威,报告认可的软件测评机构 中承信安
经验分享·软件功能测试·第三方软件检测·软件测评机构·软件功能测试报告
方见华Richard4 小时前
方见华个人履历|中英双语版
人工智能·经验分享·交互·原型模式·空间计算
一个懒人懒人4 小时前
Promise async/await与fetch的概念
前端·javascript·html
acrelwwj4 小时前
智慧照明新引擎,ASL600 4GWJ开启城市照明精细化管理新时代
大数据·经验分享·物联网
智者知已应修善业7 小时前
【洛谷P9975奶牛被病毒传染最少数量推导,导出多样例】2025-2-26
c语言·c++·经验分享·笔记·算法·推荐算法
June bug8 小时前
【PMP】敏捷Scrum实践
经验分享·职场和发展·学习方法·scrum
星纬智联技术10 小时前
开源 AI-Eval:Prompt 评估系统,用单元测试跑
经验分享