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

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

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

image.png

image.png

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

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

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

百度网盘视频笔记操作:
https://www.bilibili.com/video/BV19QYqeBEgi/?vd_source=6e1ad07c1e4ac69339c0b182ac45f53b

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

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

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

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

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

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

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

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

B 站视频笔记操作:
https://www.bilibili.com/video/BV1rdYfeLE87/?vd_source=6e1ad07c1e4ac69339c0b182ac45f53b

  • 思源笔记

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

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

    23104 引用 • 93006 回帖
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
    作者
  • 其他回帖
  • coriger 1
    作者

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

  • mark-j

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

    image.png

    1 回复
  • 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 更新了该回帖
  • 查看全部回帖

推荐标签 标签

  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • 快应用

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

    15 引用 • 127 回帖 • 2 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • 安全

    安全永远都不是一个小问题。

    200 引用 • 816 回帖 • 1 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    410 引用 • 1246 回帖 • 587 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8496 引用 • 38707 回帖 • 153 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 899 回帖 • 1 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 72 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 4 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖 • 1 关注
  • Markdown

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

    167 引用 • 1520 回帖
  • Chrome

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

    62 引用 • 289 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 3 关注
  • 百度

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

    63 引用 • 785 回帖 • 162 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 104 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 321 关注
  • NetBeans

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

    78 引用 • 102 回帖 • 685 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    91 引用 • 585 回帖
  • 周末

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

    14 引用 • 297 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 42 关注
  • Firefox

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

    8 引用 • 30 回帖 • 410 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖