当前位置: 首页 > news >正文

HTML视频和音频

<video>元素

<video>元素用于在HTML文档中嵌入视频内容。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

<video>元素属性

controls显示视频控制条(播放/暂停按钮、音量控制等)
autoplay页面加载后自动播放(注意:许多浏览器会阻止自动播放)
width设置视频播放器的宽度
height设置视频播放器的高度
loop视频播放完成后重新开始
muted默认静音
poster视频下载时或用户点击播放前显示的图像
preload页面加载时是否预加载视频

<video width="640" height="360" controls autoplay muted loop poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
  您的浏览器不支持 HTML5 视频。
</video>

HTML<audio>元素

<audio>元素用于在网页中嵌入音频内容,其用法与<video> 元素类似但更简单。
基本用法

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持 HTML5 audio 元素。
</audio>

<audio>元素属性

controls显示音频控制条(播放/暂停按钮、音量控制等)
autoplay页面加载后自动播放(注意:许多浏览器会阻止自动播放)
loop音频播放完成后重新开始
muted默认静音
preload页面加载时是否预加载音频

<audio controls autoplay loop>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</audio>

可以通过JavaScript API控制音频播放:

const audio = document.querySelector('audio');

// 播放音频
audio.play();

// 暂停音频
audio.pause();

// 跳转到指定时间(秒)
audio.currentTime = 30;

// 设置音量(0.0-1.0)
audio.volume = 0.5;

// 监听事件
audio.addEventListener('ended', () => {
  console.log('音频播放结束');
});
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/124880.html

相关文章:

  • springboot调用python文件,python文件使用其他dat文件,适配windows和linux,以及docker环境的方案
  • 2025年优秀的文件加密软件排名
  • PostgreSQL-容器运行时索引修复
  • 6.1es新特性解构赋值
  • spring常用的设计模式
  • MySQL基础命令
  • 【蓝桥杯】15届java研究生组E砍柴
  • UIMeter-UI自动化软件(产品级)
  • 2025前端面试题
  • C++中std::move()的正确使用相关例子
  • C语言个人笔记
  • 前端面试总结3
  • Lumion 与 Enscape 怎么选?附川翔云电脑适配指南
  • 在3ds Max中视口显示为黑色或深灰色
  • leetcode68.左右文本对齐
  • 《DeepSeek RAG 增强检索知识库系统》Ollama RAG 知识库上传、解析和验证之四
  • mysql 禁止 读 某个 表
  • 第18章:基于Global Context Vision Transformers(GCTx_unet)网络实现的oct图像中的黄斑水肿和裂孔分割
  • 【Audio开发三】音频audio中帧frameSize ,周期大小periodsize,缓冲区buffer原理详解以及代码流程分析
  • 《嵌入式开发实战:基于Linux串口的LED屏显系统设计与实现》
  • Clickhouse试用单机版部署
  • 【完整可用】使用openhtmltopdf生成PDF(带SVG)
  • 策略模式结合模板方法模式
  • Go语言入门-反射4(动态构建类型)
  • PyCharm Community社区版链接WSL虚拟环境
  • 【笔记ing】AI大模型-01大模型基础综述
  • 医学科研工作者的AI助手:高效生成文献结构图和实验流程图
  • U9新开发webapi无授权
  • 使用Docker创建postgres
  • 智慧医院室内导航系统架构拆解:技术选型与性能攻坚指南