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属性指定在视频加载和播放之前显示的图像
相关推荐
EasyDSS6 小时前
私有化音视频系统/视频直播点播/音视频点播EasyDSS构建智慧校园视频智能服务新体系
音视频
我是发哥哈7 小时前
跨AI模型生成视频的五大维度对比:选型避坑指南
大数据·人工智能·学习·机器学习·chatgpt·音视频
墨染倾城殇11 小时前
蓝牙 5.3 双模一体,面向车载、智能音箱及多场景的经典音频与LE Audio应用
音视频·智能音箱·le audio·蓝牙双模·蓝牙5.3
Gc9umsbL112 小时前
从FLAC到WAV:whisper.cpp中的FFmpeg音频预处理全解析
ffmpeg·whisper·音视频
CWM-1831253363915 小时前
东芝TDS5B212MX/TDS5C212MX最高支持64G的高速切换开关芯片DP2.0/PCIE6.0/USB4等接口二切一
音视频
ZC跨境爬虫15 小时前
跟着 MDN 学 HTML day_27:(深入理解 HTML 属性反射机制)
前端·javascript·ui·html·音视频·媒体
EasyDSS16 小时前
视频直播点播/高清点播/音视频点播/云点播/云直播EasyDSS构建社交娱乐全链路视频解决方案
音视频·娱乐
fengfuyao98516 小时前
STM32 ADC音频采样与FFT频谱分析实现
stm32·嵌入式硬件·音视频
wsoz17 小时前
音视频控制传输协议(AVCTP)
音视频
美狐美颜sdk17 小时前
企业级美颜SDK开发全流程:AI算法、渲染链路与性能优化
人工智能·音视频·直播美颜sdk·美颜api