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属性指定在视频加载和播放之前显示的图像
相关推荐
3DVisionary32 分钟前
告别数据中断:XTDIC-VG视频引伸计在金属疲劳测试中3个真实案例
人工智能·音视频·应用案例·xtdic-vg·视频引伸计·疲劳测试·实战复盘
VidDown2 小时前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
byte轻骑兵3 小时前
【AVRCP】规范精讲[30]:新播放器上线全流程,蓝牙音频如何发现并接管新应用
音视频·avrcp·蓝牙耳机·音频控制·蓝牙车机
HyperAI超神经3 小时前
支持真人/动漫/动物驱动,美团开源多风格音频驱动视频生成框架LongCat 1.5;百万级图表理解数据集ChartNet提升VLM图表重建与表格提取能力
音视频
狗凯之家源码网4 小时前
苹果 CMS10 酷黑渐变视频站模板落地应用指南
音视频
ai产品老杨4 小时前
架构师视点:基于 Docker 与边缘计算的百路异构视频中台,如何实现 GB28181/RTSP 统一接入与源码交付?
docker·音视频·边缘计算
EasyGBS4 小时前
延迟直降90%!国标GB28181视频平台EasyGBS支持WebRTC WHIP推流设备接入,让万物互联更简单
音视频·webrtc
Deitymoon4 小时前
RV1126+FFMPEG多路码流监控项目
ffmpeg·音视频
u152109648494 小时前
S.S.Audio PRO A202 音频隔离器
音视频·实时音视频·视频编解码·视频·被复线
协享科技4 小时前
AI 视频理解:让 Agent 看视频并总结内容
人工智能·go·音视频·agent·ai编程