Somerset Partnership - Training Videos Management System
This was the only project that Somerset Partnership NHS Trust had planned for me when I took a 4 week internship with them in the summer of 2014. The project from start to finish took me 2 weeks, forcing my supervisor to task me with the additional projects of a map of sites and a visualization of their digital assets.
My task was to produce a content management system for the explicit storage, viewing and curation of videos that the training department used.
It had to work on desktops and the iPads that Somerset Partnership had newly rolled out. It also had to work sufficiently well for viewing on desktop computers that used Internet Explorer 6 for a browser, whereas those curating the content would use mordern browsers.
In addition it was noted that the system would have to cope with low bandwidth connections between the locations in Somerset Partnerships purview.
Optional desired features of the system included, notes on who the video was intended for, links to supporting resources if applicable per video and a method of searching the list of videos.
The final design that can be seen above, followed the all brand guidelines for Somerset Partnership NHS Trust except the font, since the font could not be licenced as a webfont, so a best approximation was used.
The design was responsive down to a width of
240px and above
1920px scaled proportionately. The minimum width for the design was
far less than would be required, unless people start using the system on watches.
In terms of the video thumbnails, I took inspiration from YouTube with the duration in the bottom right of the thumbnail along with title and description to the right of the thumbnail. I felt this was intuative and follows user expectations.
In order to cope with the difficultties of low bandwidth, I decided on a distributed architecture. I achieved this by utilising a series of NAS boxes that ran Apache and MySQL servers upon them, which were being deployed accross the Somerset Partnership extranet at the time.
The MySQL database that contained the metadata and related resources was distributed by means of SQL replication; set up in such a way that it utilised the stronger connections between locations in preference to weaker connections. This was suitable since it would be rare that large amounts of records would be changed in any one transaction.
For the distribution of the media assets, these would be uploaded to any single location and
rsync through the same preferred connections as the
SQL replication during off-peak hours. This solution was deemed suitable since the network was such that
most upload locations would have deployed the media assets to all other locations within one night, and the outliers would take at most three nights; provided there is not too large a
This did cause a slight problem since the database entires for a newly uploaded video would be deployed far sooner than the media assets. To combat this I made it such that the user interface did not display any videos that were in such state by checking for the existance of the media files.
Considerations of accessibility were completely ommitted in my brief. Yet from the beginning I made sure to marup the application in all
ARIA attributes and
I added a method by which WebVTT files could be uploaded along with the video files to serve as subtitles, closed-captions and/or chapters, relying on the user-agent to add a user-interface for interacting with the resources. Which at the time of developing the application, I saw no such interfaces among modern browsers.
I also wanted to add a togglable video overlay that would display sign-language, however with little support of
<video> and no notable example of this, I was unable to add such
The optionally desired features in the brief were trivial by the time I was nearing the end of the project.
- The target audience was a new text field in the videos table and displayed underneath the title in the user interface.
- The related resources was a new text in the videos table that displayed on the respective video's page and was controlled with a 3rd-party WYSIWYG editor on the back-end.
- The search capability consisted of a search of the title, description and audience fields of the videos table, sorted by similarity to the search term as determined by the
native implementation of the MySQL
The only other notable feature that I added was a manual way of selecting a single frame from the video currently uploading to serve as the thumbnail and cover image for the video as part
of the user-interface for the upload process. This utilised a HTML5
with the video element as it's source, and decoding the base64 data-uri on the server to turn it into a file that could be served to older browsers.