Optional in-app video player!

[cal2195]

Although one of VHA's strengths is "do one thing, and do it well", leaving you to choose your own video player, it would be nice to have an optional in-app video player.

While it wouldn't be able to play everything, as HTML5 only supports certain codecs in Chromium, I think it would be able to play the most common formats at least. We could fallback to the normal player if it doesn't support it.

One major advantage to doing this would be we could implement a "filmstrip timeline" by reusing the film strip, and allowing you to click on it to jump to that timestamp in the video!

I'd appreciate your thoughts on this, and if you think it's a good idea, any implementation ideas too - new window vs. tabbed, etc. 😄

[whyboris]

I'm open to further improvements like this to the app in the future.

Because this feature would be rather large, I wouldn't want to put it into version 2.0.0 - though I'm open to it in the future 👍

I particularly like the jump to particular spot in the video idea 🎉

[cal2195]

Good stuff! 👍 I'll make some more milestones for organisation!

In a similar vein, along with the strip beneath the video, it would be very cool to use the filmstrip thumbnails, and organise them like this for an overview to skip into the video as well! It would make great use of having 15+ thumbnails generated!

[whyboris]

I literally woke up with the same idea today 🎉 Now that filmstrip works well, we can just tile several filmstrips (copies of each file) with a different offset to create a single sheet (it wouldn't interact in any way with the mouse-over).

It may require a bit of care as we'll eventually (soon?) have variable lengths coming in (number of screenshots will depend on video length).

Feel free to call dibs on this new view, else I'll code it up 👍

[cal2195]

I'll have a go at this view! 👍

[cal2195]

Just an update from my personal interest in this issue:

I've managed to implement an in-app video player, in it's own BrowserWindow and it's very cool! Currently, MP4 files work perfectly, and I've implemented seeking using the sheet overview! 🎉 Super cool with the video on one monitor, and the sheet on another to seek around! 👍 I also noticed #133 while doing this!

Secondly, to support all file formats, I've implemented on-the-fly transcoding with ffmpeg and an express server in the app! 💯 It works very well, so all that's needed is a custom video player UI to support seeking! 🎉

(This isn't planned for 2.0.0, but I find it fun and challenging! 👍)

[whyboris]

Really cool! I'm not opposed to any of this to be in the app - after all - these are just extra options users can use 👍

[cal2195]

Additional idea that has come to me - since I'm implementing transcoding, this would allow the option of hosting the app remotely (like the demo online you had) and actually being able to stream the content via the transcoded stream! 💡

[whyboris]

That is really cool! 😲

[cal2195]

@whyboris How did you go about making that demo app? Would it be easy to view the current VHA in a chrome browser?

[whyboris]

Absolutely! It's easy 👍 There's still a demo from v1.0.0 online: http://dev.yboris.com/vh/

The demo requires that a correct format file is loaded at the start. Set webDemo to true: https://github.com/whyboris/Video-Hub-App/blob/master/src/app/components/home/home.component.ts#L110

Fix up the commented out code: https://github.com/whyboris/Video-Hub-App/blob/master/src/app/components/home/home.component.ts#L383

Fix up the DemoContent https://github.com/whyboris/Video-Hub-App/blob/master/src/app/components/home/home.component.ts#L48

Probably not too hard 😅 https://github.com/whyboris/Video-Hub-App/tree/master/src/assets

[cal2195]

Just an update on this - from my limited testing, it looks like the new angular version is causing problems! Loading it in a browser causes it to complain about missing process somethingorother in zone.js. (I think that's what it was called). It doesn't show anything other than the loading animation.

Would be really cool to get this working, any ideas?

[cal2195]

After looking into this some more, I don't think my idea will work. I thought there was a way to seperate electron from node, and just browse to the url in a normal browser, but it looks like you don't have the ipcRenderer anymore so the communication won't work.

I'm not sure if there's a way around this...

[whyboris]

There's likely a way to hack it. I think this should work: create a different service that would do what you want and swap the line in the constructor & its import statement for the new service when building the "online" app.

It sounds like you won't need the online version to do anything other than to trigger playing a particular video - so a single method might be enough to get the whole thing off the ground (it sounds like you solved the hard problem of having Express serve up a video over http).

ps - I'm working remotely from Tokyo until end of June so I pushed back the release of the app until I come back, but I might play with the code on rainy days. This seems like a fun sub-project for this app. Is your branch express-server the one you're talking about in this issue? 😄

[cal2195]

You're idea of the separate service could work - it would be very cool to support all the features... Do you have an idea how hard it would be to replicate the IPC stuff over HTTP? Is it as simple as a few endpoints? 🤔

I have two branches at the moment: express-server which transcodes any video file on the fly using ffmpeg, and streams it over http, and advanced-video which is the in app video player in a new browser window! This currently only works for supported local files (.mp4 I believe).

My plan is to merge these two features, so that the video player uses the transcoding server to allow it to play any video regardless of file type - this will require a custom player ui to support seeking (already implemented in the server), but it shouldn't be too hard! 👍

I also have a very neat feature in the works, nearly there now, just working out the bugs! 🎉

[whyboris]

Sorry unsure what would be involved in moving over to HTTP. I might be able to look in a week or two 😅

[cal2195]

Update on the in app video feature: Working really really well! 👍 Surprisingly easy to hook the transcoding server into the in app video player! 🎉

I have an initial custom UI working with seeking, volume control, play/pause etc. working! And the sheet view for seeking in the video by timestamp! 😄

Gonna work some more on bug fixes - fullscreen mode needs custom controls too! But I can push the branch if you're interested in trying! Works on Windows too! 💯

[whyboris]

@cal2195 -- are you using an off-the-shelf player for this?

Something like: https://github.com/matvp91/indigo-player ?

Also there's this interesting project: https://jsmpeg.com/ -- unsure if it helps at all with what you've been trying out.

You have a lot of branches: https://github.com/cal2195/Video-Hub-App/branches/all I see you still have the express-server branch 👍 There's a cool command that updates all your branches to master:

for BRANCH in `git branch`; do git checkout $BRANCH; git merge master; done  

and then you can push them all back:

for BRANCH in `git branch`; do git push origin $BRANCH; done

though in your case it might be git push upstream $BRANCH 👍

Cheers 🙌

[cal2195]

I haven't so far - I need to load a new request on video seek, so I figured I'd roll my own UI - it's working well right now - just not so pretty! 😂

It looks like that indigo-player might let me get a seek event though, so I could possibly use it... although it won't know the duration... hmmm...

My own might be easier if I can make it prettier with icons! 👍

I haven't pushed the branch yet, but I'll push it when I'm home and you can take a look! Mostly working great, just needs some polishing! ✨

[cal2195]

Also, I need to clean up my branches! Most of them are unnecessary now! 👍

[whyboris]

@cal2195 -- another thing I found that you might find interesting: https://wistia.com/learn/marketing/faster-thumbnail-extraction-ffmpeg

Turns out ffmpeg is able to extract fractional pieces over http -- so if you wanted to create screenshots of a file getting served over http you can avoid downloading the whole thing 🏆

[cal2195]

Certainly cool! But as we (should) have all the video files locally, it already just seeks to the location to get the thumbnails! 👍

Could be useful for remote storage though, but you'd need a HTTP server...

[cksachdev]

@cal2195 Could you please help me with the right branch name to get this feature?

[cal2195]

If you'd like to test this out, it's on my fork called transcoding-video: https://github.com/cal2195/Video-Hub-App/tree/transcoding-video

It's quite a bit behind this master, but it should be pretty functional, if I remember correctly! 😄

[whyboris]

We're now one step closer as VHA has "official" server code 🎉 with #603