目录

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>

三.效果呈现

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
哟哟耶耶2 小时前
React-04React组件状态(state),构造器初始化state以及数据读取,添加点击事件并更改state状态值
前端·javascript·react.js
kiramario2 小时前
用IconContext.Provider修改react-icons的icon样式
前端·javascript·react.js
destinyol2 小时前
React首页加载速度优化
前端·javascript·react.js·webpack·前端框架
程序员小续2 小时前
React 多个 HOC 嵌套太深,会带来哪些隐患?
java·前端·javascript·vue.js·python·react.js·webpack
大猫会长2 小时前
用AbortController取消事件绑定
前端
程序员小杰@3 小时前
AI前端组件库Ant DesIgn X
开发语言·前端·人工智能
致微3 小时前
Vue项目 bug 解决
前端·vue.js·bug
慕斯策划一场流浪4 小时前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
我自纵横20235 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰5 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html