HTML视频和音频

<video>元素

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

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页面加载时是否预加载视频

html 复制代码
<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> 元素类似但更简单。

基本用法

html 复制代码
<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页面加载时是否预加载音频

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

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

javascript 复制代码
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('音频播放结束');
});
相关推荐
lh_12542 小时前
前端 uni-app 初步使用指南
前端·arcgis·uni-app
患得患失9492 小时前
【前端】【面试】在 Nuxt.js SSR/SSG 应用开发的 SEO 优化方面,你采取了哪些具体措施来提高页面在搜索引擎中的排名?
前端·javascript·搜索引擎
layman05282 小时前
ES6/ES11知识点 续二
前端·ecmascript·es6
ejinxian3 小时前
npm,yarn,pnpm,cnpm,nvm,npx包管理器常用命令
前端·npm·pnpm·yarn·nvm·npx
爱编程的鱼3 小时前
C# 运算符重载深度解析:从基础到高阶实践
前端·算法·c#
大道归简4 小时前
自动化实现web端Google SignUp——selenium
前端·selenium·自动化
xuebodx09235 小时前
使用HunyuanVideo搭建文本生视频大模型
人工智能·pytorch·python·计算机视觉·chatgpt·音视频·视频
普通young man5 小时前
QT | 常用控件
开发语言·前端·qt
想不明白的过度思考者6 小时前
为了结合后端而学习前端的学习日志——【黑洞光标特效】
前端·学习
twodragon&primy6 小时前
CSS布局
开发语言·前端·css·算法·html5