I have now completed the video page of the channel project website. I am pleased with the way it turned out, and with the methods I used to create it. I kept the page simple, with a responsive list of video thumbnails and titles which when clicked expand a video player containing the relevant video. This functionality was coded using PHP.

video player image

The expanded video player section.

PHP code for video player page

Some of the code behind the video player section.

The entire page, including the video player itself, is fully responsive and the thumbnails will flow to best fit the current screen width.

Video page at medium width

The video page at a medium width.

Video page at a small width

The video page at a small width.

 

I feel that the page has been a success overall. If I were to do a similar page in the future, I would like to include a flash fallback video for maximum compatibility, however due to the lack of flash on my own machine and the timing behind receiving the final rendered videos I have been unable to do this on this occasion. I have however encoded both mp4 and webm versions of t#every video to ensure compatibility across HTML5 video capable browsers.

The rest of the website has been completed by myself and the rest of the website team in our group, including a javascript-based image carousel on the homepage, and I have compiled the entire website together and made some tweaks to ensure full responsiveness across the site.

The final product can be seen here.