登录 注册

思源视频笔记插件 /B 站 / 百度网盘一键入库

本贴最后更新于 290 天前，其中的信息可能已经时移世改

刚试了下通义听悟的浏览器插件，可以设置监听当前浏览器页面的音频实时转成文本，搭配视频笔记用还不错

还有一个是 Kimi 官方出的插件，直接划线解释、总结

image.png

image.png

=============

把百度网盘的也加上了，虽然我自己用不上

所有生成的文档里初始的数据都不要做更改，否则影响正常使用

百度网盘视频笔记操作：

=============

之前看社区里有人发帖提视频笔记的需求，恰好最近我也有这方面的需要，索性就按照自己的想法开发了一个浏览器插件来实现 B 站视频的一键入库，这样的话就可以在思源里直接做视频笔记

考虑到要抓数据，浏览器插件在这方面是比较好做的，后续抖音、Youtube 看需要也会陆续加上，因为有些数据要走劫持逻辑，B 站前端有缓存不发起请求就不会触发下载按钮的刷新，这种情况一般是多强刷几次或者切换下分 P

关于平台视频数据可能丢失的问题，我的想法是可以等视频看完做完笔记之后选择持久化到本地，做一个备份，一旦平台数据没有了，自动把平台链接切换成本地链接就行了，相当于把一个跨域的 iframe 标签换成一个 video 标签，然后单独再写一套本地视频的逻辑，实现起来很简单，这种其实还是小概率事件，视频笔记感觉就算做，数据量也有限，其实我自己用的话大概率是不需要这个功能

我自己是很少做视频笔记的，所以也不清楚这方面功能优化的方向在哪里，等用一段时间有痛点了再做安排

仔细想下，还是之前用 edge 分屏的方式实现更灵活，那个实现起来更简单而且扩展性还好，只要网页上能播的都能做笔记，唯一麻烦点的是每次打开笔记需要单独开个分屏，还需要一个宽屏显示器，像现在这样把视频用 iframe 的方式放到思源文档里成本高不少，主要是跨域通信上，包括之前说的数据失效替换也更麻烦一些

像抖音的视频还有跨域的限制，还需要借助插件修改请求头，不然视频都播放不了，百度云上的视频都没法用 iframe 内嵌到思源文档里，后面看情况吧，有特别的需要才考虑重新支持分屏播放的逻辑，我相信没那么多人需要视频笔记

插件：https://github.com/coriger/siyuan-video-extension

B 站视频笔记操作：

  • 思源笔记

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

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

    25730 引用 • 106477 回帖
4 引用
[ 思源笔记油猴脚本 视频时间戳 + 截图］ipad 端体验报告和建议 • mark-j
思源笔记油猴脚本 视频时间戳 + 截图 • ACai
思源数据库 API/ 视频 RSS 源定制 / 视频笔记 • coriger
对思源剪藏插件的功能需求
5 操作
coriger 在 2024-08-13 23:18:31 更新了该帖
coriger 在 2024-08-13 23:17:58 更新了该帖
coriger 在 2024-08-13 05:38:42 更新了该帖
coriger 在 2024-08-13 05:31:08 更新了该帖 coriger 在 2024-08-12 15:44:18 更新了该帖
8 感谢
2 关注
13 收藏
1 赞同
4 引用
5 操作
33 回帖
7
2
2
2.2k 666 1 1.0k 8 1 6 1 514

相关帖子

优质回帖
  • coriger • • 1
    作者

    网盘这种可以用左右分屏的方式来搞，其实这种还更好点，基本可以适配所有站点，后面应该只有抖音、B 站、Youtube 会把视频数据用 iframe 嵌入思源，其余的都用这种左右分屏的方式搞

  • coriger • • 1
    作者

    类似这种效果，这样搞，还可以用上网盘的 AI 功能

  • coriger • • 1
    作者

    百度网盘现在已经支持了

33 回帖
思源视频笔记插件 /B 站 / 百度网盘一键入库

欢迎来到这里！

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

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

    点赞，网盘的视频不支持吗

    3 回复
  • CongSec •
    付费者 捐赠者

    666

  • coriger • • 1
    作者

    网盘这种可以用左右分屏的方式来搞，其实这种还更好点，基本可以适配所有站点，后面应该只有抖音、B 站、Youtube 会把视频数据用 iframe 嵌入思源，其余的都用这种左右分屏的方式搞

  • coriger • • 1
    作者

    类似这种效果，这样搞，还可以用上网盘的 AI 功能

  • coriger • • 1
    作者

    百度网盘现在已经支持了

  • mark-j •
    付费者

    顶一下

  • mark-j • • 1 评论
    付费者

    已经非常强了！！image.png就是时间戳不支持大纲，要手动复制到笔记结尾

    1 回复
    我按照作者的教程配置参数，没有应用成功，你应用成功了？
    MrMang •
  • pakeh2866 •
    付费者

    支持！

  • avaisa •
    付费者

    支持

  • coriger •
    作者

    嗯，优化了下顶部的时间戳，默认加了一个 4 级标题，大纲里面点时间戳直接跳转，时间戳右边可以加一个短标题方便快速定位

    image.png

    1 回复
    2 引用
  • zxhd86 • • 1 • 1 赞同
    订阅者 先知

    我觉得思路要放开点，为啥要一直往思源里塞呢，直接写个浏览器插件，在视频网站用 iframe 打开思源的界面进行操作不行吗trollface

  • mark-j •
    付费者

    作者你好！我的设想是这样，因为有些学科是做“大纲笔记”的，所以我是设想点时间戳的时候，直接写入笔记的末尾，截图也是。

    image.png

    1 回复
  • coriger • • 1 评论
    作者

    加了，已经推送到 github 上了，你下下来试试看，我自己随便测了下，有个问题是思源编辑器编辑的时候它自己有点击事件的监听，应该是有个异步拉取 block 数据的接口请求，好像会导致第一次点击暂时丢失焦点，所以使用这种自由插入时间戳的时候有时候你点击了新的位置，其实它焦点可能还在之前点击的位置上，最好是插入的时候鼠标点两次，这样焦点基本能切过来，插入的时候也能准确插入，如果你没有点击没获取到焦点的话就还是按照之前的逻辑在文档末尾追加

    我自己是用之前的两个按钮就够了，所以这次我是单独新加了两个按钮，作为这种自由插入的方式

    1 回复
    编辑框点两次，不是插入按钮点两次
    coriger •
  • sim •
    订阅者

    作者您好，“找到 视频笔记模版.sy.zip 文件，导入思源”请问这一步导入是从哪导入呢？

    1 回复
  • coriger • • 1
    作者

    思源里面随便找一个文件夹，选择右边的更多，里面有导入菜单

    image.png

    image.png

    1 回复
  • sim •
    订阅者

    明白了！感谢您 ❤️

  • MrMang •
    订阅者 付费者

    image.png

    作者你好，我使用你的插件，有两个问题，第一是点击“下载单视频/下载合集”按钮没有用，第二是没有视频上方的“笔记模式”，按照你 github 上配置了 common.js，但是我的 F12 页面里面有 5 个 b3-list b3-list--background，尝试过 ctr+F5，都没有用，请问是什么问题呢？

    ========

    经过排查，看到插件在运行时有这个问题，，我把截图和截图中显示不全的问题代码复制出来，请大佬帮忙看看怎么解决啊

    image.png

    var currentPageUrl;
const pageTemplateUrl = "E:\\SiYuanData\\data\\templates\\视频笔记模板.md"
const Authorization = "token wug2b7q5ul5cjcjx"
const notebook = "20220526004752-xsoh6fo"

/**
 * 把视频时长转换成字符串格式 
 * 参数单位是毫秒
 * @param {*} milliseconds 
 * @returns 
 */
function parseVideoTimeFromDuration(milliseconds){
    // 计算小时数
    var hours = Math.floor(milliseconds / (60 * 60 * 1000));
    // 计算剩余的分钟数
    var minutes = Math.floor((milliseconds % (60 * 60 * 1000)) / (60 * 1000));
    // 计算剩余的秒数
    var seconds = Math.floor((milliseconds % (60 * 1000)) / 1000);

    // 格式化小时、分钟和秒，确保它们是两位数
    hours = hours.toString().padStart(2, '0');
    minutes = minutes.toString().padStart(2, '0');
    seconds = seconds.toString().padStart(2, '0');

    // 根据时长判断并拼接字符串
    if (hours > 0) {
        return `${hours}:${minutes}:${seconds}`; // xx:yy:zz
    } else if (minutes > 0) {
        return `${minutes}:${seconds}`; // xx:yy
    } else {
        // 如果分钟和小时都为0，但秒数可能不为0（尽管在这个特定情况下它会是0，因为至少要有1秒）
        // 但为了完整性，我们还是返回秒数（尽管前导0可能看起来不必要）
        return `00:${seconds}`; // 00:xx，但注意这个分支实际上不太可能被触发，除非有特别的逻辑需要它
        // 或者，如果确实只需要在秒数大于0时才显示，可以改为：
        // return seconds > 0 ? `00:${seconds}` : '00:00';
    }
}


/**
 * 调用思源api
 * @param {} url 
 * @param {*} json 
 * @returns 
 */
async function invokeSiyuanApi(url,json){
    console.log("invoke siyuan api:"+url)
    console.log("invoke siyuan json:"+JSON.stringify(json))

    try {
        const response = await fetch(url, {
            method: "POST",
            headers: {
                "Authorization": Authorization,
                "Content-Type": "application/json",
            },
            body: JSON.stringify(json)
        });
        // 确保响应状态码是2xx
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        // 你可以继续处理响应，例如获取JSON数据
        const data = await response.json();
        console.log("invoke siyuan api success,result is "+JSON.stringify(data))
        return data;
    } catch (error) {
        console.error('There has been a problem with your invokeSiyuanApi operation:', error);
    }
}


/**
 * 上传文件
 * @param {*} url 
 * @param {*} json 
 * @returns 
 */
async function invokeSiyuanUploadApi(formData){

    try {
        const response = await fetch("http://127.0.0.1:6806/api/asset/upload", {
            method: "POST",
            headers: {
                "Authorization": Authorization,
            },
            body: formData
        });
        // 确保响应状态码是2xx
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        // 你可以继续处理响应，例如获取JSON数据
        const data = await response.json();
        console.log("invoke siyuan upload api success,result is "+JSON.stringify(data))
        return data;
    } catch (error) {
        console.error('There has been a problem with your invokeSiyuanApi operation:', error);
    }
}
​
    2 回复
    3 操作
    MrMang 在 2024-08-19 21:49:48 更新了该回帖
    MrMang 在 2024-08-19 21:48:40 更新了该回帖
    MrMang 在 2024-08-19 21:34:37 更新了该回帖
  • coriger •
    作者

    1、先配置好参数，下载按钮才能正常调用

    2、笔记模式那个按钮不是插件的内容，可以忽略

    3、你找到的 5 个元素中，注意看节点的 data-url 属性，里面的值就是 notebook 字段

  • Prree • via Android
    付费者

    解决了吗

    1 回复
  • MrMang • via Android
    订阅者 付费者

    这两天还没有尝试，你成功了吗

    1 回复
  • mark-j • • 1 评论
    付费者

    大佬，有没有可能加入快捷键

    嗯，这个后续可以加一个
    coriger •
  • Prree •
    付费者

    没有，试了几次都是一样

    1 回复
  • mark-j •
    付费者

    发现一个 bug，没有办法点击“链接的编辑框”

  • mark-j •
    付费者

    百度云视频笔记时间戳 xquicker 而 - 链滴 (ld246.com) 作者看这里

  • li80 •
    订阅者 付费者

    普通人的确没有太多需要做视频笔记的人，但使用思源笔记的，就不一定了。

    1 回复
  • MrMang •
    订阅者 付费者

    这个插件你能正常运行吗，我每个版本都去试了，都用不了

    1 回复
  • MrMang • via Android
    订阅者 付费者

    我也是，放弃了

  • li80 • • 1 评论
    订阅者 付费者

    我找到了一个免费的视频笔记软件 JumpVidel，可以通用于所有笔记软件，非仅思源。

    2 回复
    不好意思，输错了，是 JumpVideo，搜百度 B 站都行。
    li80 •
  • MrMang •
    订阅者 付费者

    好的，我试试，谢谢

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

    b 站 iframe 导致视频和截图清晰度过低的问题老哥有办法解决吗，还是说我操作的姿势不对？感谢感谢 🙏 🙏 🙏

    2 回复
  • yeluowusheng •

    刚搜索了一下，好像没找到，有地址能分享一下吗？

  • coriger •
    作者

    这个我试了挺久的没找到什么好的方式，我自己用的话，基本上能在 youtube 找到视频源的就不看 b 站的

  • coriger •
    作者

    我看论坛里面分享的 b 站视频好像也是 360P 的，浏览器已经登录了 b 站账号好像也没起到什么效果，切换分辨率都是直接跳转到 b 站

请输入回帖内容 ...
coriger
回帖
48
 帖子
7
 积分
697

近期热议

推荐标签 标签

  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 185 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    171 引用 • 1537 回帖
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    186 引用 • 1020 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 832 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 386 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 636 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 86 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 2 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    209 引用 • 2040 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 2 关注
  • 倾城之链
    23 引用 • 66 回帖 • 169 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • 自由行
    • 2 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    947 引用 • 1460 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    56 引用 • 85 回帖
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 637 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 704 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖

最新标签