在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>
相关推荐
Night_Elf2 分钟前
OpenClaw:完全零成本在Windows本机部署OpenClaw免费大模型指南
经验分享·自动化·运维开发·程序员创富
Never_Satisfied4 分钟前
在JavaScript / HTML中,判断指定的元素是否含有某个类
开发语言·javascript·html
下北沢美食家5 分钟前
HTML面试题
前端·html
脸大是真的好~14 分钟前
黑马AI+前端教程 01-HTML-Trae-F12-live Server-标签-块级和内联元素-图片格式-路径
前端·html
fgreygrt24 分钟前
PPT大纲生成通关秘籍:从灵感闪现到逻辑成型的奇妙旅程
经验分享·电脑·powerpoint
为美好的生活献上中指29 分钟前
*Java 沉淀重走长征路*之——《Java Web 应用开发完全指南:从零到企业实战(两万字深度解析)》
java·开发语言·前端·html·javaweb·js
asdzx6739 分钟前
确保文档安全:使用 C# 加密 Word 文档或设置文档权限
经验分享
陈辛chenxin40 分钟前
【零基础学Web-Day1】HTML 基础标签 + CSS 样式规范,附实战案例
css·经验分享·笔记·html·课程设计
asyxchenchong88841 分钟前
ArcGIS水文分析、HEC-RAS模拟技术在洪水危险性及风险评估
经验分享·arcgis
三流架构师41 分钟前
Word排版资源合集
经验分享