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属性指定在视频加载和播放之前显示的图像
相关推荐
TST-魚爷2 小时前
实测体验|易视讯会议音视频一体机智能发言跟踪功能
音视频
Android系统攻城狮2 小时前
Linux Gstreamer深度解析之gst_audio_format_build_integer调用流程与实战(十二)
linux·运维·服务器·音视频·车载音视频·gstreamer进阶
可乐鸡翅yeah_3 小时前
MPEG‑TS 分片 PTS/DTS 时间戳异常排错,HLS 音画不同步定位实战
运维·测试用例·音视频·媒体·m3u8
老余说AI3 小时前
从开源换脸工具到商业级 AI 换脸平台:SoundView 视频换脸的产业定位与边界
人工智能·音视频·视频换脸
Likeadust3 小时前
多部门协同调度效率低?一套视频直播/点播/视频会议/集群语音对讲EasyDSS搞定企业可视化音视频调度
音视频·媒体·easydss
差不多的周周4 小时前
《MotionLLM:从人体运动和视频理解人类行为》论文核心部分详解
人工智能·深度学习·机器学习·计算机视觉·语言模型·音视频
可乐鸡翅yeah_7 小时前
HLS CORS 跨域问题完整排查实战,解决 M3U8 与 TS 分片跨域报错
android·ios·音视频·m3u8·音视频在线播放
美狐美颜SDK开放平台8 小时前
从视频处理到实时渲染:直播APP中视频美颜SDK的关键技术解析
前端·人工智能·架构·实时互动·音视频·视频美颜sdk
小唔w8 小时前
文字一键生成播客音频,2026年几款AI工具功能梳理
人工智能·音视频
可乐鸡翅yeah_9 小时前
多浏览器 HLS 兼容性差异排查,Chrome、Firefox、Safari 表现不一致定位
chrome·ffmpeg·音视频·firefox·safari·m3u8