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属性指定在视频加载和播放之前显示的图像
相关推荐
关于作业的二三事2 小时前
图像和视频处理的核心概念(在图像上画矩形)
音视频
ai产品老杨3 小时前
【边云协同视频分析项目实战记录】多站点AI视频分析平台部署手册
人工智能·音视频
丹宇码农5 小时前
把 HLS 字幕玩出花:zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
Mapleay7 小时前
音视频上层架构
音视频
H Journey7 小时前
音视频原理
音视频·h264
dayuOK63078 小时前
2026年AI生图工具实测:Midjourney、可灵、即梦谁更强?
人工智能·ai作画·aigc·音视频·ai写作
FlightYe8 小时前
FFmpeg移动端硬解机制
linux·网络·ffmpeg·音视频·实时音视频·视频编解码
关于作业的二三事11 小时前
图像和视频处理的核心概念(在新画布上画圆形并保存图像)
音视频
开开心心_Every11 小时前
带OCR识别的电子发票打印工具
运维·自动化·ocr·电脑·powerpoint·音视频·lua
love530love11 小时前
AI Agent + 本地 ComfyUI 无头模式实战:关闭 IDE 后 AI 独立重启并完成图文生成
ide·人工智能·windows·python·音视频·agent·devops