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属性指定在视频加载和播放之前显示的图像
相关推荐
阿明副业观察20 分钟前
AI短剧分镜秘籍:从零到电影级视觉冲击
大数据·人工智能·aigc·音视频·ai写作
语音之家1 小时前
NeurIPS 2026|AnyEdit:免人声分离,嘈杂音频也能局部编辑
人工智能·音视频·消融实验·声源分离
小白学大数据1 小时前
逆向分析短视频平台 a_bogus 参数:从 JavaScript 混淆到 Python 复现
javascript·python·音视频
常州晟凯电子科技1 小时前
8路CVBS/AHD模拟视频编码器评测
音视频·视频编解码
碧海银沙音频科技研究院1 小时前
基于炬芯ATS3089X的蓝牙A2DP之SBC编码算法音频数据导出实现
音视频
是店小二呀2 小时前
想用自己的音色给视频配音?我用Index-TTS跑通参考音频、语音生成和远程访问
人工智能·音视频·语音识别
揽秀亭长2 小时前
提取视频文案的工程选型|五类转写方案对比、可复现脚本与报错排查表
人工智能·音视频
quaer2 小时前
FFmpeg环境搭建10.16
音视频
Likeadust4 小时前
门店客流少、曝光弱?视频直播点播EasyDSS音视频平台解锁门店线上拓客新模式
网络·音视频·easydss
voipmaker5 小时前
融合通信调度录音的困局:基于 MediaX 网关实现对讲语音 AI 事件萃取
人工智能·ai·音视频·语音识别·实时音视频·信息与通信·iot