This is one of my menus showing movies I am currently designing. The top twelve icons open a sub-menu as they are all series of movies or trilogies and I didn't want to have to look at eight or so icons for the same theme such as James Bond. As you can see I have one icon showing the three Bonds that feature within it. Moonlighting goes to a folder that has multiple episodes in it. I have one for Star Trek on another menu that goes to yet another sub-menu with 90+ files in. I find doing it this way it is easier to catalogue hundreds of files so that it is intuitively simple to find what I want, without scouring multiple images which may distract from a quick visual search.

This is a music album featuring in Kylie's case featuring more music videos than audio tracks, so for keeping favourite artists works together I like this. The songs play in the fold down player (top right), and the videos open in the native mp4 player that all browsers have. On Firefox I have the option of a VLC extension that means by right clicking I can then open that file for further manipulation like changing aspect ratios or adding effects, etc.

All of my titles are also hyperlinks back to previous pages, so navigation is fast and means this arrangement works well with touch screens.


This is a movie opening in the native browser. On things like Firefox, you have a pop-out window that enables just the movie and can be resized whilst the browser is minimised on the desktop and has basic media controls like skip forward/back, pause, etc.

As I was a big fan of Windows Media Centre and it's demise made me interested in creating my own mini solution. Html is reasonably user friendly. Although some files extend to a lot of code, most input for myself is repetitive 90% against design at 10%. I use Notepad++ as I find it very good and powerful for a learner like myself with multiple undo's it is a good way to learn and immediately test what I am doing.

This picture shows a music video menu (the two blank spacees are where I haven't alocated artwork to the tracks which are already there.


This whole thing is an adaptation of a program (below) from Learn Direct that uses the Aplayer. I thought it was quite good compared to a lot of the players out there and also has the advantage of the player opens up in whatever menu you have it in. I am still learning, so there is more funtionality to come. It is an efficient way to organize my collection. Like most music lovers, when you hit several thousand music files, having a system becomes necessary. Like my videos, it's all pictorial as I find pictures far faster to recognize than reading vast lists.

This is a demonstration video of how it looks in action but it has been redesigned a bit since this video. Generally as with all learning, as soon as I discover something, I look into changing what was there. Basically though it the same just visually different with adjustments of the code, but I like it on the whole as it a convenient way to store my media files. I have the thing stand-alone, so the CSS, Bootstrap etc are all local, so internet is not required and I can use the whole thing remotely, like in my car, using Bluetooth through my stereo to listen to it. My entire collection of movies, music etc is around 2.5TBs, so I haven't got everything, but enough to keep me entertained should the internet go down - for say a year or so.