Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Custom JavaScript video player with Video.js

Wednesday, January 18th, 2017 by Servage

video-jsWeb browsers come with a built-in HTML5 video player, but in case you want a little more freedom and flexibility, you can use a JavaScript library or even build your own video player! Video.js is a JavaScript library that allows you to make a customized video player that also supports more video formats than the default HTML5 <video> element.

Initial Setup

Video.js requires two files to work: one CSS file and one JavaScript file. You can download both of these files from the official website at www.videojs.com. Alternatively, you can use the CDN links found on their website. Either way, add these two files to the <head> section of your website to get started.

The <video> Tag

Like the built-in video player of browsers, Video.js uses the same HTML5 <video> tag. To use Video.js with a <video> tag, you have to use the data-setup attribute for the element. You can configure the video player by using JSON inside the data-setup attribute, but you can leave it empty as well. Here is an example of the default setup: <video data-setup=”{}”></video>. This will create you an empty Video.js player element.

Adding Videos to the Player

The <video> tag is not very useful alone because it does not know what media to play. To fix this, you can add videos to the player using the <source> tag in the same way as you would do with the regular <video> tag. To add a video, use the <source> tag inside the <video> tag, like this: <video data-setup=”{}”><source src=video.mp4″ type=”video/mp4″></video>.

Browser support

For improved browser support, you can add videos of different files types by adding more <source> elements inside <video>. Most likely you will want to include at least MP4 and WebM files since they both are common video formats.

If a visitor tries to play a video and no supported format can be found, you can show a message inside the video player telling the user to upgrade to a supported browser. Unsurprisingly, this also works the same way as with the typical <video> tag: you can write a paragraph of text inside the video element and it will be shown if no supported video type was found. In Video.js, the paragraph usually has a class called “vjs-no-js”, for example: <p class=”vjs-no-js”>Please upgrade your browser to watch this video.</p>. This element is often placed below the <source> elements at the end of the <video> element.

With this information you should be able to embed a custom HTML5 video player to your website. If you run into any issues or want to customize the video player, have a look at the documentation on www.videojs.com.

Custom JavaScript video player with Video.js, 5.0 out of 5 based on 2 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.