在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>
相关推荐
小白舒_SC5 小时前
多个VS版本的Qt VS Tools的QtMsBuild不兼容问题
经验分享·qt
BomanGe911 小时前
NSK紧凑型精密滚珠丝杠技术手册
经验分享·规格说明书
卡梅德生物科技小能手13 小时前
卡美德生物科普CD136(RON受体):从基础特性到实验应用
经验分享·深度学习·生活
sweetone13 小时前
SONY老式磁带随身听wm-fx193 之摩机过程(提升重低音音效,改耳放)
经验分享·音视频
TA远方14 小时前
【HTML】JavaScript Canvas 图像截取与保存完整指南
前端·javascript·html·canvas·截图·截取
上海观智网络14 小时前
上海小程序定制开发合同怎么签?需要注意什么?
经验分享·笔记·小程序
BomanGe314 小时前
NSK PFT1205-2.5 滚珠丝杠技术详解
经验分享·规格说明书
ychqsq14 小时前
54.新芽
经验分享·职场和发展
DeboPXK14 小时前
NSK超高速精密滚珠丝杠UPFC1632技术详解
经验分享·规格说明书
feixing_fx14 小时前
选择器的威力——深入理解优先级计算与层叠规则
开发语言·前端·css·前端框架·html