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-魚爷1 小时前
腾讯会议双机位同屏:前后两个摄像头画面合并显示方案(易视讯)
电脑·音视频·腾讯会议·zoom会议
闭包不眠3 小时前
批量压缩视频先分组,HandBrake等3种方法(2026)
图像处理·人工智能·计算机视觉·音视频
视频技术分享3 小时前
远程会诊产品设计复盘:音视频架构拆解与四大避坑
架构·音视频
听我哔哔5 小时前
口播视频唇形总对不上,Seedance 2.5在zeekeAI里同步
人工智能·音视频
伯奥克客服5 小时前
2026年视频矩阵厂家技术评估:从EDID到控制协议开放度的六维筛选法
线性代数·矩阵·音视频
指针向南5 小时前
批量压缩视频有文件没变小?HandBrake等3款对比
图像处理·人工智能·计算机视觉·音视频
Android系统攻城狮7 小时前
Linux FFmpeg深度解析之avcodec_parameters_copy调用流程与实战(二十五)
linux·运维·服务器·ffmpeg·音视频·车载音频
听我哔哔8 小时前
口播视频唇形总对不上?Seedance 2.5 在 zeekeAI 里的同步实操
人工智能·音视频
YWamy16 小时前
如何降低RTC SDK在复杂网络环境下的运行成本
网络·音视频·实时音视频
FlightYe18 小时前
视界原理之3D视频(四):裸眼、眼镜和头显
android·linux·c++·3d·ffmpeg·音视频