在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>
相关推荐
iThinkAi工具集9 小时前
用WorkBuddy做视频:脚本、分镜、配音和剪辑这样衔接
经验分享
虹科网络安全10 小时前
RDI 多数据源管道:把分散的数据汇入统一 Redis 数据层
经验分享·redis·艾体宝·艾体宝it·艾体宝redis
程序员大阳14 小时前
HTML+CSS+JS对话式实战(9)-项目总结与问题分析
javascript·css·html·实战·项目总结
聪明的笨猪猪17 小时前
实际工程问题:AI生成Redis分布式锁的原子性缺陷导致库存超卖
java·经验分享·面试·ai编程
程序员大阳18 小时前
HTML+CSS+JS对话式实战(6)-学生端查看活动功能开发
javascript·css·html·模块·查看学生
code2cat19 小时前
HTML基础篇之第一张网页:从index.html到浏览器里的任务清单
前端·html
ppo_wu1 天前
解决夸克网盘自动修改PDF打开方式的方法
经验分享·安全·网络安全
迪康coolmu2 天前
出差终端数据安全落地实战:基于迪康端点安全一体化管理系统的四道防线实践
运维·服务器·经验分享·笔记·其他·安全·php
深圳智根网络程序开发2 天前
WP做外贸站,Yoast和RankMath到底选哪个?
经验分享
用户298698530142 天前
Python 实战:将 HTML 批量转换为 Markdown
python·html·markdown