如何通过js/ts的DOM方法操作bilibili/youtube的视频
Sawana Huang Fri Aug 01 2025
如果你也和之前的我一样有这些疑问：youtube/bilibili视频播放器如何控制视频时间？视频播放器如何实现跳转到指定的时间点？bilibili视频的视频空降链接如何实现？那么这篇文章就是来解答这个问题的！
如果你也和之前的我一样有这些疑问：
- youtube/bilibili视频播放器如何控制视频时间？
- 视频播放器如何实现跳转到指定的时间点？
- bilibili视频的视频空降链接如何实现？
那么这篇文章就是来解答这个问题的！
DOM和HTMLVideoElement
youtube/bilibili的视频播放器都来自一个video元素，类型是HTMLVideoElement，我们可以通过它来直接操作网页中的视频播放器。
这是这两天研究浏览器插件时发现的，例如我想直接设置当前视频播放的时间为视频1分32秒的位置。我可以直接：
document.querySelector("video").currentTime = 92;指定Video元素
document.querySelector("video");
// >>> <video …… ></video>
HTMLVideoElement的强大功能
document.querySelector 是一个JavaScript函数，它允许开发者在HTML文档中通过CSS选择器选择一个元素。当使用 document.querySelector("video") 时，它将返回文档中第一个<video>元素。
这个选择器能做的事情取决于你随后对返回元素执行的操作。以下是一些常见的用途：
1. 播放视频
document.querySelector("video").play();2. 暂停视频
document.querySelector("video").pause();3. 更改视频源
document.querySelector("video").src = "新的视频源地址.mp4";4. 监听事件
document.querySelector("video").addEventListener("ended", function () {
alert("视频播放结束");
});5. 调整音量
document.querySelector("video").volume = 0.5;6. 全屏播放
document.querySelector("video").requestFullscreen();7. 控制播放速度
document.querySelector("video").playbackRate = 1.5;8. 跳转到特定时间
document.querySelector("video").currentTime = 30;实际应用场景
使用这些方法，你可以编写脚本来控制视频的播放、暂停、音量、播放速度以及其他与视频播放相关的行为。记得在使用这些方法之前，确保页面已经加载了视频元素，否则你的脚本可能不会按预期工作。
这些技术特别适用于：
- 开发浏览器扩展
- 创建自定义视频播放器
- 实现视频相关的自动化脚本
- 构建视频学习工具
总结
通过DOM操作HTMLVideoElement，我们可以轻松实现对网页视频的编程控制。无论是bilibili还是youtube，底层都是标准的HTML5 video元素，这为我们提供了统一的操作接口。
掌握这些基础方法后，你就可以开始构建更复杂的视频操作功能，比如自动跳转、播放列表管理、或者视频学习辅助工具。
👋 关于我
我是一个正在学习和实现网站开发的开发者，希望在今年运营出一个 MRR $100 的作品。
如果你发现了什么问题、可改进的地方，或者只是想随意地聊聊天，都非常欢迎联系我！
即刻 @Sawana | X @HSawana9