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属性指定在视频加载和播放之前显示的图像
相关推荐
wj3055853784 小时前
课程 6:图生视频首次运行流程
人工智能·音视频
runafterhit4 小时前
显示调研专题-OLED 终端市场分析报告
音视频
天上路人4 小时前
A-59F所有应用模式说明
人工智能·硬件架构·音视频·语音识别·实时音视频
Likeadust8 小时前
企业级融媒体生产管理平台/智能会议管理系统EasyDSS构建一体化应急视频指挥体系
音视频·媒体
OsDepK9 小时前
AudioSplit音频多轨免费分离工具即将发布
ide·git·python·音视频·集成学习
playmaker9010 小时前
音频转mid、midi文件
音视频
EasyDSS10 小时前
私有化音视频系统/企业级融媒体平台EasyDSS优化升级让视频会议协作更高效
音视频·媒体
reasonsummer12 小时前
【办公类-135-01】20260515 视频去掉字幕-黑狐字幕工厂
音视频
AC赳赳老秦12 小时前
OpenClaw与Axure联动:自动生成原型图组件、批量修改原型样式,提升设计效率
python·web安全·ui·音视频·axure·photoshop·openclaw
Tech-Net12 小时前
如何无损下载网页上的视频并保持4K/8K超清画质
经验分享·音视频·教程·视频编解码·视频下载·视频下载工具·网页视频下载