登录 注册

思源笔记油猴脚本 视频时间戳 + 截图

太晚了人已晕，大概给各位看一下，文档明天写，有 bug 明天再说，溜！

KuiyueRO/siyuan-media-timestamp

更新

2025.01.13-v1.2

功能

  • bilibili 全屏模式
  • 百度网盘支持
    • （这个我没用过，也没找到时间戳，所以让 ai 实现了一个，测试是能用的）
  • 输入备注
  • 网站匹配规则

UI

  • 悬停高亮效果：非鼠标悬停状态下面板应该是隐约可见的
  • 面板背景模糊效果
  • 已创建笔记的按钮会变暗

面向未来

  • 现在，截图块、备注块将会与时间戳一起自动合并为超级块，且最多只会有一个属性值叫 mediacard 的超级块，不会导致嵌套问题
  • 现在，截图、时间戳、备注块、超级块将会带有自定义属性

v1.1

  • 隐藏工具栏
  • 支持 firefox

支持的功能

做了不少优化，主要是通过自定义属性将视频和笔记一一对应上了，不用手动填充 ID。

  1. 一键创建视频笔记。
  2. 自动识别对应的笔记，时间戳和截图会自动发送到网页对应的笔记中。
  3. 时间戳列表。
    1. 自动获得标注过的时间戳，在网页中实时显示
    2. 点击可跳转
    3. 拖拽移动
  4. 支持快捷键

为什么要做这个脚本

其实视频时间戳一直是我的刚需，思源笔记的本地视频已经有好几个比较不错的方案了，但在线视频一直是一个麻烦事。

如果嵌入到思源笔记内，不论是字幕、弹幕、评论、清晰度亦或是移动端都是大问题。

昨晚想了想不如直接做个浏览器脚本，在浏览器扩展 + 思源本地 API 的强劲加持下，直接在浏览器中打时间戳 + 回顾。

又省事，效果也不错。信息还都保存到思源中了。

如何使用

在顶部链接中将代码复制到油猴扩展中启用即可。嗯我也第一次发布油猴脚本，自动更新等都还不了解，见谅。

未来计划

  1. 和思源双向同步时间戳笔记。
  2. 全屏支持（？不一定能做，但我比较刚需）
  3. 支持更加细致的功能
    1. 打时间戳时向前偏移几秒（操作会导致时间戳实际比较滞后）
    2. 自动暂停
    3. 记完笔记后自动播放

感谢

该脚本受以下几个插件的启发，若不是它们我没想过能这么玩。

  1. 思源再提醒油猴插件 思源再提醒油猴插件
  2. 思源视频笔记插件 /B 站 / 百度网盘一键入库 思源视频笔记插件 /B 站 / 百度网盘一键入库
  3. 搜索引擎显示思源 搜索引擎显示思源
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    24747 引用 • 101693 回帖
2 引用
[ 思源笔记油猴脚本 视频时间戳 + 截图］ipad 端体验报告和建议 • mark-j
B 站视频时间戳 • ACai
4 操作
ACai 在 2025-01-13 07:40:49 更新了该帖
ACai 在 2025-01-07 09:16:15 更新了该帖
ACai 在 2025-01-07 08:51:34 更新了该帖
ACai 在 2025-01-07 07:45:56 更新了该帖
11 感谢
2 关注
13 收藏
2 赞同
2 引用
4 操作
37 回帖
6
4
2
2
2
983 391 78 1 513

相关帖子

优质回帖
  • wilsons • • 1 赞同
    付费者 捐赠者

    @ACai 其实我推荐的的 UI 应该长这样

    image.png

    1. 用户输入了备注再点击，可以加入备注文字。

    2. 按钮顺序调整，常用的功能放到前面

    3. 列表显示时间和备注文字

    4. 增加可折叠到右侧功能，就像这个（仅供参考）

      image.png

  • ACai • • 1
    订阅者 付费者 支持者 作者

    油猴上面传了

    https://greasyfork.org/zh-CN/scripts/523628-%E6%80%9D%E6%BA%90%E5%9C%A8%E7%BA%BF%E8%A7%86%E9%A2%91%E6%97%B6%E9%97%B4%E6%88%B3%E5%92%8C%E6%88%AA%E5%9B%BE

  • wilsons • • 1
    付费者 捐赠者

    1.2 使用体验反馈

    1. 其实创建视频按钮可以与后面的两个按钮合二为一，自动创建体验更佳
    2. 备注应当显示到列表中，这样体验更佳
    3. 百度网盘不显示，添加了网站匹配规则也没用，我的播放地址是这个 https://pan.baidu.com/pfile/video
    4. 输入备注信息可能会导致全屏，尤其刷新页面后（另外，关于备注，目前的体验，第一次使用的时候还以为没输入成功，建议输入内容不用消失，正如 2 所说，备注显示在列表中更好，不然点击列表时，光看时间还是一脸懵逼的）
    5. 全屏下无法显示设置弹出框，多次点击后，退出全屏，页面出现多个设置弹出框
37 回帖
思源笔记油猴脚本 视频时间戳 + 截图

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • pakeh2866 •
    付费者

    👍

  • mark-j •
    付费者
    该回帖仅作者和楼主可见
    1 回复
  • ACai •
    订阅者 付费者 支持者 作者

    应该可以，我还没用过百度网盘看视频，晚上看看

  • wilsons •
    付费者 捐赠者

    鼎力支持！

    建议优化下 ui，太大占空间，可能遮挡重要信息。

    建议支持可在视频全屏下操作，如果好实现的话。

    建议支持常见网盘，比如百度网盘等，如果做到多网站支持，这是个力气活，仅供参考。

    2 回复
  • PiChou •
    订阅者 付费者

    牛逼嗷

  • ACai •
    订阅者 付费者 支持者 作者

    ui 会优化的，全屏昨晚试了没成功。

    但看了沉浸式翻译后，感觉网页全屏有点希望，视频全屏可能只有塞到底部的进度条那里了

    1 回复
  • mm-o • • 1 评论
    订阅者 付费者

    在笔记中点击时间戳，不会在当前页面跳转，只会打开一个新页面跳转。这是一个痛点，非常痛 😭

    1 回复
    我为了解决这问题，专门在网页中做了个时间戳列表 X.X，点那个就可以了，实时的
    ACai •
  • ACai •
    订阅者 付费者 支持者 作者

    另外后面看看能不能拿思源的网络伺服做点文章，比如在页面内显示一个视频对应笔记的编辑器浮窗什么的。但我没啥头绪和信心，最大的可能是将时间戳和笔记显示到网页的时间戳列表中，用块更新来做到笔记的输入和同步

  • wilsons • • 1 评论
    付费者 捐赠者

    也不用放到进度条那里，刚才简单看了下 b 站，全屏时可以把工具栏放到.bpx-player-container 元素内就行。

    image.png

    其他网站应该类似，思路就是一般全屏会有一个容器 div，只要放到这个容器内，就同样能在全屏时显示了。

    另外，如果能支持域名匹配或黑名单和白名单就好了，所有网站匹配有点受影响，虽然我可以改，但小白用户不友好 😄

    1 回复
    1 操作
    wilsons 在 2025-01-07 11:21:15 更新了该回帖
    油猴本身有匹配能力，所以忘做了，下次一定 🤓
    ACai •
  • ACai •
    订阅者 付费者 支持者 作者

    🎉 那就 ok，看来是能行的

  • ACai •
    订阅者 付费者 支持者 作者

    clipboardimage1736268408.png

    后面就改这样吧，也就不会再有右上角的工具栏了

    1 回复
    1 操作
    ACai 在 2025-01-08 00:55:35 更新了该回帖
  • wilsons • • 1 评论
    付费者 捐赠者

    6 啊，我觉得可以折叠成一个小按钮，点击展开，平时不用折叠，第一次加载如果时间列表有对应的时间就展开。

    我再想想
    ACai •
  • Suonian •
    付费者

    666

  • Suonian •
    付费者

    请问，可不可以增加一个，直接复制并粘贴时间戳到光标位置（可以在任意文档中）的功能，感觉有时候并不需要单独创建一个视频笔记。

    1 回复
  • ACai • • 1 评论
    订阅者 付费者 支持者 作者
    1. 到光标位置这个功能目前不会考虑，脚本走的是 api，并不是真正意义上的复制粘贴，离开思源后我不知道能不能获取到光标所在位置的块 ID。
    2. 另外我考虑过将匹配视频网址的自定义属性写入块而非文档，以支持在任意文档中放入时间戳（同时功能完整），但感觉不太有必要，这样子属性比正文还长。
    3. 创建视频笔记的作用在于不需要指定文档 ID，也不需要把思源笔记分屏放在一边，看视频的时候就可以直接标注了
    1 我觉得可以做成复制时间戳视频地址到剪切板
    wilsons •
  • MasterYS • • 5 评论
    付费者

    我用的国际版火狐，点设置没反应，只能自己在代码里修改

    修了，过几天能看到新版本。
    ACai •
    从 github 更新脚本
    ACai •
    @ACai 好了正常了，但是有个新的小问题，暗黑模式的话输入框底色是黑的，输入后看不到，但是使用没问题
    MasterYS •
    @MasterYS 等会我看看，暗黑模式是 firefox 的功能吗
    ACai •
    @ACai 插件的 DARK READER
    MasterYS •
  • Lanternight •
    付费者 捐赠者

    感谢！

  • ACai •
    订阅者 付费者 支持者 作者

    更新了，UI 应该好很多了（我还没去看油猴怎么自动更新，要从 github 手动替换）。

    全屏还没支持

    1 回复
  • wilsons • • 1 评论
    付费者 捐赠者

    👍 刚才测试了下，百度网盘时间列表不显示，b 站没问题

    image.png

    另外，把脚本放到这个平台 https://greasyfork.org/zh-CN/script_versions/new ，然后油猴脚本就可以自动更新了，什么都不用做，只需放到这个平台就行了

    百度忘做了，每天打开都会忘 🤣
    ACai •
  • wilsons • • 1 赞同 • 1 评论
    付费者 捐赠者

    @ACai 其实我推荐的的 UI 应该长这样

    image.png

    1. 用户输入了备注再点击，可以加入备注文字。

    2. 按钮顺序调整，常用的功能放到前面

    3. 列表显示时间和备注文字

    4. 增加可折叠到右侧功能，就像这个（仅供参考）

      image.png

    1、3 肯定会做。图标排序我就不做了，就四个图标，后期用快捷键更好。折叠会有，但侧边栏在规划里另有大用
    ACai • • 1
  • ACai • • 1 评论
    订阅者 付费者 支持者 作者

    17d287ccb84b896623d6a5140dabd34c.png

    1a8aefdc9d67a0209c368bc7391fffca.png

    大佬，什么时候更新?
    cxg318 •
  • ACai •
    订阅者 付费者 支持者 作者

    更新了

  • ACai •
    订阅者 付费者 支持者 作者

    试了一堆备注块的编辑方案，都不太舒服，还是思源编辑器最舒服。

    决定了，下个版本把当前视频的笔记以 iframe 形式嵌入到当前网页的右侧边栏，昨晚已经实现了，就是有点丑，还没放出来。

    下个版本的预告

    image.png

    1 操作
    ACai 在 2025-01-13 10:20:36 更新了该回帖
  • yumenawei • • 1 评论
    订阅者 支持者 捐赠者 勇士

    老哥，求放在 greasyfork 上可以自动更新

    新注册的账号不能立刻发，得等等
    ACai •
  • Frostime • • 1 评论
    订阅者 付费者 支持者 捐赠者

    放在 greasyfork 上面可以绑定 github url 地址，这样只要有推送就会自动更新。

    image.png

    好嘞，中午弄一下
    ACai •
  • Tisamn • via Android
    付费者

    牛批，好用！👍

  • MasterYS • • 3 评论
    付费者

    考虑可以自定义设置插入到指定文档下的子文档，目前可以手动修改代码实现

            try {
            // 创建文档
            const docData = {
                notebook: config.NOTEBOOK_ID,
                path: `/自定义/${title}`,
                markdown: content
            };
​
    想自定义根目录的路径么
    ACai •
    @ACai 是的，修改这里能实现，已经够用了，主要看你们有这需求嘛。
    MasterYS •
    @MasterYS 那就先不弄了
    ACai •
  • cxg318 • • 1 评论

    // 定期刷新时间戳列表
    setInterval(updateTimestampList, 20000);//时间稍改长一点，不然备注没写好，就刷新了。

    已知问题
    ACai •
  • ACai • • 1
    订阅者 付费者 支持者 作者

    油猴上面传了

    https://greasyfork.org/zh-CN/scripts/523628-%E6%80%9D%E6%BA%90%E5%9C%A8%E7%BA%BF%E8%A7%86%E9%A2%91%E6%97%B6%E9%97%B4%E6%88%B3%E5%92%8C%E6%88%AA%E5%9B%BE

    1 回复
  • yumenawei • • 1 评论
    订阅者 支持者 捐赠者 勇士

    老哥，我在 Vivaldi 浏览器上不显示工具，是有什么限制吗？
    Vivaldi 是一个 chrome 内核的浏览器。

    如果是油管和百度的话，我这边有个 bug，晚上修。昨天忘测了
    ACai •
  • yumenawei • • 2 评论
    订阅者 支持者 捐赠者 勇士

    是 B 站的

    image.png

    视频窗口的右上角有个隐约可见的浮窗
    ACai •
    鼠标悬停显示，尽量不阻碍视频的观看
    ACai •
  • yumenawei •
    订阅者 支持者 捐赠者 勇士

    找到了，感谢

  • NieJianYing • via macOS

    可以支持 http://192.168.1.1:6806/这种地址吗

  • wilsons • • 1
    付费者 捐赠者

    1.2 使用体验反馈

    1. 其实创建视频按钮可以与后面的两个按钮合二为一，自动创建体验更佳
    2. 备注应当显示到列表中，这样体验更佳
    3. 百度网盘不显示，添加了网站匹配规则也没用，我的播放地址是这个 https://pan.baidu.com/pfile/video
    4. 输入备注信息可能会导致全屏，尤其刷新页面后（另外，关于备注，目前的体验，第一次使用的时候还以为没输入成功，建议输入内容不用消失，正如 2 所说，备注显示在列表中更好，不然点击列表时，光看时间还是一脸懵逼的）
    5. 全屏下无法显示设置弹出框，多次点击后，退出全屏，页面出现多个设置弹出框
  • NieJianYing • via macOS

    加载失败:请求失败

    是不是得开什么权限

  • dorauemon • • 1 评论 via macOS
    付费者

    提个建议，ui 能否不要出现在视频内部，虽然是半透明的，但是看视频的时候一直有那么一块真的非常影响观看感受，每打开一个新视频都要手动拖到页面角落去，很麻烦。

    可以做成弹出式，或者就默认位置放在右下角最边上，这样体验会好很多。

    嗯这个我还在考虑，但是有几个问题啊，弹出式的对于快速输入也不太友好，放到外部的话全屏下也不是特别好，这个我还在考虑怎么办
    ACai •
  • mark-j •
    付费者

    [ 思源笔记油猴脚本 视频时间戳 + 截图］ipad 端体验报告和建议 - 链滴 一点点反馈

请输入回帖内容 ...
ACai
回帖
232
 帖子
22
 积分
53783