Skip to content
Permalink
Browse files

Add files via upload

  • Loading branch information
kcorneli201 committed Aug 26, 2019
1 parent ed322b6 commit f693c00b0eaf28b5d60ee42ee10cdc202da2b818

Large diffs are not rendered by default.

@@ -0,0 +1,21 @@
#JW7 Designer Kit

The **JW7 Designer Kit** is a starting point for designing and building new skins. This photoshop template includes GUI elements found in the 7.9.1 release of JW7. The purpose of this kit is to encourage designers and developers to fully customize the player to create fully branded experiences for their content.

This PSD includes well organized and labeled layers that correspond to css selectors in our skinning model for easy collaboration between designers and developers. All elements and shapes within the PSD are fully editable.

You may also find our [CSS Skinning Model](//developer.jwplayer.com/jw-player/css-skinning-model.html) documentation useful as you get started designing your new skin.

[Download the JW7 Designer Kit](//developer.jwplayer.com/downloads/kits/jw-player/jw7-seven-designer-kit-7.9.1.zip)

***

Below is a preview of what is included in the **JW7 Designer Kit**.

<h4>Player State Idle</h4>

![Alt text](/img/00-player-idle.png)

<h4>Player State Paused</h4>

![Alt text](/img/01-player-paused.png)
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,32 @@
#Introduction
Hello World!

We’re JW Player. We strive to enable developers and designers (like you!) to build, customize, and deliver the best video experiences for viewers across web, mobile, and OTT devices.

##Purpose
Our goal is to provide you with documentation on more advanced uses of JW Player. Here you will find a consolidated reference of API calls and design resources to accelerate your development process with our player.

##Intended Audience
This site specifically caters to developers and designers who are using JW Player in their projects. For basic configuration settings or assistance embedding a player, please see our [support site](https://support.jwplayer.com). If you are visiting the developer site, a basic level of Javascript is required to use our API and a knowledge of CSS is necessary in order to customize our skinning model.

##Licenses
Certain features of JW Player may require specific license types. For example, HLS and DASH streaming requires a Premium license, DRM and Advertising require an Enterprise license. A more extensive explanation of license types, and their features, can be be found on our [pricing page](https://www.jwplayer.com/pricing/).

##Structure
Our developer guide offers sections dedicated to developing with JW Player. Namely, we offer sections like:

* Javascript API
* Customization
* Design Resources
* Release Notes

Within each of these sections, you'll find starter guides, documentation, code samples, links to demos, and additional resources.

##Contact
If you’re unable to find the resources you need on our developer site:

- We regularly monitor [StackOverflow](https://stackoverflow.com/questions/tagged/jwplayer) for questions.
- We welcome contributions to our open source Player code on [GitHub](https://github.com/jwplayer/jwplayer).
- Stay connected on Twitter [@JWDevelopers](https://twitter.com/JWDevelopers).
- We’re available to discuss feedback (or new cat videos!) at [devrelations@jwplayer.com](mailto:devrelations@jwplayer.com).
- License upgrades are handled at our [contact us](https://www.jwplayer.com/contact-us/?utm_source=developer&utm_medium=CTA&utm_campaign=player-docs) page.
@@ -0,0 +1,67 @@
# Analytics System Integrations

By default, JW Player tracks only playback data with [Google Analytics](http://support.jwplayer.com/customer/portal/articles/1417179-integration-with-google-analytics) as an integrated solution. However, there are many more potential analytics services that can be used with our API. Provided that your analytics service is capable of sending this information via Javascript, all API events can hypothetically be tracked and measured.

## Listening for Events

A full introduction to our player's API can be found on our [API Introduction](https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_introduction/) page. In a nutshell, JW Player's API is capable of listening for specific changes, either initiated by user or by API, and then returning information about its use. A very basic example of detecting when a user initiates a mute would be:

```
jwplayer().on('mute',function(){
//I would fire my mute tracker here!
//What happens here would be dependent on your analytics product!
});
```

​For a full list of trackable player events grouped by category, please visit our [API reference page](https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/).

## Sending Events With Google Analytics

Now that you're able to determine that an event occurred on a page, a ping will need to be sent to an analytics platform for tracking. If your analytics platform of choice is Google Analytics, you'll need to initiate a **send** event. As mentioned in our previous article [here](http://support.jwplayer.com/customer/portal/articles/1417179), you'll need to make sure that you are implementing the new analytics.js on your page, rather than the older ga.js.

Let's assume that we have a single player on a page. If I would like track with our Google Analytics account when an error has occurred with our player (and the error itself), we can use the following code:

```
jwplayer().on('error', function(event) {
ga('send', 'event', 'JW Player Events', 'Errors', event.message);
});
```

Once triggering an error state, we are able to check into our Google Analytics page and see our tracked event(Under realtime events). In this case, **Errors** will populate in the **JW Player Events** category, and the error itself will be listed under **Actions**. The exact error message will be listed under the **Label** section.

More information about tracking events with the above code can be found [here](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) in Google's own analytics documentation.

## Sending Events With comScore

Much like a custom GA implementation, if you are utilizing comScore analytics, it is possible to create a setup similar to the above. The below table shows comScore events and their JW Player API equivalents:

|Comscore Event|JW Player API Event|
|--------------|-------------------|
|StreamSenseEventType.BUFFER|on('buffer');|
|StreamSenseEventType.PAUSE|on('pause');|
|StreamSenseEventType.PLAY|on('play');|
|StreamSenseEventType.END|on('complete');|
|Fullscreen State|getFullscreen();|
|Volume|getVolume();|
|Media Position|getPosition();|
|Video Source|getPlaylistItem().file|
|Current Bitrate|getQualityLevels()[getCurrentQuality()].bitrate|

## Sending Events With Adobe Site Catalyst

As of JW7, integrated Site Catalyst support has been removed. Events can still be tracked using the JW Player API and Site Catalyst's event tracking pings. Further information can be found on Adobe's site:

* [HTML5 Video Measurement](http://blogs.adobe.com/digitalmarketing/analytics/html5-video-measurement/)
* [Media Monitoring Reference](https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_mediamonitor.html)
* [Video Measurement Success](http://blogs.adobe.com/digitalmarketing/analytics/initializing-video-measurement-success/)

Again, the same API events listed above for other implementations can be utilized to send these SiteCatalyst measurement pings as well. The below table shows which JW Player events may correlate with their SiteCatalyst counterparts. Please note that some additional logic may need to be put in place to properly send the correct context for these events.

|SiteCatalyst Event|JW Player API Event|
|---|---|
|s.Media.stop|on('pause');|
|s.Media.stop|on('buffer');|
|s.Media.stop|on('idle');|
|s.Media.close|on('complete');|
|s.Media.play|on('play');|
|s.Media.open|getPlaylist()[getPlaylistIndex()].[information](https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/#playlist)|
@@ -0,0 +1 @@
<meta http-equiv="refresh" content="0; URL='../../../../docs/javascript-api-reference/jw7/'" />
@@ -0,0 +1,173 @@

<script src='//content.jwplatform.com/libraries/XeGdlzmk.js'></script>
# Introduction to the Javascript API

This article explains the basics of how to use the [JavaScript API](//jwplayer.com/products/jwplayer/javascript/) component of JW Player. This API can be used to enhance the functionality of your video embeds, or to implement rich page-level video interactions. Unless noted, there are no differences between Flash and HTML5 API calls, so the code you write will work across multiple technologies.

###Note: We strongly suggest that all API calls be made after the player is considered ready.

* * *

## Getting Information with the JW Player API

Certain API calls utilize a "get" prefix, which signifies that their express purpose is to return certain information. This may be in the form of an object, an array, a string, or a number. Each API call will have the expected output format listed in the full [JavaScript API Reference](//developer.jwplayer.com/jw-player/docs/javascript-api-reference/).

#### "Get" API calls can return information like:

* An array of playlist items with __jwplayer().getPlaylist()__
* The duration of a video with __jwplayer().getDuration()__
* The current playback state of the video player with __jwplayer().getState()__
* The current pixel dimensions of a JW Player with __jwplayer().getHeight()__ and __jwplayer().getWidth()__

* * *

## Controlling and setting with the JW Player API
These types of API calls are used to control player behavior. Many of these calls expect a value to be passed along with it. For example, setVolume() expects a number from 1-100 to be included.

#### API calls can tell the player to do things like:

* Pause playback with __jwplayer().pause(true)__
* Set volume to 50% with __jwplayer().setVolume(50)__
* Seek to 2 minutes into a video with __jwplayer().seek(120)__

* * *

## Event listening with the JW Player API

Certain events are triggered when the player _does_ something. JW Player 7 bases its event structure on [backbone.events](http://backbonejs.org/#Events). This allows a player instance to be used as an event router and gives developers better options and control. Certain events also return information. We list this expected information in the full [JavaScript API Reference](//developer.jwplayer.com/jw-player/docs/javascript-api-reference/) document.

Currently, JW Player events support the following event triggers:

|Listener|Description|Example|
|---|---|---|
|on(_'event'_)|Using an _on_ listener will continually listen for an event for a specified player. If this player is removed and set up again, the listener will also need to be reinstated.|jwplayer().on(event, [callback], [context])|
|off(_'event'_)|Signifies to stop listening for a particular event|jwplayer().off(event, [callback], [context])|
|once(_'event'_)|Behaves similarly to on, however will only trigger for a single event, until it is set up again.|jwplayer().once(event, [callback], [context])|
|trigger(_'event'_)|Capable of firing events to a listener. This replaces dispatchEvent from JW6.|jwplayer().trigger(event, [*args])|

The below event triggers every time a volume change is initiated, and will return a number called "volume" within an object.

```
jwplayer().on('volume', function(e) {
alert("Volume is changed to: "+ e.volume);
});
```
* * *

## Example: Using the JW Player API

Before it is possible to interact with a player, a player setup is required. Our [Embedding Article](//support.jwplayer.com/customer/portal/articles/1406723#fndtn-basic) contains several examples. Here is the proper syntax for a basic player embed:

```
<div id='myElement'>Loading the player...</div>
<script type='text/javascript'>
jwplayer("myElement").setup({
"file": "/uploads/example.mp4",
"image": "/uploads/example.jpg"
});
</script>
```

Once the player completes its setup, API calls can immediately be made. If you have one player on your page, it can always be accessed using the **playerInstance** reference function. For example:

```
<script>
jwplayer("myElement").on('complete', function(){
alert("Complete fired - Your content has completed!");
});
</script>
<a href="javascript:jwplayer('myElement').play();">Toggle playback</a>
<a href="javascript:alert('The volume of the player is: ' + jwplayer('myElement').getVolume());">Report volume</a>
```

Here is a simple example of how our API functions, based on the above code:
<div id="myElement"></div>
<script type="text/javascript">
jwplayer("myElement").setup({ "file": "https://content.jwplatform.com/videos/C4lp6Dtd-640.mp4"});
jwplayer("myElement").on('complete', function(event){
alert("Complete fired - Your content has completed!");
});
</script>

<a href="javascript:jwplayer('myElement').play();">Toggle Playback</a> |
<a href="javascript:alert('The volume of the player is: '+jwplayer('myElement').getVolume());">Return Player Volume</a>

* * *

## Targeting Multiple Players

When you have multiple players on a page, you must be specific about which player you want to interact with. Let's assume that we have embedded two different players on the same page:

```
<div id='myFirstPlayer'>Loading the first player...</div>
<div id='mySecondPlayer'>Loading the player...</div>
<script type='text/javascript'>
jwplayer("myFirstPlayer").setup({
"file": "/uploads/example.mp4",
"image": "/uploads/example.jpg"
});
jwplayer("mySecondPlayer").setup({
"file": "/uploads/example2.mp4",
"image": "/uploads/example2.jpg"
});
</script>
```

There are two ways that we can target a player:

### 1 - Include the id of the player div:
```
// ID references the first player
jwplayer("myFirstPlayer").play();
```

### 2 - Include the index of player you wish to target
```
// An index of 1 targets the second player on the page
jwplayer(1).play();
```

!!!
Not including an ID or index with your API call will always target the first player on a page.
!!!

* * *

## Require.js and JW Player

JW Player is not currently supported within require js due to JW Player needing to use jwplayer namespace. To avoid issues when require and jwplayer.js are on the same page, load jwplayer.js before the require.js script is loaded.

**Example:**

```
<script src='jwplayer.js'>
<script src='requirejs.js'>
```

* * *

## Cheat Sheet Reference

The table below act as a cheat sheet of all API calls. The separate [JavaScript API Reference](//developer.jwplayer.com/jw-player/docs/javascript-api-reference/) guide contains an listing of all parameters for all API calls. Click on the name of a class in the table to jump to the corresponding section in the API Reference. Also, for the sake of simplicity, we are only referencing **on** events here. As mentioned above, these can also utilize **off**, **once**, and **trigger**.

|Class|Getters|Setters|Events|
|-----|-------|-------|------|
|[Setup](javascript_api_reference/#setup)|getRenderingMode()|setup()<br/>remove()|on('ready')<br/>on('setupError')|
|[Playlist](javascript_api_reference/#playlist)|getPlaylist()<br/>getPlaylistIndex()<br/>getPlaylistItem()|load()<br/>playlistItem()|on('playlist')<br/>on('playlistItem')<br/>on('playlistComplete')|
|[Buffer](javascript_api_reference/#buffer)|getBuffer()|-|on('bufferChange')|
|[Playback](javascript_api_reference/#playback)|getState()|play()<br/>pause()<br/>stop()|on('play')<br/>on('pause')<br/>on('buffer')<br/>on('idle')<br/>on('complete')<br/>on('error')|
|[Seek](javascript_api_reference/#seek)|getPosition()<br/>getDuration()|seek()|on('seek')<br/>on('seeked')<br/>on('time')|
|[Volume](javascript_api_reference/#volume)|getMute()<br/>getVolume()|setMute()<br/>setVolume()|on('mute')<br/>on('volume')|
|[Resize](javascript_api_reference/#resize)|getWidth()<br/>getHeight()<br/>getFullscreen()|resize()|on('fullscreen')<br/>on('resize')|
|[Quality](javascript_api_reference/#quality)|getQualityLevels()<br/>getCurrentQuality()|setCurrentQuality()|on('levels')<br/>on('levelsChanged')|
|[Captions](javascript_api_reference/#captions)|getCaptionsList()<br/>getCurrentCaptions()|setCurrentCaptions()|on('captionsList')<br/>on('captionsChange')|
|[Controls](javascript_api_reference/#controls)|getControls()<br/>getSafeRegion()|addButton()<br/>removeButton()<br/>setControls()|on('controls')<br/>on('displayClick')|
|[Advertising](javascript_api_reference/#advertising)|-|playAd()|on('adClick')<br/>on('adCompanions')<br/>on('adComplete')<br/>on('adError')<br/>on('adImpression')<br/>on('adTime')<br/>on('adSkipped')<br/>on('beforePlay')<br/>on('beforeComplete')|
|[Metadata](javascript_api_reference/#metadata)|-|-|on('meta')|
|[Sharing](javascript_api_reference/#sharing)|-|getPlugin('sharing').open()<br/>getPlugin('sharing').close()|getPlugin('sharing').on('open')<br/>getPlugin('sharing').on('close')<br/>getPlugin('sharing').on('click')|
|[Related](javascript_api_reference/#related)|-|getPlugin('related').open()<br/>getPlugin('related').close()|getPlugin('related').on('open')<br/>getPlugin('related').on('close')<br/>getPlugin('related').on('play')|

0 comments on commit f693c00

Please sign in to comment.
You can’t perform that action at this time.