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属性指定在视频加载和播放之前显示的图像
相关推荐
QH139292318803 小时前
R&S FSPN50 FSPN26 FSWP26 相位噪声分析仪典型应用案例
人工智能·百度·微信·集成测试·音视频·facebook·oneapi
HyperAI超神经3 小时前
MiniMax H3 突破视频生成边界,音画内容一体生成;Ornith-1.5-35B-A3B 探索推理模型自进化训练新模式
人工智能·深度学习·学习·音视频·多模态·视频生成·推理模型
chunmiao30324 小时前
Gemini Omni 1.1 Flash 发布:场景扩展上限 40 秒,AI 视频生成转向可控
人工智能·音视频
音视频牛哥4 小时前
世界人形机器人运动会9项新赛技术解读:全自主、灵巧手与机器人实时音视频系统演进
音视频·世界人形机器人运动会·世界人形机器人运动会9项新赛·人形机器人技术发展·机器人实时音视频·机器人低延迟视频·机器人远程接管
zhonyu鱼4 小时前
Shotcut:免费开源的专业级视频剪辑软件
音视频·开源软件
码云骑士4 小时前
120-视频理解-大模型视频分析-抽帧-自动字幕摘要-高光片段
python·音视频
镭封4 小时前
2026免费AI配音5款实测:哪些真正无水印可导出音频
人工智能·音视频·媒体
H0311169854 小时前
会议视频转文字工具实测:六款主流方案功能与适用场景解析
音视频
非凡ghost5 小时前
用 Kotlin 和 Jetpack Compose 重写的安卓视频播放器,原生体验有多流畅?
android·java·kotlin·音视频·软件需求
阿童木写作18 小时前
跨境电商翻译利器,批量图片视频翻译+智能抠图工具
python·音视频