Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

clappr

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

clappr

An extensible media player for the web

0.0.50
Source
npm

Version published: 10 years ago

Weekly downloads: 2.3K; increased by1.05%

Maintainers: 3

Weekly downloads

Created: 10 years ago

Source

Clappr Player

Using the Player

Add the following scripts on your HTML:

<head>
  <script type="text/javascript" charset="utf-8" src="http://cdn.clappr.io/latest/underscore.js"> </script>
  <script type="text/javascript" charset="utf-8" src="http://cdn.clappr.io/latest/jquery.js"> </script>
  <script type="text/javascript" charset="utf-8" src="http://cdn.clappr.io/latest/clappr.min.js"> </script>
</head>

Now, create the player:

<body>
  <div id="player"></div>
  <script>
    var playerEl = document.getElementById("player");
    var player = new Clappr.Player({source: "http://your.video/here.mp4"});
    player.attachTo(playerEl);
  </script>
</body>

:warning: Note that is not necessary to add underscore or jquery scripts if your website already have it.

Formats Supported

Format	IE10	IE11	Firefox	Chrome	Safari	iPhone	iPad	Android
HLS	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
MP4	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
MP3	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
DASH	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:
RTMP	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_multiplication_x:	:heavy_multiplication_x:	:heavy_multiplication_x:

Built-in Plugins & Embed Parameters

All parameters listed below shall be added on Clappr.Player object instantiation. Example:

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  parameter1: "value1",
  parameter2: "value2",
});

Player Size

You can set the player size setting width and height parameters.

Auto Play

Add autoPlay: true if you want the video to automatic play after page load.

Auto Play when Visible

If you want to play the video when it appears partially on screen, set autoPlayVisible: 'partial'. In case you want the player to play when it is full visible, autoPlayVisible: 'full'.

Mute

Add mute: true if you want to start player with no sound.

Google Analytics Plugin

Enable Google Analytics events dispatch (play/pause/stop/buffering/etc) adding your gaAccount. Optionally, pass your favorite trackerName as gaTrackerName. Example:

  var player = new Clappr.Player({
    source: "http://your.video/here.mp4",
		gaAccount: 'UA-44332211-1',
		gaTracker: 'MyPlayerInstance'
  });

Control bar colors

Customize control bar colors adding mediacontrol hash. Example:

  var player = new Clappr.Player({
    source: "http://your.video/here.mp4", 
    mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}
  });

Result:

Clappr with modified media control colors

I'm sure you can do better than me.

Watermark

Put watermark: http://url/img.png on your embed parameters to automatically add watermark on your video. Choose corner position by defining position parameter. Positions can be bottom-left, bottom-right, top-left and top-right. Example:

  var player = new Clappr.Player({
    source: "http://your.video/here.mp4", 
    watermark: "http://url/img.png", position: 'top-right'
  });

Poster

Define a poster by adding poster: http://url/img.png on your embed parameters. It will appear after video embed, disappear on play and go back when user stops the video.

Stats

Clappr has a native statistics plugin that accounts QoE metrics such playing time, rebuffering time, total rebuffers, etc. Metrics report happens periodically, learn how to access these numbers on Create your own plugin session.

Status

Clappr is under heavy development but production-ready. Feel free to open issues and send us pull requests.

Installing for development

Clone the project and install gulp:

npm install -g gulp

Then enter the project directory and install the dependencies:

npm install

Make your changes and build your own version:

gulp build

Check the result on dist/ folder.

Contributors

The culprits of this project are listed here.

Contributing

In general, we follow the fork-and-pull git workflow:

Fork the repository on GitHub
Commit changes to a branch in your fork
Pull request "upstream" with your changes
Merge changes in to "upstream" repoository

:warning: Be sure to merge the latest from "upstream" before making a pull request.

FAQs

What is clappr?

Is clappr popular?

Is clappr well maintained?

Package last updated on 30 Oct 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

clappr

Clappr Player

Using the Player

Formats Supported

Built-in Plugins & Embed Parameters

Player Size

Auto Play

Auto Play when Visible

Mute

Google Analytics Plugin

Control bar colors

Watermark

Poster

Stats

Status

Installing for development

Contributors

Contributing

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results