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('音频播放结束');
});
相关推荐
海盐泡泡龟1 小时前
web常见的攻击方式有哪些?如何防御?
前端·vue.js·webpack
EndingCoder3 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder3 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars3 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾4 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
Oscar_02085 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡5 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder5 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do5 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js
王者鳜錸6 小时前
Vue3集成Element Plus完整指南:从安装到主题定制下-实现后台管理系统框架搭建
前端·javascript·vue.js