VideoPlayer

A simple HTML5/JS video player. Crated just to check out the HTML5 <video> JavaScript API.

---

Configuration

To be able to run smoothly, the player requires some basic configuration.

• playerPoster - poster file location (image that's displayed when player is stopped)
• playerContainer - id of the DOM Element that the player should be injected into
• playlistContainer - id of the DOM Element that the playlist component should be injected into
• playlistData - playlist configuration object that includes two fields:
  • type - type of configuration provided obj for object, url for JSON file to load via XHR
  • data - either an object with all the data as specified below or an url to JSON file

let vplayer = new VideoPlayer({
  playerPoster:       "img/poster.jpg",
  playerContainer:    "vplayer",
  playlistContainer:  "playlist",
  playlistData:       {
    type: _list_type_,
    data: _playlist_data_source
  }
});

---

Playlist

Player includes basic support for playlist, which should be an array of objects in format mentioned below.

• title - title of the movie clip
• url - movie file location (currently remote resources are not supported)
• duration - movie clip duration
• type - file format: video/mp4, video/webm, video/ogg

A sample playlist element:

  {
    title:    "Sample video title",
    url:      "/vids/sample_video.mp4",
    duration: "0:05",
    type:     "video/mp4"
  }

---

Setup

To run it locally:

1. Clone the repository
2. run npm install or yarn install to install all the packages
3. Use gulp to build the project.
4. Open browser and load up http://localhost:9001

For now the build process assumes that video files are located inside /vids/ folder in the root.