在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>
相关推荐
智者知已应修善业11 分钟前
【CD4022八进制计数器脉冲分配器】2023-5-31
驱动开发·经验分享·笔记·硬件架构·硬件工程
a11177639 分钟前
变电站数字孪生大屏ThreeJS 开源项目
前端·信息可视化·开源·html
岁岁的O泡奶1 小时前
NSSCTF_reverse_[SWPUCTF 2022 新生赛]base64——[HDCTF 2023]easy_re
经验分享·python·逆向
PieroPc1 小时前
销售单据 OCR 处理中心,Fastapi+Html, MiMo-V2-Omni、豆包怎理图片转Json数据
html·ocr·fastapi
农村小镇哥1 小时前
Html的字体+字符编码+图片标签
chrome·笔记·html
摇滚侠1 小时前
HTML CSS 演示小米 logo 的变化 border-radius 属性设置圆角
前端·css·html
tinygone1 小时前
从0开始基于Karpathy的理念搭建Wiki
人工智能·经验分享
❆VE❆1 小时前
虚拟列表原理与实战运用场景详解
前端·javascript·css·vue.js·html·虚拟列表
周末也要写八哥12 小时前
html网页设计适合新手的学习路线总结
html
ZC跨境爬虫13 小时前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html