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属性指定在视频加载和播放之前显示的图像
相关推荐
小猴子爱上树11 小时前
一站式解决图片视频翻译难题的高效AI工具
人工智能·python·音视频
AI创界者11 小时前
【AI视频重塑】MoCha-GGUF 视频人物/主体替换整合包:8G显存轻量化部署与ComfyUI批量工作流详解
人工智能·aigc·音视频
EasyGBS14 小时前
ONVIF设备接入国标GB28181视频平台EasyGBS:不用国标也能一键拉流!
服务器·php·音视频
Legendary_00814 小时前
LDR6500 设计指南:Type-C 音频快充二合一配件 PD 取电与插拔时序控制方案
c语言·开发语言·音视频
音视频牛哥16 小时前
SmartMediaKit 推拉流MP4录像实践:实时传输与本地留存一体化
音视频·rtmp推流录像·rtmp播放端录像·rtsp播放端录像·rtsp流录制·rtmp流录制·rtsp服务器录像
石臻臻的杂货铺18 小时前
做 AI 视频,先让 Blender 把镜头演一遍
人工智能·音视频·blender
ALINX技术博客18 小时前
【黑金云课堂】FPGA技术教程Vitis开发:SD卡WAV文件读取音频播放实验
fpga开发·音视频
沐禾安信1 天前
AVI 视频打不开?2026 四款转 MP4 工具封神
音视频·电脑录屏
兵叔物联1 天前
基于FFmpeg的短视频自动剪辑工具
ffmpeg·音视频
AORUO奥偌1 天前
从“拼凑”到“集成”:音视频系统如何重塑弱电智能化建设逻辑
音视频·公共广播系统·音视频系统·多媒体会议与ip广播系统·多媒体会议系统