Introduction

Videojs is great…. so great that we’re dedicating another blog post to it. For those interested, please visit our previous blog post on VideoJS. 

For those unfamiliar, Videojs is a open source video library which allows you to add video players. With it I was able to implement HTML video player with mp4 file and YouTube video thus far.

I don’t blame you if you think having a video on your website is easy. Easiest and perhaps the most popular method is to upload the video on YouTube and copy and paste the embed tag into your template. Functionally, it works as expected: when the page is rendered, you’ll be able to play, pause, rewind the video hosted by YouTube.

However, when the YouTube video is rendered, the video player is encapsulated by <iframe> which prevents CSS and Javascript to influence and manipulate the video content. (See CORS). That’s where the problem arises for my task: when your particular client which happens to be a certain marketing agency heavily emphasizes on the appearance more than other aspects of web application, a simple copy and paste of YouTube player will not get the job done.

VideoJS at work

The screenshot above is a YouTube video at a browser width of 500px. Once the YouTube video hits under a certain browser width, vertical margins will appear and becomes tedious to remove completely.

The same screenshot at same width of 500px has been taken with its VideoJS counter part.

Videojs has been a life-saver because it renders the video with no <iframe> encapsulation which allows easy customization of appearance and functionality. With my expression of appreciation for VueJS out of the way, I created a Videojs component in Vue similar to our previous blog post related to Angular.

VideoJS Component in VueJS

<template>

  <div class="videojs">

    <h1>{{ title }}</h1>

    <div class="video-inner-container">

      <video

        id="vid1"

        controls

        preload="auto"width="640"height="264"

        class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered"

        data-setup='{}'

        >

          <source:src=src :type=type>

      </video>

    </div>

  </div>

</template>

<script>

  import 'videojs-youtube/dist/Youtube.min.js';

  import 'video.js/dist/video-js.min.css';

  import 'video.js/dist/video.min.js';

  export default {

    name:'VideoJS',

    props: ['title', 'src', 'type']

}

</script>

It’s actually lot simpler than one might think. Only thing to take note of is that you import the ‘videojs-youtube/dist/Youtube.min.js’ before importing ‘video.js/dist/video.min.js’ for it to recognize YouTube as valid source type.

To implement the VideoJS player as component, here is its parent component where <VideoJS> selector has . I used a simple implementation of props to customize the video title, source and the type of video to import. Nothing fancy.

<template>

  <div id="app">

    <VideoJS title="Video of Puppies"

             src="https://www.youtube.com/watch?v=N3ugtRtZE0s"

             type="video/youtube"/>

  </div>

</template>

<script>

  import VideoJS from './components/VideoJS'

  export default {

    name:'App',

    components: {

      VideoJS

    }

  }

</script>

Final Thoughts

I must say once more: VideoJS is a great library that I rely on to tackle 90% of video player related tasks. The majority of the other 10% is related to Facebook Video.

Although it is no fault of its own, VideoJS falls short of being perfect. If I had to create a feature request regarding VideoJS, it would be Facebook Video’s compatibility.

Facebook video player is both interesting and tricky to work with. Unlike YouTube’s instantaneous rendering, Facebook requires an extra step by importing its SDK to generate a Video Player. If I have to hazard a guess, it adds a layer of difficulty for VideoJS to work its magic. As for reason why Facebook forces its SDK to be mandatory remains a mystery to me. But I hope Facebook comes around on its current implementation and make its video implementation simpler.

Thank you for reading the blog post of my gushing on VideoJS (hooray!) and my off-tangent rant on Facebook video player (boo!). I bid you a farewell!