videojs-zapping

A plugin to simulate the experience of watching live TV but in the browser.

Table of Contents

• Overview
• Installation
• Usage
  • <script> Tag
  • Browserify/CommonJS
• API Documentation
• License

Overview

Installation

Install videojs-zapping via npm:

npm install videojs-zapping

Usage

To include videojs-zapping on your website or web application, use any of the following methods.

It is mandatory to add an id to the <video> tag that matches the argument passed to the videojs() function. In this case the id of the video must be 'my-video'

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-zapping.min.js"></script>
<script>
  var player = videojs("my-video");

  player.zapping({
    playlist: [
      {
        sources: [
          {
            src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
            type: "video/mp4",
          },
        ],
        poster: "http://media.w3.org/2010/05/sintel/poster.png",
      },
      {
        sources: [
          {
            src: "http://media.w3.org/2010/05/bunny/trailer.mp4",
            type: "video/mp4",
          },
        ],
        poster: "http://media.w3.org/2010/05/bunny/poster.png",
      },
    ],
  });
</script>

Browserify/CommonJS

When using with Browserify, install videojs-zapping via npm and require the plugin as you would any other module.

var videojs = require("video.js");

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require("videojs-zapping");

var player = videojs("my-video");

player.zapping({
  playlist: [
    {
      sources: [
        {
          src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
          type: "video/mp4",
        },
      ],
      poster: "http://media.w3.org/2010/05/sintel/poster.png",
    },
    {
      sources: [
        {
          src: "http://media.w3.org/2010/05/bunny/trailer.mp4",
          type: "video/mp4",
        },
      ],
      poster: "http://media.w3.org/2010/05/bunny/poster.png",
    },
  ],
});

API Documentation

For the API Documentation, visit this page.

License

Apache-2.0. Copyright (c) Qualabs