[Feature Request] Play videos and audios inside trilium

[ghost]

It would be incredibly useful a built-in video-audio player in trilium. In that way one wouldn' t need to download the stored files.

[patrickjm]

Trilium can do this already with render notes. This is how I set up audio notes on my server (sorry if this is hard to read):

MyFolder/
> myAudio.mp3
    #originalFileName=myAudio.mp3 
    #customResourceProvider="audio/myAudio.mp3"
> Player (render note)
    ~renderNote=audioPlayer
> audioPlayer (type: HTML)
    contents:
      <audio controls>
        <source src="/custom/audio/myAudio.mp3" type="audio/mpeg">
      </audio>

A better solution would probably be to make a custom widget that you apply to the audio files you want, though.

[zDEFz]

@patrickjm this is helpful, I would love to see this in the Wiki.

Super annoying that we can't say

myAudio.mp3

originalFileName=myAudio.mp3

customResourceProvider= #originalFileName

Would put it automatically to /audio, based on filenameEnding.

[zDEFz]

Nevermind, I gave up, cause simply the work gotten too much!

However, I'd like to see the following: Being able to set a direct file link and open it on click. Currently, Trilium only leads me to the file, but doesn't open it, when I create Internal Trilium link.

I've used W3 Css templates. https://www.w3schools.com/code/tryit.asp?filename=GKFAVC9LHAF6 The issue was simply, normal tables were so much easier to create, todo this, is simply not feasible.

But, we can't embed videos in Tables, in Text view. It would be great, then the video would be exact the cell size. I'd really like to see, that we can do that...

But to use CSS templates would be (kinda) a good idea. But then I'd have to be able to do it WYSWIG. For instance, give me X side by side... then 2 in the next row, etc

[patrickjm]

@zDEFz Would it work if you had a structure like this?

MyTextNote (embed MyFolder here)
MyFolder
>  VideoRenderNote1
>  VideoRenderNote2

Shouldn't the book note view automatically display the videos side by side?

[zDEFz]

@zDEFz Would it work if you had a structure like this?

MyTextNote (embed MyFolder here)
MyFolder
>  VideoRenderNote1
>  VideoRenderNote2

Shouldn't the book note view automatically display the videos side by side?

Yea sure does, but not with preview. Also, in the current version is a bug on MacOS, where if u click open from the Book View, it doesn't open it, instead it navigates to the node. But it got already fixed and will be pushed next release if I got this right.

Update: Useless to implement via HTML5, because seeking then only works if it's an external address. #1395

[zDEFz]

Updating here - I currently run a small http server to circumvent the bug.

https://formulae.brew.sh/formula/http-server My command: http-server /Volumes/Hydra/Piano -p 8080

Example code of working implementation

 <video width="100%" height="200px" controls >
            <!--Initial-->
            <source src="http://127.0.0.1:8080/Piano Lessons/David Arthur/Legato Workshop 18.08.2020/
Teacher/18.08.2020 - 01 legato parallel thirds RH.mp4" type="video/mp4">
        </video>

[patrickjm]

If it helps, Trilium has code notes for server sided code. I've never used them / don't know much about them, but could it make an endpoint to do what you needed the http server for?

[zDEFz]

If it helps, Trilium has code notes for server sided code. I've never used them / don't know much about them, but could it make an endpoint to do what you needed the http server for?

I don't understand. Is Trilium able to run bash for starting up the http server or does it self-host it? Or something else?

[zadam]

Trilium can host files as a web server: https://github.com/zadam/trilium/wiki/Custom-request-handler#custom-resource-provider

[zDEFz]

@zadam I don't understand! If the file has the customResourceProvider label[...]. I wrote that paragraph in the wiki:

Note: The file that is supposed to be exposed needs to wear an "#customResourceProvider="fonts/myFont.woff" For >example, your file is in custom/fonts, you can call it via custom/fonts/myFont.woff But only if myFont.woff wears the >customRessourceProvider label. Otherwise, nothing would be found.

Then, the HTML5 media control wouldn't seek the video! It must be a valid address, path Regex seems to hurt!

http://127.0.0.1:8080/[...] with https://formulae.brew.sh/formula/http-server is completely seekable

  <video width="100%" height="200px" controls >
            <!--Initial-->
            <source src="http://127.0.0.1:8080/Piano Lessons/David Arthur/Legato Workshop 18.08.2020/Teacher/18.08.2020 - 01 legato parallel thirds RH.mp4" type="video/mp4">
        </video>

but with path RegEx (custom resource provider) unable to seek, only does play forwards

  <video width="100%" height="200px" controls >
 <source src="custom/video/Teacher/18.08.2020 - 01 legato parallel thirds RH.mp4" type="video/mp4">
</video>

I repeat myself. When the file has the custom resource provider tag, it won't seek at all from the media control, I assume its because it is internal and has no http:// before. #1395

But let's just assume we have a localhost address from Trilium-Notes. If it's failing to seek nonetheless, it is probably an issue with electron, right? Can we further narrow it down?

Here with the mentioned http server I used as a test, it seems to work, but not with the custom resource provider thing.

[zadam]

I have no idea why it does not seek, sorry.

[zDEFz]

@zadam Could you give me a guide on how to debug this? My assumption is that when you want to seek media, it wants another GET which it doesn't get.

Here is the debug log of the http server from the link I gave you. https://hastebin.com/odosoxisec.pl

What did I do there? Open the tree where I had one video file in, press play and then seek once.

[zadam]

I don't have any specific knowledge regarding these builtin media players.

[zDEFz]

@zadam where does this hosting functionality come from? If this is an electron functionality, it might be helpful to open an issue on the electron github page.

If it's custom code, it might be an trilium issue. May you have to I just need the mapping just right.

Additionally, is there a way to get the file in Trilium as a complete link, starting with http:// ? I want to test if it works without path regex.

Edit: Having the full trilium link doesn't better this. Path regex isnt the cause.

[zDEFz]

@zadam Add: Is servers fault. https://stackoverflow.com/questions/10583931/cant-seek-html5-video-or-audio-in-chrome

[snip] As it turns out, looping (or any sort of seeking, for that matter) in <video> elements on Chrome only works if the video file was served up by a server that understands partial content requests. i.e. the server needs to honor requests that contain a "Range" header with a 206 "Partial Content" response. This is even the case if the video is small enough to be fully buffered by chrome, and no more server-round trips are made: if your server didn't honor chrome's Range request the first time, the video will not be loopable or seekable. [/snip]

[zDEFz]

Please close the issue, I create a new one with details @zadam or @libantas