html 音频和视频组件

一、音频和视频组件

音频组件名:audio

视频组件名:video

都需要 src 属性用于指定资源的来源或位置。

如果仅仅使用src路径之外,不添加controls属性,则无法进行播放,需要添加controls属性

音频和视频共有的属性:

  • src 属性用于指定资源的来源或位置。
  • controls: 显示控件,比如播放按钮。
  • autoplay: 视频在就绪后马上播放。
  • loop: 当媒介文件完成播放后再次开始播放。
  • muted: 视频的音频输出应该被静音。
  • preload: 规定是否在页面加载后载入音频。
    • none - 表示不应该预加载媒体文件。浏览器将仅加载元数据(例如时长、尺寸和文本轨道)。
    • metadata - 表示仅预加载媒体的元数据。
    • auto - 表示浏览器应该预加载它认为必要的媒体内容。这通常是整个文件,但浏览器可能会根据网络状态、用户偏好等因素做出不同的决策。

注意:要使用静音muted 才可以使用autoplay,否则无法autoplay

除了一种特殊情况:就是你的媒体参与度过高,这样即时不使用muted,也可以只使用autoplay自动播放

媒体参与度查看地址:chrome://media-engagement

二、视频封面设置

视频组件还有一个比较特殊的属性

  • poster属性指定在视频加载和播放之前显示的图像
相关推荐
H0311169852 分钟前
关于AI会议音视频转写与智能生成纪要工具的对比分析
人工智能·音视频
乐橙开放平台5 分钟前
老旧社区双通道笔记:周界 hoveringAlarm / aiPerArea + 电梯 aiNonVehDetect,一套 callback 做 24h 防护
笔记·物联网·音视频·智能家居
视跃科技6 分钟前
多路视频实时解码推理,是怎么做到“逐帧解码 + AI检测 + 目标框叠加上墙“的?
人工智能·目标跟踪·音视频
lbb 小魔仙8 分钟前
图片、音频、文档怎么集中转换?群晖部署 VERT 自托管文件工具
音视频
chunmiao30321 小时前
阿里云Wan3.0视频大模型上线:单次生成30秒还能读文档
阿里云·云计算·音视频
bluesky9612222 小时前
一款可以在linux联调程序工具
音视频
林澈在路上2 小时前
AI做歌用哪个最好 2026国产AI音乐工具评测
大数据·人工智能·aigc·音视频·音频
AI服务老曹3 小时前
抽烟识别算法接入 AI 视频分析平台的流程与误报优化指南
人工智能·算法·音视频
镭封3 小时前
短视频创作效率升级:免费配音+转文字全流程工具实测
人工智能·音视频
小五兄弟3 小时前
YouTube AI 肖像新机制:单集受限,不影响频道变现
经验分享·音视频·媒体