在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>
相关推荐
孞㐑¥2 小时前
算法—队列+宽搜(bfs)+堆
开发语言·c++·经验分享·笔记·算法
星夜泊客4 小时前
C# 基础:为什么类可以在静态方法中创建自己的实例?
开发语言·经验分享·笔记·unity·c#·游戏引擎
编程之升级打怪6 小时前
网页端即时通信应用消息列表的更新逻辑
html·信息与通信
会编程的土豆7 小时前
简易植物大战僵尸游戏 JavaScript版之html
javascript·游戏·html
GGGG寄了9 小时前
CSS——CSS引入方式+选择器类型
前端·css·html
June bug9 小时前
【PMP】风险管理
经验分享·职场和发展·学习方法
qq_12498707539 小时前
基于html的书城阅读器系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·spring boot·后端·mysql·信息可视化·html
a17798877129 小时前
小程序为什么 Upload 外层使用 display: flex 时会造成组件样式混乱
css·html·css3
易知微EasyV数据可视化10 小时前
数字孪生+AI:头部能源企业-监测光伏产品生命周期,驱动绿色智造零碳未来
人工智能·经验分享·能源·数字孪生
GEO科技10 小时前
氧气科技在AIIA签署《人工智能安全承诺:生成式引擎优化GEO 》
经验分享