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属性指定在视频加载和播放之前显示的图像
相关推荐
智塑未来15 分钟前
AI视频翻译配音工具怎么选?5款工具的链路覆盖对比
人工智能·音视频
做萤石二次开发的哈哈2 小时前
商场分区广播怎么开发?商用音频主机四大技能与音频文件管理实践
音视频·蓝海aiot一站式工作台·公共广播·智慧广播·萤石云开放平台·商用音频主机·矩阵路由
音视频牛哥3 小时前
大牛直播SDK(SmartMediaKit)iOS平台Unity3D RTSP/RTMP播放器集成实践
音视频·unity3d·ios rtmp播放器·ios rtsp播放器·ios unity3d播放器·ios unity rtsp·ios unity rtmp
美狐美颜SDK开放平台4 小时前
视频美颜SDK如何应对快速转头与大幅度面部动作?
android·人工智能·ios·音视频·直播美颜sdk·视频美颜sdk
甜到心里的蛋糕6 小时前
AI 生成 MV 音频异响排查:频谱定位、片段替换与 Nginx 缓存
人工智能·python·nginx·ffmpeg·音视频·音频处理
镭封16 小时前
从视频文案提取到 AI 配音,短视频制作需要哪些工具?
人工智能·智能手机·音视频·语音识别·媒体
2601_9556624618 小时前
搞笑视频配音怎么做?如何选择有辨识度的声音
大数据·人工智能·音视频·语音识别·媒体
镭封21 小时前
自媒体内容生产怎么提速?文案整理、配音与剪辑流程
人工智能·小程序·音视频·语音识别·媒体
2601_965449081 天前
AI视频制作:做传统文化视频,古文断句配音难,AI怎么正确断句配音?
人工智能·音视频
探鸽小钛1 天前
4G 终端 ES8311 - 挂断一次,下次说话就没声了之解决办法
物联网·音视频·嵌入式·esp32·webrtc