Browse files

New docs (#1654)

Add BUILDING guide, CONTRIBUTING doc, add lint script to package
  • Loading branch information...
johnBartos authored and robwalch committed Jan 5, 2017
1 parent b6220c6 commit c5b14ef0c09a85000de7136fc8b8a85a3c1c367e
Showing with 201 additions and 53 deletions.
  1. +109 −0
  2. +91 −53
  3. +1 −0 package.json
@@ -0,0 +1,109 @@
# Contributing to JW Player
Thanks for considering contributing to our repo! We appreciate all contributions to the player, large or small. Please take the time to read through this document before making a contribution to ensure a fun and effective process for everyone involved.
## General Guidelines
Are you having trouble getting started with JW Player, configuration, or customization? If so, please check the [support docs]( before submitting an issue here.
As contributors and maintainers of this repo, we'll do our best to help you out as soon as we can - however, we ask you to be respectful of our time. Our team is based in NYC and works in EST time, Monday - Friday. If your issue has been around for a while and hasn't been responded to, feel free to ping @johnBartos in the comment of your issue.
## Official Support
This guide is focused specifically for developers contributing towards this open-source project. If you pay for JW Player, you're entitled to direct help from our support team [here](
## Bug Reports
A bug is a *demonstrable* problem caused by code in the repository. Bug reports are very helpful! If you think you've found a bug in the player we'd love to know about it (and fix it).
#### Hold Up!
Before submitting an issue, please do your best to confirm that your issue is *reproducible* and a problem with our player by running through this checklist. Afterwards, if you're still unsure about the cause of your problem, please feel free to submit an issue and we'll do our best to help. For issues building & developing the player, skip this guide and submit a report directly.
##### Issue Checklist
1. Check the console:
- Are there any network errors (`404`, `403`, `500`, etc)?
- Is there a CORS error (`access-control-allow-origin`)?
- Are there errors thrown by third-party code?
2. Check your player:
- Are you using the [latest version](
- You can test streams with the latest version [here](
- Are you using Flash?
- Ensure you're using the latest version of Flash.
- We're in the process of deprecating Flash and will only fix
critical bugs.
- Is your [Configuration]( valid?
3. Check your browser:
- Are you using a [supported browser](
- Are you using the latest version?
- Does the browser support the feature you're trying to use?
- Do we implement the feature you're using?
- For example, we use native HLS playback where available (Safari, Edge, Mobile).
4. Check your OS (Mobile):
- Are you using a [supported device](
- Are you running the latest version?
5. Check your code:
- Are you using a [supported media type](
- Are you using the [API]( correctly?
6. Check through our [issues](
and make sure your's isn't already reported or resolved.
#### You've Found an Issue
Great! Please [create an issue]( and follow the guidelines as best as you can - each ask gives us information necessary to solve your problem. If submitting a playback issue, make sure we can access your video at all times. If live, ensure that you provide us with the failing segments. And if you're able to, please isolate your issue by creating a standalone test page.
##### Test Page Template:
        <script src='LINK_TO_YOUR_PLAYER'></script>
<div id="player">Loading the player...</div>
var player = jwplayer('player').setup({ ... });
## Pull Requests
Pull requests are a great way to help out and improve JW Player. Before embarking on a large PR, please ask us first - we may not need your changes in the repo and don't want you to waste your energy.
To get your repo up and running, please refer to
#### First Timers
If you've never contributed before, don't worry - we'll do the best we can to help you throughout the process. Unsure of where to begin? Check out our [beginner bugs](, or refer to the Questions/Discussions section and drop us a line.
#### General Guidelines
While far from comprehensive, following these guidelines will get the easy stuff out of the way and speed the process along. In addition, please include a good description of what you've changed and why you've changed it.
##### Branch Naming
- Bugfixes: `bugfix/your-branch`
- Features: `feature/your-branch`
- Hotfixes: `hotfix/your-branch`
##### Style
1. **Code written must work across all supported browsers and devices without transpilation - Chrome, FF, Safari, Edge, and IE 9-11**
- Usually this means writing in pure ES5, but ES6 features are allowed if they work everywhere
2. Ensure that your code follows our styleguide by passing our ESLint rules
3. Ensure that your code passes static analysis by running Flow
4. Do your best to match our naming conventions and conform to the style of the code around you
5. If you have a large or messy commit history, please rebase & squash your commit history
##### Tests
1. Ensure that all existing tests pass
2. We don't demand 100% coverage, but please write tests that cover at least the happy paths
- Some code is hard to test or untestable - we won't hold it against you if you're working in a particularly difficult area. Just let us know if you've had some trouble
3. If your changes cannot be automated, include a manual test page that demonstrates the functionality of your changes
##### Size
1. Do your best to keep your PRs as small and focused as possible
- If your PR is large, consider breaking it into smaller ones
2. **Large additions to the code base must be justified** - we strive to keep the player as small as possible
3. Additions to `package.json` must be backed by good reasons
## Feature Requests
Feature requests are also welcome, but may not fit within the scope of the player. It's up to you to make the case for your feature and convince us that it's worth implementing. We encourage you to try and solve your problem using the [API]( or [Configuration]( first. As always, you're free to fork the player and implement what you want - feel free to ask questions by following our Questions/Discussions guidelines.
## Questions/Discussions
We love to answer questions and talk with developers! Feel free to ask questions via [gitter](, the [video-dev-slack](, or by [creating an issue]( . And if you're in the NYC area, you can come and meet us and other video devs in the flesh at the [Video Tech NYC Meetup](
@@ -3,64 +3,102 @@
[![Join the chat at](](
> Plays everywhere, every time.
> JW Player is -the- solution for making video playback seamless across browsers and file types.
> It empowers the developer to interact with video programmatically to create unique and awesome user experiences.
[Developer API Examples and Demos](
[Documentation and Support](
## Example
The example below will find the element with an id of *my_video* and render a video player into it.
// Create a jwplayer instance
file: '/uploads/example.mp4',
// Add a custom callback for when user pauses playback
jwplayer('my_video').on('pause', function(event) {
alert('Why did my user pause their video instead of watching it?');
Other callbacks that we provide include
* **play / complete**
* **seek / pause**
* **volume / mute**
* **[and more](**
You also have the power to programatically set any configuration within the player.
function bumpIt() {
var vol = player.getVolume();
player.setVolume(vol + 10 );
Live on over 2 million sites with 1.3 billion unique plays per month, JW Player is the solution for seamless video playback across browsers and media types. It empowers the developer to interact with video programmatically to create unique and awesome user experiences.
## Official Documentation
- [Developer Portal](
- [API Reference](
- [Configuration Reference](
- [Demos](
- [Support](
## A Simple Example
The example below will render a video player into the div with the `player` id, listens to an event, and makes a few calls using the API.
        <script src='LINK_TO_YOUR_PLAYER'></script>
<div id="player">Loading the player...</div>
// Setup the player
const player = jwplayer('player').setup({
file: 'LINK_TO_YOUR_FILE.mp4'
// Listen to an event
player.on('pause', (event) => {
alert('Why did my user pause their video instead of watching it?');
// Call the API
const bumpIt = () => {
const vol = player.getVolume();
player.setVolume(vol + 10);
Check out an interactive example in this [JSFiddle](
## Contributing
We appreciate all contributions towards the player! Before submitting an issue or PR, please see our contributing docs [here](
### Build Instructions
1. Install [Node.js](
1. Install [Java](
## Building the Player
We use `grunt` and a few `npm scripts` to build the player, lint code, and run tests. Debug code is built to `/bin-debug`, while minified & uglified code is built to `/bin-release`. Code is built with `webpack`, linted with `eslint` and `flow`, and tested with `karma` and `qunit`.
# First time set up
npm install -g grunt
npm install
# Build using
#### Requirements:
1. [Node.js](
2. [Java](*
\* Optional, but required for building Flash. If not installed you must `grunt` with the `--force` flag.
#### Steps:
1. Fork the project, clone your fork, and set up the remotes:
# Clone your fork of the repo into the current directory
git clone<your-username>/jwplayer
# Navigate to the newly cloned directory
cd jwplayer
# Assign the original repo to a remote called "upstream"
git remote add upstream
2. Install the dependencies:
# Install grunt globally
npm install -g grunt
npm install
# Optionally, install webpack-dev-server
npm install -g webpack-dev-server
3. Build the player:
# Build once, Flash and JS
# Complete Watch - builds FLash and JS, lints, and tests on each change
grunt serve
# Quick JS Watch - build only. Requires webpack-dev-server to be installed globally
webpack-dev-server --only debug -w --port 8888 --output-public-path /bin-debug/
4. Test your code:
After build, the assets will be available in the `bin-release` folder.
# All browsers
grunt test
# Individual browsers - chrome, firefox, ie11, ie10, ie9
grunt karma:{BROWSER} e.g. grunt karma:chrome
5. Lint your code:
npm run lint
npm run flow
## Software License
The use of this library is governed by a [Creative Commons license]( You can use, modify, copy, and distribute this edition as long as it’s for non-commercial use, you provide attribution, and share under a similar license.
@@ -65,6 +65,7 @@
"scripts": {
"test": "karma start",
"lint": "eslint ./src/js",
"flow": "flow; test $? -eq 0 -o $? -eq 2"
"engines": {

0 comments on commit c5b14ef

Please sign in to comment.