rafa8626

openplayerjs

The only 3 requirements to invoke the player are:

-   A valid media source, such as MP4, MP3, HLS or M(PEG)-DASH.

-   The `controls` and `playsinline` attributes to provide cross-browser support.

-   The `op-player__media` class name to invoke the player. You can add `op-player` class as well, if you don't require any Javascript configuration.

Optionally, if you want to use VTT closed captions, need to add the `track` tag as indicated in the snippet above; you can also use the `default` attribute in the tag, but as a rule of thumb, all the attributes displayed below in the `track` tag **MUST** be there; otherwise, closed captions won't be displayed.

If you are planning to use OpenPlayerJS in a Node project, you need to install the package via:

var OpenPlayerJS = require('/path/to/openplayerjs');

Sometimes you need more flexibility instantiating the player; for example, adding cache busting to the VAST/VPAID URL, having a list of Ads URLs, adding new controls, etc. So, for that case, remove the `op-player` class from the video/audio tag (leaving `op-player__media` to preserve styles), and, with Javascript, use the following options (the ones presented are the default values):

const player = new OpenPlayerJS('[player ID]', {

            left: ['play', 'time', 'volume'],

            right: ['captions', 'settings', 'fullscreen'],

        // Possible values are SW_SECURE_CRYPTO, SW_SECURE_DECODE, HW_SECURE_CRYPTO, HW_SECURE_CRYPTO,

        // HW_SECURE_DECODE, HW_SECURE_ALL

        // object containing property names corresponding to key system name strings (e.g. "org.w3.clearkey") and

        // associated values being instances of ProtectionData

        // (http://vm2.dashif.org/dash.js/docs/jsdocs/MediaPlayer.vo.protection.ProtectionData.html)

        // all FLV options available at https://github.com/bilibili/flv.js/blob/master/docs/api.md#mediadatasource

        // all HLS options available at https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning.

    // If you need Ads support use the following

import 'openplayerjs/dist/openplayer.css'

        const player = new OpenPlayerJS('player');

Check the [OpenPlayerJS with React](https://codepen.io/rafa8626/pen/GRrVLMB) and [OpenPlayerJS with Next.js](https://codesandbox.io/s/vigorous-almeida-71gln) samples for more information. **You can use all the configuration elements listed in the [Configuration options](#configuration-options) listed above**.

Using OpenPlayerJS with Vue.js is not as different as the example above; however, since Vue 3.x allows the user to use variables with reactivity, the variable that OpenPlayerJS must be assigned to **MUST NOT be reactive**; otherwise, due the changes introduced in 2.7.2 version, the main methods such as `play()`, `pause()`, `init()`, etc., will be attempted to be called via a Vue observer proxy variable, instead of an OpenPlayerJS instance.

A valid example of how to use OpenPlayerJS with Vue is as follows:

        this.$player = new OpenPlayerJS('player', {

Check the [OpenPlayerJS with Vue.js](https://codepen.io/rafa8626/pen/JjWPLeo) sample for more information. **You can use all the configuration elements listed in the [Configuration options](#configuration-options) listed above**.

Since OpenPlayerJS uses the native Media API, there are certain considerations to be taken when configuring the HTML tag with the player's configuration.

OpenPlayerJS has configured the third-party libraries within the code to be as optimized in its use as possible, but when using HTML5 sources (MP3, MP4, OGG, etc.), the best way to save bandwidth is to

set the `preload` attribute as `none` in the video/audio tag.

The only side-effect of using this, is that the duration reflected in the control bar will always be zero until the user starts playing the media.

If you want to set the duration to improve the UI experience (knowing it ahead of time, in seconds), you can use the `duration` configuration under the `progress` element.

const player = new OpenPlayerJS('video', {

        duration: 315, // Around 12:14 minutes of duration

Specially when using Ads and closed captioning, this is a common issue that has a very easy solution.

Generally speaking, the error will look like this:

`Access to XMLHttpRequest at '[WEBSITE DOMAIN]' from origin '[OTHER DOMAIN]' has been blocked by CORS policy`

And this can be solved by setting in the server side the proper permission headers (specially if you are using `localhost` for it):

Access-Control-Allow-Origin: [origin header value, or * to allow all sites]

Given that Ads can vary from VAST, VPAID and VMAP, each one has its own unique requirements.

For this sake, OpenPlayerJS integrated IMA SDK to help with this titanic task, but this means that you need to know how to configure IMA for your own scenario. Below are some of the most complex scenarios that we have encountered using Ads (aside from the known CORS issue described above).

Given that the IMA SDK library does not allow for a lot of UI customizations, the only way to translate the UI elements within the Ad (Skip button, custom click button, counters, etc.), is to setting up the language of the Ads being played.

This is achieved by using the `language` configuration, setting the desired country code. The available country codes are listed [here](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/localization?hl=en).

When personalizing the custom click button, this is sometimes desired since, by default, it has a Learn More legend and a specific color. When its needed a different label, we can leverage the `customClick` configuration set:

    "homepage": "https://www.openplayerjs.com/",

    "description": "HTML5 video and audio player",

        "url": "https://github.com/openplayerjs/openplayerjs.git",

        "build": "npm run build:styles && npm test && npm run build:sources",

        "build:sources": "webpack --mode=production && npm run create-esm && npm run create-d-types",

        "build:styles": "npx stylelint './src/css/player.css' && postcss ./src/css/player.css --use autoprefixer > ./dist/openplayer.css && postcss ./dist/openplayer.css > ./dist/openplayer.min.css",

        "create-d-types": "tsc -p tsconfig-types.json",

        "create-esm": "tsc -p tsconfig-esm.json",

        "release": "npm run build && release-it",

        "test": "npm run test:sources && tsd",

        "test:sources": "karma start --single-run --browsers ChromeHeadless --log-level info karma.conf.js",

        "test:dev": "karma start --watch --browsers Chrome karma.conf.js",

        "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"

    "readme": "https://github.com/openplayerjs/openplayerjs/blob/master/README.md",

        "@babel/plugin-transform-runtime": "^7.18.2",

        "@release-it/conventional-changelog": "^5.0.0",

        "@typescript-eslint/eslint-plugin": "^5.27.1",

        "@typescript-eslint/parser": "^5.27.1",

        "conventional-changelog": "^3.1.25",

        "copy-webpack-plugin": "^11.0.0",

        "eslint-config-airbnb": "^19.0.4",

        "eslint-config-airbnb-base": "^15.0.0",

        "eslint-config-prettier": "^8.5.0",

        "eslint-plugin-import": "^2.26.0",

        "eslint-plugin-prettier": "^4.0.0",

        "karma-chrome-launcher": "^3.1.1",

        "karma-mocha-reporter": "^2.2.5",

        "terser-webpack-plugin": "^5.3.3",

        "unminified-webpack-plugin": "^3.0.0",

# [OpenPlayer.js](https://www.openplayerjs.com)

![openplayerjs](https://user-images.githubusercontent.com/910829/46182430-d4c0f380-c299-11e8-89a8-c7554a70b66c.png)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Support%20OpenPlayerJS%20by%20giving%20the%20project%20a%20start%20at%20&url=https://www.openplayerjs.com&hashtags=openplayerjs,mediaplayer,vpaid,opensourcerocks,streaming)

[![Coverage Status](https://coveralls.io/repos/github/openplayerjs/openplayerjs/badge.svg)](https://coveralls.io/github/openplayerjs/openplayerjs?branch=master)

[![JSDelivr](https://data.jsdelivr.com/v1/package/npm/openplayerjs/badge)](https://www.jsdelivr.com/package/npm/openplayerjs)

[![CircleCI](https://circleci.com/gh/openplayerjs/openplayerjs/tree/master.svg?style=svg)](https://circleci.com/gh/openplayerjs/openplayerjs/tree/master)

This is a media player that uses all the goods of HTML5 video/audio elements to play the most popular media in MP4/MP3, HLS and M(PEG)-DASH, and also has the ability to play VMAP, VAST and VPAID ads.

**Version 3.0** of this player just started to being worked on.

**This repository is in maintenance at this point.** 

As part of a continuous effort to improve the player, this new version will include, among others:

No new features or addition will be added, only bugfixes.

-   An increased unit test coverage (aiming to have at least `70%`), including unit tests for all the demos.

-   Refactor of areas of code where creation of buttons for controls occurs, into a consolidated method to generate them.

-   Refactor of the main operations (`load`, `loadAd`, `play`, `pause`) to use Promises in a more clear fashion, and with that, execute more complex operations consistently, specially when dealing with loading dynamic content.

-   Better snippets/documentation to help users to configure OpenPlayerJS for their needs.

Because of the refactor that will be performed in that version, **support for IE11 will be dropped completely**. Also, to support the effort of [ending the IE11 life cycle, scheduled on **June 15, 2022**](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Internet%20Explorer%2011-,Is%20Internet%20Explorer%2011%20the%20last%20version%20of%20Internet%20Explorer,systems%20starting%20June%2015%2C%202022.).

So, please consider this before upgrading to any of the 3.x.x version going forward.

-   Supports **IE11+ (Win8) and all modern browsers**.

-   **No dependencies**, since it is written in Typescript.

-   Runs a simple but yet powerful algorithm to **check the browser's autoplay capabilities** across browsers.

-   Supports for **local and remote captions** for **both video and audio**, even without including the `crossorigin` attribute.

-   **Enhance your player** adding your own buttons. Check [here](./docs/customize.md) for more details.

-   Provides the ability to use a **single VAST/VPAID** source or a **VAST/VPAID playlist** from several different sources (including URLs and valid XML strings).

-   **Can play ads in infinite loop**, desired for ads that are in a heavy text page.

-   Always **responsive** by default, for both video/audio tags; for video, **`fill`** and **`fit`** modes are available to either scale and crop media relative to its parent container, or to attempt to make the media fit its parent container (including black bars), respectively.

|                                                                                                                                                  |                                                                                                                                                                               |                                                                                                                                                      |

| ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |

| [![MedSims](https://img.medscapestatic.com/pi/global/icons/icon-medsims-logo@2x.png)](https://www.medscape.org/simulation)                       | [![Arrow Classic Rock](https://player.arrow.nl/tmp/images/logo.1507670326.jpg)](https://player.arrow.nl/ad.html)                                                              | [![Geração Rádios](https://user-images.githubusercontent.com/910829/168053773-8871dcf9-1f3a-4487-9f6d-95d4d461d945.png)](https://geracaoradios.com)  |

| [![LectureTube](https://live.video.tuwien.ac.at/room/assets/lecturetube_landscape.svg)](https://live.video.tuwien.ac.at/room/heart0/player.html) | [Servicio Online](https://40152354.servicio-online.net//INDEX.html)                                                                                                           | [![HitRadio Center](https://user-images.githubusercontent.com/910829/155380459-76856a41-5a19-4831-8ef8-6d0ae8d471f0.svg)](https://radiocenter.si)    |

| [![Rock Radio](https://user-images.githubusercontent.com/910829/155380461-9c74ff57-50a2-419c-b85a-dad8810b42c6.svg)](https://rockradio.si)       | [![Chichester District Council](https://www.chichester.gov.uk/chichesterdotnet/images/cdclogo.jpg)](https://chichester.moderngov.co.uk/ieListDocuments.aspx?CId=134&MId=1620) | [![Clippa](https://user-images.githubusercontent.com/910829/181409803-c9f25333-7c40-48fb-b54f-42f7e6f6537a.svg)](https://www.clippa.tv/bigKnightOut) |

## Migrating from older version to new ones

To learn more details about how to migrate from 1.x.x version to 2.x.x, or any breaking changes in newer versions, visit the [Migration document](./migration.md).

The standard template to start using OpenPlayerJS is show in the following snippet.

            // Check the `API and events` link below for more options

            const player = new OpenPlayerJS('player');

If you want to unleash the power of OpenPlayerJS, learn more about OpenPlayerJS by checking the following links.

-   [How to use OpenPlayerJS](./docs/usage.md)

-   [Javascript](./docs/usage.md#javascript)

    -   [About the `levels` control](./docs/usage.md#about-the-levels-control)

    -   [About the usage of third-party libraries](./docs/usage.md#about-the-usage-of-third-party-libraries)

-   [React/Next.js](./docs/usage.md#reactnextjs)

    -   [Keyboard Shortcuts](./docs/api.md#keyboard-shortcuts)

-   [NEW! Player Customizations](./docs/customize.md)

    -   [Modify Look](./docs/customize.md#modify-look)

    -   [Add Control](./docs/customize.md#add-control)

    -   [Add External Player API](./docs/customize.md#add-external-player-api)

If you need a reference on how to use OpenPlayerJS in some of the most common scenarios, check the following links:

-   [No configuration (only DOM classes)](https://codepen.io/rafa8626/pen/WaNxNB)

-   [Minimal configuration](https://codepen.io/rafa8626/pen/BqazxX)

-   [Using `fill` mode](https://codepen.io/rafa8626/pen/xxZXQoO)

-   [Using `fit` mode](https://codepen.io/rafa8626/pen/abmboKV)

-   [Using Ads (linear and non-linear samples)](https://codepen.io/rafa8626/pen/vVYKav)

-   [Removing controls and using `preload="none"`](https://codepen.io/rafa8626/pen/OJyMwxX)

-   [Using `Levels` and setting width/height](https://codepen.io/rafa8626/pen/ExxXvZx)

-   [Use FLV source (only modern browsers and Android, not iOS)](https://codepen.io/rafa8626/pen/QWEZPaZ)

-   [OpenPlayerJS with React](https://codepen.io/rafa8626/pen/GRrVLMB)

-   [OpenPlayerJS with Next.js](https://codesandbox.io/s/vigorous-almeida-71gln)

-   [OpenPlayerJS with Vue.js](https://codepen.io/rafa8626/pen/JjWPLeo)

-   [YouTube video (using plugin)](https://codepen.io/rafa8626/pen/wvvOYpg)

-   [Using hls.js p2p plugin](https://codepen.io/rafa8626/pen/PoPLMxo)

-   [Add source after initialization](https://codepen.io/rafa8626/pen/YzzgJrK)

-   [Playing HLS streaming with DRM (Encryption)](https://codepen.io/rafa8626/pen/QZWEVy)

-   [M(PEG)-DASH with Ads](https://codepen.io/rafa8626/pen/Xxjmra)

-   [Ads playlist (multiple URLs)](https://codepen.io/rafa8626/pen/wvvxbMN)

-   [🆕 - Add a custom element (watermark)](https://codepen.io/rafa8626/pen/JjLQNjo)

-   [Updating source and Ads for dynamic content loading](https://codepen.io/rafa8626/pen/gORJWVz)

-   [Updating Ads and clickable Ad element](https://codepen.io/rafa8626/pen/OJmEzXw)

-   [Trigger Ad manually](https://codepen.io/rafa8626/pen/abZNgoY)

-   [Fully customized audio player](https://codepen.io/rafa8626/pen/ExPLVRE)

-   [Basic playlist (video and audio)](https://codepen.io/rafa8626/pen/GRREQpX)

		@@ -224,2 +224,3 @@ # Usage
		import OpenPlayerJS from 'openplayerjs';
		import 'openplayerjs/dist/openplayer.css'

		@@ -239,2 +240,3 @@ export default function Sample() {
		);
		}
		```
		@@ -241,0 +243,0 @@

		{
		"name": "openplayerjs",
		"version": "2.13.0",
		"version": "2.13.1",
		"homepage": "https://www.openplayerjs.com/",
		@@ -104,3 +104,3 @@ "author": {
		"standard-version": "^9.5.0",
		"stylelint": "^14.8.5",
		"stylelint": "^15.10.1",
		"stylelint-order": "^5.0.0",
		@@ -107,0 +107,0 @@ "terser-webpack-plugin": "^5.3.3",

		@@ -14,16 +14,7 @@ # [OpenPlayer.js](https://www.openplayerjs.com)

		Version 3.0 of this player just started to being worked on.
		This repository is in maintenance at this point.

		As part of a continuous effort to improve the player, this new version will include, among others:
		No new features or addition will be added, only bugfixes.

		- An increased unit test coverage (aiming to have at least `70%`), including unit tests for all the demos.
		- Refactor of areas of code where creation of buttons for controls occurs, into a consolidated method to generate them.
		- Refactor of the main operations (`load`, `loadAd`, `play`, `pause`) to use Promises in a more clear fashion, and with that, execute more complex operations consistently, specially when dealing with loading dynamic content.
		- Better snippets/documentation to help users to configure OpenPlayerJS for their needs.
		- And more...

		Because of the refactor that will be performed in that version, support for IE11 will be dropped completely. Also, to support the effort of [ending the IE11 life cycle, scheduled on June 15, 2022](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Internet%20Explorer%2011-,Is%20Internet%20Explorer%2011%20the%20last%20version%20of%20Internet%20Explorer,systems%20starting%20June%2015%2C%202022.).

		So, please consider this before upgrading to any of the 3.x.x version going forward.

		## Advantages
		@@ -30,0 +21,0 @@

Worsened metrics