3 comments

[ 2.8 ms ] story [ 14.9 ms ] thread
Source code here: https://github.com/padraigfl/videojs-react-course-assistant

Layout wise it (obviously) takes a good bit more from frontend masters than coursera. Basically the idea was (beyond getting some VideoJS experience) to create a tool which people could use in conjunction with their own online course. The idea came from how youtube no longer allows captions so a person with a course on youtube could potentially redirect here and have videoJS insert features that YouTube itself wouldn't allow, with the potential to decouple from YouTube at a later date.

As this is only really a proof of concept, there's nothing in the way of admin functionalities to do things such as captions. All data is handled via local storage at the moment so it's not super flexible RE: edits to playlists and the like. I've included a list of todos on the repo.

For styling I used Linaria and a color theme generator (limiting myself to the colors which could fit into the names of "dark1", "dark2", "brand", "accent' and "light"). The design is somewhat responsive but I haven't spent a lot of time testing it, I believe there's an autofullscreen issue on videos on mobile at the moment.

On pretty limited resources with the youtube API key so I've included a default playlist too.

It would be cool if you could do something like udemy, but for youtube via their API. E.g. adding bookmarks by clicking the video scrubber

But the youtube embeds are iframes and I don't believe you can just add new tag marks like that due to CORS policies. The only thing would be an overlay on top of the iframe, but that gets complex in responsive modes

Thanks for the feedback! I haven't actually looked into doing things in the actual video overlay but I think this could actually be doable (on desktop at least). The scrubber and all controls are handled via videojs (on desktop) and even if I couldn't add things to it I could just alter one of the existing action options that are available and restyle the icon.

Haven't actually looked into the videojs UI options at all, mind.