<audio> 和 <video> 原生嵌入媒体,具有内置控件和 JavaScript API — 无需插件。
html
Your browser does not support video.
controls — 没有它,UI 不会显示(你需要通过 JS 控制)。<source> — 浏览器使用它支持的第一种格式(跨浏览器使用 WebM/MP4)。poster — 播放前的占位符图像。preload — none / metadata / auto;使用 metadata 避免在需要之前下载大文件。autoplay muted loop — 用于背景视频(大多数浏览器要求 muted 才能允许自动播放)。<track> — 用于可访问性的字幕/副标题(一个 .vtt 文件)。const v = document.querySelector("video");
v.play(); // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
<audio> 的工作方式完全相同,只是没有可视框架/海报。
原生媒体元素为你提供跨浏览器播放、可访问性(通过 <track> 的字幕)和完整的 JS API 来构建自定义播放器。
了解格式回退模式、muted 用于自动播放的规则和性能优化的 preload 涵盖了嵌入媒体的实际要点。