在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>
相关推荐
做cv的小昊2 小时前
【TJU】信息检索与分析课程笔记和练习(10)专利文献和中文专利检索
经验分享·笔记·学习·全文检索·学习方法·信息检索
春风有信2 小时前
【学术写作】LaTeX基础:从概念理解到基础应用
经验分享·笔记·学习
数据轨迹0013 小时前
AAAI AMD:多尺度预测MLP反杀Transformer
经验分享·笔记·facebook·oneapi·twitter
一条咸鱼_SaltyFish4 小时前
[Day16] Bug 排查记录:若依框架二次开发中的经验与教训 contract-security-ruoyi
java·开发语言·经验分享·微服务·架构·bug·开源软件
源代码•宸4 小时前
Golang语法进阶(Sync、Select)
开发语言·经验分享·后端·算法·golang·select·pool
草莓熊Lotso4 小时前
Linux系统进程调度优化:优先级策略与切换机制深度实践
linux·运维·服务器·c++·人工智能·经验分享·其他
计算机小手15 小时前
使用 Poste.io 自建邮件服务器,Docker一键快速部署
经验分享·docker
GUOYUGRA16 小时前
离心机或反应釜预处理LEL及氧气系统方案
经验分享
源代码•宸18 小时前
Leetcode—1929. 数组串联&&Q1. 数组串联【简单】
经验分享·后端·算法·leetcode·go
金檀教科18 小时前
午休课桌椅新国标环境下,校金刚的实施方案更有优势
经验分享