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

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

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

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

image.png

image.png

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

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

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

百度网盘视频笔记操作:

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

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

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

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

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

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

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

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

B 站视频笔记操作:

  • 思源笔记

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

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

    26020 引用 • 107981 回帖
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 更新了该帖

相关帖子

优质回帖
  • coriger 1
    作者

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

  • coriger 1
    作者

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

  • coriger 1
    作者

    百度网盘现在已经支持了

欢迎来到这里!

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

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

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

    3 回复
  • 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 回复
  • 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

    明白了!感谢您 ❤️

  • 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,没有办法点击“链接的编辑框”

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

    1 回复
  • 这个插件你能正常运行吗,我每个版本都去试了,都用不了

    1 回复
  • MrMang via Android

    我也是,放弃了

  • li80 1 评论

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

    2 回复
    不好意思,输错了,是 JumpVideo,搜百度 B 站都行。
    li80
  • 好的,我试试,谢谢

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

    2 回复
  • yeluowusheng

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

  • coriger
    作者

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

  • coriger
    作者

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

请输入回帖内容 ...

推荐标签 标签

  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 734 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • 新人

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

    52 引用 • 228 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 597 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 2 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 4 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖
  • Shell

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

    125 引用 • 74 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 251 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1443 引用 • 10082 回帖 • 497 关注
  • Outlook
    1 引用 • 5 回帖 • 5 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 229 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 9 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖 • 1 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 2 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 59 关注
  • OpenCV
    15 引用 • 36 回帖 • 7 关注