Yes polymer, but before getting our hands dirty let’s have a short understanding of polymer. The polymer is a lightweight library which takes full advantage of new web standard called Web Components. With the help of Polymer, we can create web apps as well as custom HTML elements.

In our daily life, we use HTML elements like <video>, <input> and may more. The behavior of these elements defined by respective browsers and have few limitations. With the help of Polymer and web components, developers can define and decide the behavior of HTML elements.

What we will be building ?

Today we will create custom video element with the clean layout. When we use native web element video ,

i.e. <video src=”videoName.mp4″ controls></video>

It gives us the result as shown in below image.

But now how do we customize above video element, let’s say we want to display the title of the video or We want to change the color of this element.

We can do that by using Web components and Polymer

i.e. <my-video-player class=”green” src=”videoName.mp4″></my-video-player> and we can make something like:

Setting Up development environment.

In my opinion, the most decent way to start a new polymer project is by using seed-element project prepared by the Polymer team. When using seed-element project, we don’t need any provision to maintain structure or documentation page. The seed-element project provides a proper structure and some useful built-in features, along with a documentation page.

To start a new Polymer Project do the below steps:

1. First download the source code of the seed-element project from here, and unzip it.
2. Now rename the folder from seed-element project to your element’s name: my-video-player.
3. Now to install all the dependencies using Bower (assuming you have installed  Node, npm, gitand Bower on your machine).
4. Run the below command to install the dependencies,
   bower install

Great till now we have a well-documented project, now it’s time to run the seed-element project.

Starting our Server

Here we will use polyserve,  a web server for developing elements. The most counseled tools related to developing Polymer elements is Polymer CLI . Check the list of tools  available if you don’t want to use polyserve.

To install polyserve globally, Run the below command,

npm install -g polyserve

After installation, to execute the project run the below command and you should see below instruction in CMD:

polyserve

Create a Custom Video Player

In this section, we will understand the structure of Polymer element and we will replace  seed-elementby our own my-video-player.

Polymer Element Structure

Before we propel our self ahead, let’s see the polymer element structure.

In the above code.

1. <template> : To create markup that will be rendered inside <my-video-player>.
2. <style> : To style this element.
3. <script> : Here we can declare methods ,properties and write other required logic.

Creating our elements ( adding Video and Title)

Now that we have understood how custom elements works let’s create our custom video element. In order to do that do the below steps,
1. Rename seed-element.html to my-video-player.html, which should be located inside root folder of your project.

2. Open In the bower.jsonfile, rename the project to my-video-player.html.
3. Open my-video-player.html and replace the existing <dom-module> code with below code.

In the above code, you have noticed the id of dom-module is same the is property of Polymer object. By doing this, we declare a custom Polymer-based element with this name.

4. Now in /demo folder, open index.html, edit the <link> element to import my-video-player.html as shown below,

5. Once this is done, add the below markup inside body tag of the index.html.

6. Finally, Open your Demo page in your browser: http://localhost:8080/my-video-player/demo/ and you should see video element with a big title .

Creating a Layout

In our custom element, we have three section,

1. First section : This holds the Button to play/pause, Title of the Video  and lastly Timer.
2. Second section :The seek bar resides inside  this section.
3. Third section :   This section contains the video.

1. Replace the markup of  my-video-player.htmlwith below markup.

2. Add the below styles inside <style> tag,

Now, If you open demo page you will see a proper aligned video with the title. Make sure you have provided proper height/width to <my-video-player element.

Adding Controls

Till now we have clean UI now let’s add play/pause button and here we will use Iron-Icons andpaper-icon-button. So first, let’s save Iron-Icons as dependencies to our player,

bower install –save PolymerElements/iron-icon

bower install –save PolymerElements/paper-icon-button

Now when it’s done import below libraries in my-video-player.html.

Now add the below markup and styling in my-video-player.html.

Let’s make it work,

Now we have play/pause button but if you click on those buttons nothing happens, to make that work we have to Bind On Click event on those buttons. The polymer provides some built-in listeners read more about Polymer events and Polymer gesture events.

Add on-click attribute in .left-section div on-clicks shown below.

In the above code _playPause() method,

1. this.$.video refers to an internal node with the id=”video”.
2. We are switching the value of this.isPlaying to true or false in order to show the play or pause button.

Adding Progress bar

To indicate the progress of video,here we will use custom Paper-Progress element. let’s first installPaper-Progress element using bower. run the below command,

Once it’s done, import the paper-progress.html into our my-video-player.html as shown below,

Now write below markup into the second section i.e. .seek-wrapper div,

Till now paper-progress has its default styling let’s modify it so that it should look according to our layout. Add the below CSS into it,

Let’s write some javascript in order to put life into our progress bar, here we will add two event listener to the video.

1. The first method will be called when video element’s metadata gets loaded.
2. The second method will update the progress bar.

In the below code,

1. In the method, _setDuration() we are setting the max value of the paper-progress.
2. _updateProgressBar() method  will update the progress bar value.

Adding Timer

Let’s add the duration property into Polymer element, which we are showing the timer on right-top corner of the element.

Now let’s add the below markup inside our template,