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属性指定在视频加载和播放之前显示的图像
相关推荐
mit6.82413 小时前
[solution] 关闭硬件加速解决导出视频绿屏
音视频
Minilinux201816 小时前
Android音频系列(09)-AudioPolicyManager代码解析
android·音视频·apm·audiopolicy·音频策略
听麟16 小时前
HarmonyOS 6.0+ 个性化音乐播放器APP开发实战:音频可视化与场景化推荐落地
华为·音视频·harmonyos
博客zhu虎康17 小时前
音视频处理:视频时间轴在指定时间处添加音频并展示可视化拖拽条
音视频
大学生小郑17 小时前
亮度噪声和色度噪声
图像处理·音视频·视频
星海之恋99217 小时前
便宜又好用的移动 4G 蜂窝代理快来看看!
音视频
传说故事17 小时前
【论文自动阅读】视频生成模型的Inference-time物理对齐 with Latent World Model
人工智能·深度学习·音视频·视频生成
Bits to Atoms18 小时前
宇树G1语音助手完整开发指南(下)——从零构建智能知识库对话系统
人工智能·机器人·音视频·语音识别
行业探路者18 小时前
2026年热销榜单:富媒体展示二维码推荐,助力信息传递新风尚
大数据·音视频·二维码
大学生小郑19 小时前
影像测评知识分享
图像处理·音视频·视频