B站小能手！浏览器的视频新玩法，一键搞定你的B站之旅

前端

2023-07-29 13:49:56

B 站媒体控件：让你的视频播放之旅乐趣多多

B 站媒体控件的神奇之处

作为 B 站资深用户，你是不是也经常被 Chrome 浏览器右上角的媒体控件困扰？点击一下，一个神奇的小框框就弹出，让你轻松掌控视频播放，即使切换到其他标签页，它也能始终相伴，是不是超级方便？

揭秘媒体控件的幕后故事

别以为这是一个自带的功能，其实它是由一个名为“B 站小助手”的扩展程序实现的。这个扩展程序会注入一段 JavaScript 代码到 B 站视频播放页面，扩展视频播放器的原生控制栏，从而添加媒体控件的功能。

使用媒体控件的妙招

学会了原理，接下来就是发挥它的妙用了：

快捷键操作：

空格键：暂停/播放视频
←：后退 10 秒
→：快进 10 秒
↑：增大音量
↓：减小音量
F：全屏/退出全屏

拖动播放进度条：
可以调整视频进度，点击跳转到指定位置。

右键菜单：

循环播放
随机播放
字幕
注释
清晰度
速度
音量
控制台

代码示例：

在 JavaScript 代码中，可以使用以下代码片段来扩展视频播放器的原生控制栏：

const player = document.querySelector('video');
const controls = document.createElement('div');
controls.classList.add('b站-媒体控件');

// 添加播放/暂停按钮
const playPauseButton = document.createElement('button');
playPauseButton.classList.add('play-pause');
playPauseButton.addEventListener('click', () => {
  player.paused ? player.play() : player.pause();
});

// 添加后退按钮
const rewindButton = document.createElement('button');
rewindButton.classList.add('rewind');
rewindButton.addEventListener('click', () => {
  player.currentTime -= 10;
});

// 添加快进按钮
const forwardButton = document.createElement('button');
forwardButton.classList.add('forward');
forwardButton.addEventListener('click', () => {
  player.currentTime += 10;
});

// 将按钮添加到控件栏
controls.appendChild(playPauseButton);
controls.appendChild(rewindButton);
controls.appendChild(forwardButton);

// 将控件栏添加到视频播放器
player.parentNode.insertBefore(controls, player);