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

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

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

还有一个是 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

  • 思源笔记

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

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

    24055 引用 • 98032 回帖 • 1 关注
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 更新了该帖
优质回帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 我也是,放弃了

  • 其他回帖
  • 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 评论
    作者

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

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

    1 回复
    编辑框点两次,不是插入按钮点两次
    coriger
  • mark-j

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

  • 查看全部回帖

推荐标签 标签

  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • OnlyOffice
    4 引用 • 14 关注
  • WebComponents

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

    1 引用 • 8 关注
  • 旅游

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

    93 引用 • 901 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • sts
    2 引用 • 2 回帖 • 203 关注
  • HTML

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

    107 引用 • 295 回帖 • 1 关注
  • 快应用

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

    15 引用 • 127 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 330 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 23 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    289 引用 • 4492 回帖 • 657 关注
  • Outlook
    1 引用 • 5 回帖
  • 运维

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

    150 引用 • 257 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 303 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 780 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 414 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 165 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 66 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • CloudFoundry

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

    5 引用 • 18 回帖 • 184 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 625 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    197 引用 • 541 回帖 • 2 关注