Web前端------HTML多媒体标签之音频和视频标签

一.音频和视频标签介绍

bash 复制代码
<audio></audio> 
网页中支持播放音频的标签,经常用于给网页添加背景音乐;音频播放网站常用
audio标签,支持网页中播放音频数据
        注意:需要将支持的mp3文件,保存在指定文件夹中 audio/(推荐使用相对路径)
        src属性:要播放的音频文件路径
        controls属性:给播放器添加一个控制条
        autoplay属性:自动播放音频文件(注意-大部分浏览器禁止自动播放)
            早期-网页支持自动播放,但是自动播放给用户带来了很多困扰,被很多用户建议取消
            当前-网页默认禁止自动播放,用户可以根据需要在设置中开启自动播放
        注意:实际开发中,如果要添加自动播放功能,同时不修改浏览器设置选项
            可以借助后面学习javascript,通过监控用户是否打开了网页实现自动播放功能
            就可以给网页添加自动播放的背景音乐

<video></video> 
网页中支持播放视频的标签,目前大部分视频网站都支持该标签
video标签,支持网页中播放视频文件
        注意:视频文件和音频文件一样,属于独立的文件,保存在指定的文件夹中,如video/
        src属性:播放视频文件的路径
        controls属性:给播放器添加控制条
        width属性:播放器的宽度
        height属性:播放器的高度
        autoplay属性:自动播放视频(注意:很多浏览器禁止视频自动播放)
            人性化:网页可以允许视频静音状态下自动播放
            有需求:可以结合后续学习的javascript,实现带有声音自动播放功能
        muted属性:静音属性
            有兴趣:可以尝试通过搜索相关资料,实现自己的视频带声音自动播放功能
            ---通过js插件实现带声音自动播放
            ---通过第三方播放器实现带声音自动播放

二.代码展示

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频和视频</title>
</head>
<body>
    <audio src="./只为你着迷-李秉成#hklAp.mp3" controls></audio>
    <video src="WeChat_20250114093955.mp4" controls></video>
</body>
</html>

三.效果呈现

相关推荐
拜晨1 分钟前
用流式 JSON 解析让 AI 产品交互提前
前端·javascript
浩男孩4 分钟前
🍀vue3 + Typescript +Tdesign + HiPrint 打印下载解决方案
前端
andwhataboutit?6 分钟前
LANGGRAPH
java·服务器·前端
无限大66 分钟前
为什么"Web3"是下一代互联网?——从中心化到去中心化的转变
前端·后端·程序员
cypking9 分钟前
CSS 常用特效汇总
前端·css
程序媛小鱼12 分钟前
openlayers撤销与恢复
前端·js
Thomas游戏开发13 分钟前
如何基于全免费素材,0美术成本开发游戏
前端·后端·架构
若梦plus15 分钟前
Hybrid之JSBridge原理
前端·webview
八月的雨季 最後的冰吻15 分钟前
FFmepg-- 37-ffplay源码- 播放器中音频输出模块
ffmpeg·音视频
chilavert31816 分钟前
技术演进中的开发沉思-269 Ajax:拖放功能
前端·javascript·ajax