在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>
相关推荐
畅想视界ThinkView6 小时前
中医理疗机构智能终端选型指南:场景拆解与参数避坑(附对照表)
经验分享·电脑
乐迪绘防伪油墨技术分享6 小时前
特种功能油墨选型指南:温变 / 遇水 / 荧光 / UV LED 技术对比与供应商参考
前端·html·uv
Ztt6666666667 小时前
竹节密封罐披上紫釉,硬朗筋骨也有柔和一面
经验分享·笔记·其他·百度·微信公众平台
阿虎儿8 小时前
我的 HTML 样板(HTML Boilerplate)
前端·html
FLJwu8 小时前
传感器与图像 ISP 实战 03:运动相机图像量产一致性|批次色差、白平衡漂移、整机标定与出厂图像质检方案|20 年源头工厂量产经验
图像处理·经验分享·数码相机·相机·isp
louiseailife8 小时前
如何评估一项任务是否适合自动化改造
经验分享
IT小白杨9 小时前
跨境电商账号关联归因链路拆解与可落地环境配置
服务器·网络·经验分享·安全·指纹浏览器
志尊宝10 小时前
Vue3 零基础每日笔记(043):defineModel 与 defineExpose 的 TS 用法——3.4+ 新 API 进阶
前端·javascript·vue·html·vue3
IMPYLH10 小时前
HTML 的 <small> 元素
前端·网络·html
m0_7196408710 小时前
高校科研如何选型适配具身智能研究的VR遥操机器人
经验分享