最近让大模型帮忙开发了一个浏览器脚本（油猴脚本），实现控制 B 站动画片播放进度的目的。
## 缘起
最近儿子晚上洗澡后会闹着要看动画片才愿意上床睡觉。好说歹说，终于同意看一集就睡觉。
考虑到视力保护和观看体验，我没有选择手机，而是选择电脑播放 B 站的动画片。屏幕大，而且无需担心出现可能不适合儿童的片头广告，体验非常友好。
但动画片有长有短，太长的视频如果中途掐掉，会导致小孩愤怒和哭泣。所以只能每次拖动进度条到大概最后四分钟的位置。
但每次都要操作还是显得麻烦，而且小孩以后说不定发现我在骗他，那就不太好了。
既然是浏览器，何不借助大模型快速写个扩展脚本试试自动化操作？
## 借助 Claude.ai 写脚本，进度控制有严重问题
一开始我尝试用最近很火的 claude.ai ，写出来的油猴脚本能跳转到最后四分钟，但一播放就会反复回到最后四分钟位置，尝试两次修复，但给出的代码问题依旧。问句如下：
> 开发一个针对 bilibili 站点视频播放控制的油猴脚本，我希望在播放视频时能够自动跳转到最后四分钟的位置开始播放。
## 改用 kimi 重写，第一版核心功能非常完美
也许是外国人的大模型也许对 b 站的代码结构不太熟悉？那就试试到处在发推广的 kimi 吧。
我将差不多的问题发给 Kimi ，没想到包含核心功能的第一版代码顺利运行。
```
// ==UserScript==
// @name Bilibili Auto Skip to Last Four Minutes
// @namespace http://tampermonkey.net/
// @fersion 0.1
// @description Automatically skip to the last four minutes of a Bilibili video
// @author Your Name
// @match *://*.bilibili.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 等待视频元素加载
window.addEventListener('load', function() {
// 获取视频播放器
var player = document.querySelector('video');
if (player) {
// 检查视频时长
player.addEventListener('loadedmetadata', function() {
var duration = player.duration;
// 计算跳转时间点，确保不超过视频总时长
var skipTime = Math.max(duration - 4 * 60, 0);
// 跳转到指定时间点
player.currentTime = skipTime;
});
}
});
})();
```
## 小幅优化 兼顾小孩和大人需求
事情到此算是解决了。不过有个小问题，脚本默认针对所有视频，如果是我自己要看 B 站的长视频，就得将进度条拖回起始位置，略显麻烦。
为此，需要给脚本增加一个判断，只针对动画片自动跳转进度。 我尝试让 kimi 自己判断，它没法准确判断当前视频是否为动画片，只是提供了正确的思路，比如根据视频标签等进行判断，实际给的代码无效。
如果视频标签标注了视频属于动画片，那么通过标签来判断就比较准确。稍微看了几个视频详情页的 HTML 源代码，里面确实有视频的标签信息，动画片的话一般会带上“动画片”这个标签。
继续问 Kimi：
```
判断是否为动画片的规则如下，
比如读取视频详情页的源代码，https://www.bilibili.com/video/BV1nA411x7gT/?spm_id_from=333.788.recommend_more_video.3&vd_source=8b616b33732cab00e369c8f78a43bb13 找到 `[{"tag_id":26517,"tag_name":"动画短片","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null},{"tag_id":42837,"tag_name":"益智","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null},{"tag_id":285829,"tag_name":"早教","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null},{"tag_id":17205837,"tag_name":"11 月打卡挑战 W2","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null}]`
这段代码，看看 tag_name 有没有 “动画”，如果有，判定为动画片
```
返回的脚本为：
```
// ==UserScript==
// @name Bilibili Auto Skip to Last Four Minutes for Animation
// @namespace http://tampermonkey.net/
// @fersion 0.1
// @description Automatically skip to the last four minutes of a Bilibili animation video
// @author Kimi + 廖智海
// @match *://*.bilibili.com/video/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 等待页面加载
window.addEventListener('load', function() {
// 模拟发送请求获取视频标签信息
fetch('/api/view?id=' + BV_ID).then(response => response.json()).then(data => {
// 检查是否存在 "动画" 标签
const isAnimation = data.tags.some(tag => tag.tag_name.includes('动画'));
if (isAnimation) {
// 获取视频播放器
var player = document.querySelector('video');
if (player) {
// 检查视频时长
player.addEventListener('loadedmetadata', function() {
var duration = player.duration;
// 计算跳转时间点，确保不超过视频总时长
var skipTime = Math.max(duration - 4 * 60, 0);
// 跳转到指定时间点
player.currentTime = skipTime;
});
}
}
}).catch(error => {
console.error('Error fetching video tags:', error);
});
});
// 获取 BV 号
function BV_ID() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('bvid');
}
})();
```
过了几天，发现脚本针对有些视频不生效。重新看了下源代码，不同视频可以依据不同的条件来判断是否为动画片。问句里加了一句：
> 增加一个判断方法，如果 html 源代码里面有 `<div class="firstchannel-tag" data-v-000c5325=""><a href="//www.bilibili.com/v/douga/" class="tag-link">动画</a></div>`，div 包含一个链接文字为‘动画’或者‘动画片’的页面，则认定为动画片。
得到的代码把之前的判定方法替换了。于是又稍作说明：
> 我指的是这个判定方法和之前那个 tag 名称的判定方法并存。
更新代码如下：
```
// ==UserScript==
// @name Bilibili Auto Skip to Last Four Minutes for Anime Videos
// @namespace http://tampermonkey.net/
// @fersion 0.1
// @description Automatically skip to the last four minutes of a Bilibili video if it is tagged as an anime or contains a specific tag link
// @author Your Name
// @match *://*.bilibili.com/video/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 等待页面加载
window.addEventListener('load', function() {
// 检查 script 标签内容中是否包含"动画"标签
var scriptTags = document.getElementsByTagName('script');
var isAnimeByTag = false;
for (var i = 0; i < scriptTags.length; i++) {
var scriptContent = scriptTags.textContent;
if (scriptContent.includes('"tag_name":"动画短片"') || scriptContent.includes('"tag_name":"动画"')) {
isAnimeByTag = true;
break;
}
}
// 检查页面中是否存在特定的 div 元素
var isAnimeByLink = document.querySelector('div.firstchannel-tag a.tag-link[href*="douga/"]').textContent === '动画' || document.querySelector('div.firstchannel-tag a.tag-link[href*="douga/"]').textContent === '动画片';
// 如果任一条件满足，则跳转到视频的最后四分钟
if (isAnimeByTag || isAnimeByLink) {
var player = document.querySelector('video');
if (player) {
player.addEventListener('loadedmetadata', function() {
var duration = player.duration;
var skipTime = Math.max(duration - 4 * 60, 0);
player.currentTime = skipTime;
});
}
}
});
})();
```
小孩更大以后，能够识破父亲的诡计，这一招应该会失灵，不过那是以后的事情，以后再说，先解决已知问题即可，无需过度优化。
## 结语
有了生成式 AI ，不会前端技术，只需描述清楚自己的需求，稍微知道一点原理，就能快速获得能够运行的简单脚本，给工作和生活带来便利。
如果你有类似需求或体验，欢迎交流探讨。 |
|
