思源视频笔记插件 /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

  • 思源笔记

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

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

    23014 引用 • 92573 回帖
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 更新了该回帖
  • mark-j

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

    image.png

    1 回复
  • coriger
    作者

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

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

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

  • 查看全部回帖

推荐标签 标签

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 189 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    27 引用 • 225 回帖 • 163 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Shell

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

    123 引用 • 74 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    692 引用 • 535 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 2 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • 思源笔记

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

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

    23014 引用 • 92572 回帖
  • WebComponents

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

    1 引用 • 4 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 216 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 440 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    492 引用 • 926 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 253 关注
  • jQuery

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

    63 引用 • 134 回帖 • 724 关注
  • JSON

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

    52 引用 • 190 回帖 • 1 关注
  • Vue.js

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

    265 引用 • 666 回帖 • 1 关注
  • 尊园地产

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

    1 引用 • 22 回帖 • 772 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 538 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    51 引用 • 25 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • PostgreSQL

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

    22 引用 • 22 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注