• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Blog
  • Careers

  • CasePointer

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    Creating a video player with time markers — step by step

    Piotr Hankiewicz

    By Piotr Hankiewicz
    March 17, 2016

    Introduction

    Today we will show you how to create a video player with time markers using JavaScript and HTML5 only. Libraries that we will use are proven to be stable enough for production projects. What we want to achieve? The final result is visible below:

    To simplify (or to make it harder for some of you :)) this tutorial we won’t use any package management tools. The demo is available on Github here: https://github.com/peter-hank/video-with-markers

    Requirements

    We will need some libraries (all of these are free to use in commercial projects):

    Step 1 — creating a project skeleton

    Let’s create a new folder for our project and call it video-with-markers. Inside let’s create a new file called “index.html”, three folders: “css”, “js” and “var”.

    We also need to copy libraries files and put it into a proper directory:

    Let’s open the index.html file and fill it with some basic structure, that will include libraries files too.

    <!doctype html>
    <html>
     <head>
      <meta charset="utf-8"/>
      <meta http-equiv="x-ua-compatible" content="ie=edge"/>
      <title>Video with markers</title>
      <meta name="description" content=""/>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <link rel="stylesheet" href="css/video-js.min.css"/>
      <link rel="stylesheet" href="css/videojs.markers.min.css"/>
      <script src="js/jquery-2.0.3.min.js"></script>
      <script src="js/video.min.js"></script>
      <script src="js/videojs-markers.min.js"></script>
     </head>
     <body>
     </body>
    </html>
    

    Step 2 — activating player and creating markers

    TIP: all the further code should be put inside the body tag.

    First, we need to create a video tag:

    <video autoplay="" class="video-js vjs-default-skin" controls="" data-setup='{"width": 640, "height": 360}' height="360" id="example_video_1" preload="auto" width="640">
        <source src="var/BigBuckBunny_320x180.mp4" type="video/mp4"/>
     </video>
    

    We need to set an element “id” attribute and both classes “video-js vjs-default-skin” to let player CSS apply. Other attributes are not required and are here just for demo purpose. “Data-setup” attribute is an attribute that configures multiple player options. More details can be found in the documentation here: http://docs.videojs.com/docs/guides/options.html.

    At this point after launching index.html in a browser we should see a video player like this:

    The only thing left is initializing markers. We can do this by adding some JavaScript code under the video player element:

    // load video object
     var video = videojs('example_video_1');
    
     //load markers
     video.markers({
        markers: [
            {time: 9.5, text: "this"},
            {time: 16,  text: "is"},
            {time: 23.6,text: "so"},
            {time: 28,  text: "cool"}
        ];
     });
    

    In this part we load an object of the Video.js player to video variable and then load a list of markers. Each marker object includes time in seconds when it should be shown and marker text.

    Now, markers should be visible like on my this image and markers text will be visible after pointing at it:

    It needs some additional CSS styling to achieve a result like on the first image but it’s not much work.

    The end

    Almost the end. There are many more Video.js plugins ready to use, for example:

    • videojs-HDtoggle — button which toggles between HD and non-HD source,
    • videojs-playlist — plays videos continuously or by selecting them,
    • videojs-watermark — displays a watermark on top of the video.

    With not much effort most of video player functionalities can be finalized. There is always some tweaking, but at least you can have a base for creating your project. And remember, if you will find bugs, report it! And if you have implemented something cool, share it!

    Thanks for reading.

    html javascript video


    Comments