Page 22 - print

Video platform: a customizable, rich media solution | 21

The rating was actually not much of a challenge; it was just a very simple math function adding up the ratings together. I
believe the most difficult part about the ratings was using JQuery to make the buttons feel more interactive to the users.
2
But even this I found quickly to solve by using the library strategy and reading up about it on stackoverflow . In figure 10
you can see the main description area right below the video. This area contains the title, description, uploader, video
length, views and the date it was added. For every video there are also a couple of buttons, 2 of them are rating buttons,
one button for adding a video to a playlist, one for sharing the video through social media and one report button to flag a
video as inappropriate.
For every video it also shows the categories and tags that belong to the video, and to which the video is linked.
Immediately below that, you can find the comment section, where you can add a new comment and/or read through the
comments that other people have posted. The layout of this part is from the sketch that I had made of the single page
layout (figure 4). Almost all of the other online video websites have a very similar layout.

On the single page layout, it was necessary to always show 2 videos that were related to the video that was playing. This
however was not a hard thing to do. The database tables had been made for categories and for the videos itself. Laravel
made it easy with Eloquent to grab information from the database tables and with this, it was quite easy to grab randomly
2 other videos from the same categories as the video that was playing. The only thing left was to show these 2 related
videos at the sidebar. With the advertisement banners it was the same story; we needed to grab 3 random banners from
the tables in the database and place these on their respective places near the video player. One of the important
requirements was to show an advertisement banner whenever a user paused the video, thus showing the advertisement
right on the video player. To be able to do this I first needed to find a video player that actually could handle such things.

Finding the right video player needed quite some research. There are many video players out there on the web, but every
single one provides some functionality, but doesn’t work with some other ones. Unfortunately, on the web video formats
have not been standardized. Some browsers support one kind of video format, while other browsers are not able play the
video format. This made it even harder to find the right video player that could play the videos in all browsers.
It was also necessary to do research to find what the best way was to store the videos, and how mobile video resizing
played a role, but you can read about these research questions in the next sub-paragraph.

Using the library strategy I went online surfing the web and finding and comparing different video players. Like I
mentioned above, different browsers support different video formats. Now after doing some research, I found that there
are different codecs, and by using some codecs or even combination of codecs you could have almost all supported
browsers to play your videos. Now the video players are HTML5 players, and this is what you want. It is best to avoid flash,
but sometimes when a browser doesn’t support the HTML5 player, or the video cannot be played with the HTML5 player;
then there is need for a so called fall back players: this is called flash fall-back.
Whenever the player cannot play the video, it tries to fall back on a flash player in order to try and play the video. Now of
course you still need to find the right codec to use, in order to have the best combination and to be able to be supported by
all browsers. After some research and discussions with the company mentor we decided to go with the h.264 codec. This
codec was supported by majority browsers, and with this codec and the right video player the videos would be played in
any browser. You can find the codecs and the browsers that support it either with an HTML5 player or a flash player in
figure 11.

After a while I found the right video player: Video.js. Video.js is a JavaScript and CSS library that makes it easier to work
with and build on HTML5 video [6]. This video player contained all the libraries and parts needed to suffice with the
requirements. The requirements for the video player were: it should be able to resize to different screen sizes, it should be
able to play videos on mobile and all of the other browsers (remember that it needed to have a flash fall-back to
accomplish this) and you should be able to program an advertisement banner on top of it when a user pauses a video.

2: Stackoverflow is a question and answer site for professional and enthusiast programmers. Retrieved from: http://stackoverflow.com