跳转到内容
View in the app

A better way to browse. Learn more.

彼岸论坛

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[分享创造] 5 分钟开发浏览器脚本 防止儿子沉迷动画片

发表于

最近让大模型帮忙开发了一个浏览器脚本(油猴脚本),实现控制 B 站动画片播放进度的目的。

缘起

最近儿子晚上洗澡后会闹着要看动画片才愿意上床睡觉。好说歹说,终于同意看一集就睡觉。

考虑到视力保护和观看体验,我没有选择手机,而是选择电脑播放 B 站的动画片。屏幕大,而且无需担心出现可能不适合儿童的片头广告,体验非常友好。

但动画片有长有短,太长的视频如果中途掐掉,会导致小孩愤怒和哭泣。所以只能每次拖动进度条到大概最后四分钟的位置。

但每次都要操作还是显得麻烦,而且小孩以后说不定发现我在骗他,那就不太好了。

既然是浏览器,何不借助大模型快速写个扩展脚本试试自动化操作?

借助 Claude.ai 写脚本,进度控制有严重问题

一开始我尝试用最近很火的 claude.ai ,写出来的油猴脚本能跳转到最后四分钟,但一播放就会反复回到最后四分钟位置,尝试两次修复,但给出的代码问题依旧。问句如下:

开发一个针对 bilibili 站点视频播放控制的油猴脚本,我希望在播放视频时能够自动跳转到最后四分钟的位置开始播放。

改用 kimi 重写,第一版核心功能非常完美

也许是外国人的大模型也许对 b 站的代码结构不太熟悉?那就试试到处在发推广的 kimi 吧。

我将差不多的问题发给 Kimi ,没想到包含核心功能的第一版代码顺利运行。

// ==UserScript==
// @name         Bilibili Auto Skip to Last Four Minutes
// @namespace    http://tampermonkey.net/
// @version      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/
// @version      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/
// @version      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[i].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 ,不会前端技术,只需描述清楚自己的需求,稍微知道一点原理,就能快速获得能够运行的简单脚本,给工作和生活带来便利。

如果你有类似需求或体验,欢迎交流探讨。

Featured Replies

No posts to show

创建帐户或登录来提出意见

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.