Giter Site home page Giter Site logo

sethyuan / logseq-plugin-media-ts Goto Github PK

View Code? Open in Web Editor NEW
89.0 4.0 10.0 5.4 MB

This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/audio position when clicked.

License: MIT License

HTML 1.80% JavaScript 98.20%

logseq-plugin-media-ts's Introduction

中文 | English

logseq-plugin-media-ts

本插件能够生成视频、音频以及 B 站视频的时间戳,点击时间戳后会跳转到对应的音视频位置。

使用展示

插入媒体文件(视频、音频),支持网络上的 URL,本地全路径的文件和已上传至 Logseq 的相对路径的文件。

demo

demo

观看视频的同时记录笔记。

demo

使用示例

推荐在插件设置界面设置快捷键并用快捷键快速插入时间戳。也可以使用 /Media timestamp 来插入以下代码。请参看上方动图。

对于videoaudio标签可在插入时间戳时自动获取当前位置。对于 B 站视频,出于 Logseq 本身的一些安全性限制,无法获取当前位置,点击时间戳跳转时也不能直接定位,需要重新加载播放器。

你可以先将媒体地址拷贝下来,再用 /Insert media 插入,这样命令可以自动帮你正确处理视频地址,无论它是一个网址,本机文件的绝对路径,还是已上传到 Logseq 的一个资源的相对路径。

可以传“秒数”,也可以传“分:秒”或“时:分:秒”。

{{renderer :media-timestamp, 60}}
{{renderer :media-timestamp, 01:00}}
{{renderer :media-timestamp, 00:01:00}}

如果想为特定块中的媒体创建时间戳可以再传入它的引用,例如:

{{renderer :media-timestamp, 60, ((63158bf5-1436-41e4-a8af-a4a03b8b5a5b))}}

自定义样式

你可以通过以下 CSS 类来自定义样式。参照 Logseq 自定义样式的文档操作,将内容放在custom.css中即可。

.kef-media-ts-ts {
}

Buy me a coffee

如果您认为我所开发的软件对您有所帮助,并且愿意给予肯定和支持,不妨扫描下方的二维码进行打赏。感谢您的支持与关注。

wx ap

logseq-plugin-media-ts's People

Contributors

dive2pro avatar sethyuan avatar stefanbuck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

logseq-plugin-media-ts's Issues

m4v video extension support missing

Great plugin to fill in gap of core Logseq when it comes to media time-stamping for notes.

When a try "Convert to media renderer" on video asset with "m4v" extension I get "No media", though video plays fine if I use hiccup syntax to embed in a block.

looking at your code it appears m4v extension is missing from video extension list
const VideoExts = new Set(["mp4", "mov", "mpg", "mpeg", "webm", "ogv", "avi"])

where as m4a (audio) is included
const AudioExts = new Set(["mp3", "m4a", "wav", "ogg"])

wmv video format support

Thanks for this convenient plugin, it's very useful for me.

But I found that it now not support local wmv file format.
Any plan to support "wmv" video file format in the future?

Thanks.

【疑问】无法成功插入时间戳

您好!

首先感谢开发这款能支持本地音视频的插件。在使用过程中遇到了如下图所示的问题,播放本地视频时,输入相关命令,按回车键后,似乎不能获取到时间戳。请问是否是因为我的操作有问题,谢谢解答!

demo

【环境】:
操作系统:Win10 21H1 x64
软件版本:V0.5.6

MKV support

It would be great to be able to play these video files. Right now they show as "No media".

怎么为Windows设置快捷键

作者你好

  1. 我想请教怎么在Windows端设置该插件的快捷键
  • 我试着修改配置文件 ctrl + shift + e 来表达,但它不起效果
  1. 现在 /Insert media 是不是不能加载bilibili的视频了?
    我用 /Insert media 不行 只能使用 embed video URL 才能正常加载,这和我无法使用快捷键有没有关系呢?

可否录个简单的视频讲一下?目前的说明写的有点抽象啊。

比如,我连本地的视频文件都插不到 logseq 里面去。
如下动图1。我一回车,/insert video就没有了,我到哪里插入视频呢?
按你动图上的格式写,也插入不了视频。
你的动图不是视频,没法暂停。真让人抓狂!

更不谈左边做笔记、右边打开视频。
GIF

【参考】自动获取B站视频当前位置,以及点击时间戳实现直接定位

开发者,你好!

关于【B 站视频,出于 Logseq 本身的一些安全性限制,无法获取当前位置,点击时间戳跳转时也不能直接定位,需要重新加载播放器】的问题,下面是@boninall提供的一种可能解决方案,希望能有帮助,仅供参考,谢谢!

那个开了个反向代理,麻烦点,可以把这个链接发给开发者来参考代码 https://github.com/aidenlx/mx-bili-plugin

image

在线视频无法进行时间戳记录

十分感谢大佬写出插件,本地视频能够成功记录!但是我在进行YouTube视频复制网址再 ‘/insert video' 不能成功读取导入。尝试用嵌入视频的方法放进Logseq之后,时间戳无法对当前在线视频进行记录

default.mp4
20220415_101742.mp4

插入B站视频显示无媒体

感谢作者开发的插件。

我遇到的问题是,插入本地视频没有问题,但插入B站视频时就显示无媒体

GIF 2022-4-21 17-55-30

请问我的操作哪里出现问题了吗?

改良建议

感谢开发插件,解决了期待已久的需求。不过有几个问题啊:
【1】视频能不能另开一个页面?有时候页面内容稍长一点,视频和笔记之间跳转的话,就得上下拉动页面。
【2】我如果想要视频某个时间点,是要手动输入吗?能不能像ob的时间戳插件一样,点击视频,就自动形成时间戳?
十分感谢!

Link timestamp to specific video (similar to references)

At the moment, timestamps are not linked to / referencing a particular video. Timestamps always only refer to the current playing media renderer. This basically forces you to write notes underneath the video, to clearly indicate what video the timestamps refer to and so that the timestamp links work properly. Personally, however, I want content and ideas to structure my notes rather than the sources from which the content comes.

I want to be able to use timestamps as follows:

  • Topic 1 timestamp referencing vid 2
  • Topic 2
    • Subtopic 2a timestamp referencing vid 1
    • Subtopic 2b timestamp referencing vid 2
    • Subtopic 2c timestamp referencing vid 1

Is it possible to have the timestamps reference a specific video, rather than the media player?

This would be similar to how references currently work for PDF annotations: instead of referring to a page number of the PDF viewer, the reference refers to a page of a specific PDF.

是否可以增加视频截图功能

在使用此插件进行视频笔记的时候,如果能通过一个快捷键,快速截取当前视频的画面并插入笔记当中,感觉笔记的效率可以进一步提升,不知道后续是否可以考虑增加此功能?

时间戳不渲染+渲染错误

出现问题

  1. 只渲染一个时间戳,第二时间戳显示空白
  2. 渲染出来的时间戳出现错误,显示为另外一个时间戳标注的时间

Demo

Default time settings?

I see in the ReadMe you have written: "You can pass in "number of seconds", "minutes:seconds" or "hours:minutes:seconds"." Is this configurable? I see that I can do it manually, meaning that something like this works: {{renderer :media-timestamp, 00:09:57}} but when I use the insert timestamp command it always inserts something like this instead: {{renderer :media-timestamp, 598.776742}}. Is there some way that I can get it to always do the former? I don't need so much precision, and it the former (00:09:57) is the kind of time code I would use when sharing with other programs.

Youtube support?

Awesome functional plugin. Well done on the effort.

I am interested in youtube video's to bookmark and add custom timestamp, as per my needs.

Is that supported by this plugin?

OneWorld :-)

Setting for adjusting time stamp placement time

Hi! I love and use this plugin on a regular basis.

One thing I find myself doing a lot is going back in the player to make the Media Stamp and place the media stamp not after, but before what I want to capture.

For me, it would be valuable to have a setting available, where I can enter a number of seconds (e.g "5" seconds), and then all time stamps I do are shifted five seconds before the actual spot where I create the time stamp.

That way, I can keep on watching without needing to go back and replace the timestamp.

/media timestamp 无法插入时间戳

输入 /media timestamp 后什么也没有出现,在同位置输入 {{renderer :media-timestamp, 00:01:00}} 可以正常使用
开发者模式报错为

Uncaught (in promise) TypeError: Cannot destructure property 'time' of '(intermediate value)' as it is undefined.
    at insertMediaTsRenderer (index.a37c0684.js:182:13)

操作系统为 macOS
插件与 logseq 均为最新版

使用/insert插入的视频不能自动复制到assets文件夹里,换电脑视频就打不开

使用/insert + 视频的绝对地址 可以插入视频,也能正常播放,但是视频不能自动复制到assets文件夹里面。所以当我把文件夹所在的U盘在其他电脑的时候,视频就不能播放。
我录制的视频《logseq的media timestamp插件bug:使用/insert video 插入的视频能打开,但是不能复制到assets,换一台计算机,视频就打不开》:https://www.bilibili.com/video/BV1414y1j7oX/?spm_id_from=333.999.0.0&vd_source=ffabafd567748fdd41a420b38a20c4ed

Doesn't work with generic online MP4s

If you pick any random site, locate the MP4 file hosted on that site (e.g. https://sp.rmbl.ws/s8/2/D/d/L/2/DdL2k.Faa.mp4 then try to use it with this plugin - then the timestamps won't work.

Please make it so that this plugin is compatible with MP4s from any website. Thanks!

Full screen option

Hello i need a shrotcut to put full screen the videos

Is it possible?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.