Videogular JavaScript Video Player Guide

Building an #Angular Video Player with Videogular

  • mp4″ type=’video/mp4′
    /video

    script this is what Videogular implementation looks like:

    vg-player
    vg-buffering/vg-buffering

    vg-controls
    vg-play-pause/vg-play-pause
    vg-time-display vgProperty=”current”
    vg-scrub-bar
    /vg-scrub-bar

    vg-time-display vgProperty=”total”
    vg-mute/vg-mute
    vg-volume/vg-volume

    vg-fullscreen/vg-fullscreen
    /vg-controls

    video #myMedia [vgMedia]=”myMedia” id=”myVideo” preload=”auto” crossorigin
    source src=”video-url.

  • mp4″ type=’video/mp4′
    track kind=”subtitles” label=”English” srclang=”en” default
    track kind=”subtitles” label=”Español” srclang=”es”
    /video
    /vg-player

    The good thing about Videogular is that, with just a quick look to the HTML code, you know how this player works, which controls are available, and how to modify it to remove, for example, the tracks and the track selector.

  • Now you can install the videogular2 library and core-js typings:

    npm install videogular2 –save
    npm install @types/core-js –save-dev

    Creating an Angular video player

    If you want to, you can use the official Videogular font to set icons on your buttons and controls.

  • vg-player
    vg-controls
    vg-play-pause/vg-play-pause

    vg-time-display vgProperty=”current”
    vg-scrub-bar
    /vg-scrub-bar

    vg-time-display vgProperty=”total”
    vg-mute/vg-mute
    vg-volume/vg-volume

    vg-fullscreen/vg-fullscreen
    /vg-controls

    video #media [vgMedia]=”media” id=”singleVideo” preload=”auto” crossorigin
    source type=”video/mp4″
    /video
    /vg-player

    Now you can run the server and enjoy your first video app powered by Angular and Videogular.

  • /app.component.scss’ ]
    })
    export class AppComponent {
    playlist: ArrayIMedia = [
    {
    title: ‘Pale Blue Dot’,
    src: type: ‘video/mp4’
    },
    {
    title: ‘Big Buck Bunny’,
    src: type: ‘video/mp4’
    },
    {
    title: ‘Elephants Dream’,
    src: type: ‘video/mp4’
    }
    ];
    }

    Now we’re ready to add the playlist below our player in the HTML file:

    ul
    li *ngFor=”let item of playlist; let $index = index”
    $index)”
    [class.selected]=”item === currentItem”
    {{ item.title }}
    /li
    /ul

    Let’s add some styles for the selected class and the hover effect:

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif;

    li {
    padding: 10px;
    cursor: pointer;

    .

Building an Angular video player allows developers to leverage their HTML, CSS, and JavaScript skills, using common elements and working on the same code.

@angularjs_io: Building an #Angular Video Player with Videogular

The Videogular project is supported by Toptal Open Source Grants. Toptal Open Source Grants supports members of the Toptal network pursuing Open Source projects.

As one of the first Open Source Grants recipients, Raul Jimenez Herrando is adding new features, fixing bugs, and writing documentation for the Videogular project. To learn more about Toptal Open Source Grants, email opensource@toptal.com.

According to online traffic statistics, video is taking over control of the web. The good old TV is dying and companies are moving fast to dominate a market that will represent the 80% of online traffic by 2019 .

Many media providers and products rely on HTML5 video support:

The developer community needs a solid, extensible, and advanced media framework (not just an HTML5 video player) to face the new challenges that lay ahead. In this article, I want to introduce one such framework: Videogular.

What Is Videogular?

As the name suggests, Videogular is a media framework written in Angular 2+. With Videogular, you can play HTML5 video, audio, or any other content that you want. There is an implementation for Angular 1.X (a.k.a AngularJS), but in this article we will talk only about the current Angular 2+ version.

So, the next question that probably is crossing your mind is: Why use Angular for video?

Well, there are a number of good reasons for choosing a specific framework to create a video library.

Additionally, we have some other cool features like RxJS, AOT (ahead-of-time compilation), the Angular CLI, and more.

How Does Videogular Work?

I like to say that Videogular is more of a media framework than just an HTML5 video player. The most relevant feature and difference between other video players is that you write tags to set up your player instead of JavaScript.

This is how most video players work right now:

And this is what Videogular implementation looks like:

The good thing about Videogular is that, with just a quick look to the HTML code, you know how this player works, which controls are available, and how to modify it to remove, for example, the tracks and the track selector.

But this is not the only advantage we can benefit from when building an Angular video player. Think of big development teams where HTML/CSS designers and JavaScript developers work together on the same code base. Because we’re using custom elements, designers can start working by applying styles and animations without the need to learn a new library or even JavaScript/TypeScript.

Also, Videogular provides much more powerful capabilities than just writing a plain Angular video player, like automatic synchronization between several media files, or the ability to play not only video/audio, but just about any content that has a beginning and an end.

To see how easy is to create a rich, interactive app with Videogular, we’re going to create a video playlist with synchronized metadata.

In this example, we will have a list of videos and a related excerpt from Wikipedia, just in case the user needs to have more information about the video.

All the code is available on our Videogular Showroom GitHub repo and it’s published as a GitHub page.

Videogular installation should be a straighforward affair for any skilled Angular developer. On the other hand, if you’re just getting started in Angular, you should check out this quick guide to making your first Angular app.

If you have not installed Node.js yet, go to the Node.js official website and install it. This is the only server we need to develop with Angular, and we need it to install dependencies via NPM. You just need to be sure to install Node.js 6.9.0 or higher and NPM 3.0.0 or higher.

The first thing we need to do is to install the Angular CLI. The Angular CLI is a must-have tool for any Angular developer, since it provides easy scaffolding, testing, development servers, and productions builds. Even more importantly, it follows a convention that any other Angular developer can understand.

Install the Angular CLI globally via NPM:

And let’s create our first project with support for SASS:

. The Angular CLI will run a Node.js development server with live reloading and all the cool features that we as developers love.

typings:

file available on the root of your project.

To start using Videogular in your project, you have to add the Videogular module to your application module.

file should like:

With everything set up, we just need to write our HTML code!

Now you can run the server and enjoy your first video app powered by Angular and Videogular.

To list our videos, we will create a simple array with all the options. Just keep in mind that you can load this list via a REST service with Angular’s HttpModule, but for the sake of simplicity, we will do this hard-coded in this demo.

and add this array of videos and its interface:

Now we’re ready to add the playlist below our player in the HTML file:

effect:

to add the method:

when the user clicks on an item of the playlist.

property of the HTML5 video element:

Now we can test our playlist and see how it works. The first video is loaded at the beginning and we can change between videos, so everything’s fine! But we can make some tweaks and improve the experience by switching automatically between videos when a video is completed, and adding better overall management of the player state.

To do this we will need the Videogular API, a global service available on every Videogular instance to handle the state and listen for events.

Our media playlist is right now 100% functional, but we can improve the user experience by autoplaying videos when a new item is selected or when a video is completed.

component. Actually, all Videogular modules are based in this public API, so you can create your own modules for your customers or contribute to the community by releasing them as open source.

event fired by the VgPlayer component:

tag:

event.

to play the video when the metadata is loaded:

observable is fired.

property? Now is the moment to use it so we can move to the next video when the current video is completed:

that will update our Angular bindings in the UI.

observable.

This makes our code easier to read and harder to break! Observables are awesome right?

What’s next?

From here, we could add some HTML5 video controls to remove autoplay or the infinite loop, inject advertisements, or synchronize information.

In this demo, we just scratched the surface of what’s possible to do with Videogular. The API is capable of managing several media files at the same time, we have modules for streaming and advertisement, and you can even create a media player to play animations, routes in a map, and much more.

Videogular is released under an MIT license and is an open-source project available on GitHub. Everybody is welcome to create a pull request, submit an issue, write documentation, and contribute to the community.

Videogular JavaScript Video Player Guide

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.