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属性指定在视频加载和播放之前显示的图像
相关推荐
非凡ghost1 小时前
可拓浏览器:给手机浏览器装上“外挂“!2W+拓展+AI搜索,玩出无限可能!
windows·智能手机·音视频·firefox
美狐美颜SDK开放平台3 小时前
多场景美颜SDK解决方案:直播APP(iOS/安卓)开发接入详解
android·人工智能·ios·音视频·美颜sdk·第三方美颜sdk·短视频美颜sdk
ai产品老杨5 小时前
深度解析:基于国产化异构计算的 AI 视频管理平台架构——从 GB28181 接入到 NPU 边缘推流的解耦实践
人工智能·架构·音视频
watson_pillow5 小时前
音视频相关基础知识储备入门-字幕
音视频
程序员JerrySUN6 小时前
Jetson边缘嵌入式实战课程第二讲:JetPack 和 SDK Manager 是什么
c语言·开发语言·网络·udp·音视频
weixin_6688 小时前
NVIDIA VSSVideo Search and Summarization视频搜索与摘要蓝图详尽使用说明与技术报告版本
人工智能·音视频
jiayong238 小时前
国内外视频/图像大模型与智能体工具平台竞品对比
ai·音视频·agent
视频技术分享9 小时前
技术赋能生态革新:音视频产业开启千亿增长新周期 视频会议成核心增长亮点
音视频
reasonsummer9 小时前
【教学类-160-14】20260425 AI视频培训-练习014“豆包AI视频《月下枯蔷(哥特风)》+豆包图片风格:油画”
人工智能·音视频·豆包
AI服务老曹10 小时前
深度解析:支持 GB28181/RTSP 及异构计算(X86/ARM+GPU/NPU)的 AI 视频管理平台架构方案(附源码交付与 Docker 部署)
arm开发·人工智能·音视频