npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@brightcove/react-player-loader

v1.5.0

Published

The official react component for the Brightcove Player

Downloads

260,639

Maintainers

sachin-brightcovesachin-brightcovealexey.kremsaalexey.kremsamelinda.darvasimelinda.darvasijose.luis.sanchezjose.luis.sanchezpedro-cruzpedro-cruzgabor.kiacz.brightcovegabor.kiacz.brightcoveadambertalanbcadambertalanbcmiklospocsaji_bcmiklospocsaji_bcmaraizamaraizaskarukamannaskarukamannaaviel_resnickaviel_resnicknorma.gonzaleznorma.gonzalezjvaldez1jvaldez1fsalazarbcfsalazarbccognatusbgscognatusbgsmbalasubramaniammbalasubramaniamssahssahdgonzalez89dgonzalez89areis10areis10vmnavarrovmnavarroalfredo-reyesalfredo-reyesjterranovajterranovajfloresbcjfloresbcmlopez.bmlopez.bttabrilla-bcttabrilla-bcmsivallsmsivallssstevanussstevanusrwbarber2rwbarber2rwingerrwingerbcc-bfranklinbcc-bfranklinapenigalapatiapenigalapatilmaultsbylmaultsbysravan.pbrsravan.pbrijunaidfijunaidfmgoncalvesmgoncalvesmfregozomfregozoareveloarevelomadhu_gmadhu_ghugocjimhugocjimdaniel_camposdaniel_camposkevin.schickkevin.schickm.morrisonm.morrisonuomaruomarabarstowbcabarstowbcsbarathansbarathankpandiyarajankpandiyarajanimoronesimoroneswalterseymourbcwalterseymourbcddashkevichddashkevichalbertogomezalbertogomezgestrada-brgestrada-bramillerbrightcoveamillerbrightcovelvohralvohramcho-bcmcho-bcawaldronawaldrondawnpackodawnpackoldominguezldominguezbc-srimron-soutterbc-srimron-soutterrsilva_brightcoversilva_brightcovejoeyleshjoeyleshlmelchorx1lmelchorx1juan-sanchezjuan-sanchezeolveraeolveracloewer_bccloewer_bccarredondocarredondobrianhsubrianhsuniklagbrightcoveniklagbrightcovetsraveling_bctsraveling_bcbcbcliffordbcbcliffordbc-acgarciabc-acgarciaadavila1adavila1kreynoldskreynoldsbgs-devopsbgs-devopsalbinjohnsonalbinjohnsonrtezerartezerabcmneilbcmneilrandresfrandresfv.kozlov_bcv.kozlov_bcnagendra_mnagendra_mmichaelmccarthybcmichaelmccarthybcponeill-bcovponeill-bcovmdeltorobcovmdeltorobcovjmohneycovejmohneycoveinbc01inbc01aperezbrightcoveaperezbrightcoveireyes94ireyes94brightcove-adminbrightcove-admintedktedkabradley-brightcoveabradley-brightcovebc-alivebc-alivelasanchezclasanchezcmarguinbcmarguinbcbrightcove-userbrightcove-userkmasonkmasoncbarstowcbarstowhikehhikehmyerramallamyerramallapdiaspdiasjwhisenantjwhisenantebertaudebertauddsalnikovdsalnikovsharanya.muruganandamsharanya.muruganandamxgarcia_npmxgarcia_npmjguerrajguerrarjunerjunejonbwalshjonbwalshkhaiphamkhaiphamwswanbeckwswanbeckgastafurovgastafurovadalwaniadalwaniekelson-bcoveekelson-bcovesysengsysengmcarreiromcarreirohwoodburyhwoodburyjblakerjblakerbcmauleonbcmauleonpaco_oblea_bcpaco_oblea_bcjsepulvedajsepulvedabiswaranjanbiswaranjanbarroyobarroyobmartinezbmartinezbc-jcarlsonbc-jcarlsoneledezmaeledezmajcuetojcuetoerodrigueserodriguespsousapsousamarcogaraymarcogarayjavibrightjavibrightbcpsalasbcpsalasetobinetobinackbabeackbabeomartinezomartinezmgonzalez_bcmgonzalez_bcpdohertybcovpdohertybcovmuthukumar.bcmuthukumar.bcbzizmondbzizmondjmpmacedojmpmacedoscorreiascorreialescorciolescorciocavieiracavieiraarunjeyaprasadarunjeyaprasadbvilvanathanbvilvanathananand.gangadharananand.gangadharanrociosantosrociosantosagarciabcovagarciabcovattinderattinderlauralopezlauralopezskumar85skumar85hrodriguez2hrodriguez2jasilvaantoniojasilvaantoniopalvarezbcpalvarezbcericramosericramoscarlosabajocarlosabajoingrid.s.cruzingrid.s.cruzluis_fernando_lopez_ruizluis_fernando_lopez_ruizvishal64vishal64tresa.bajitresa.bajiluis.garcia.brightcoveluis.garcia.brightcoverodrigofdzrodrigofdzpgutierrezgilpgutierrezgilharish17harish17jjeyaprakashjjeyaprakashrrajendran1698rrajendran1698jlomelijlomelisjimenezsjimenezrwenger_brightcoverwenger_brightcoverujordanrujordanstuartmhstuartmhjherrerabcovjherrerabcovmshiwalmshiwalptamizhptamizhakamalakkannanakamalakkannanroman-bcroman-bctnwannatnwannabsahlas.npmbsahlas.npmdherrera1109dherrera1109hswaminathanhswaminathanechengbcechengbcsbarrettbcsbarrettbc

Readme

@brightcove/react-player-loader

Build Status Greenkeeper badge

NPM

A React component to load a Brightcove Player in the browser.

Brightcove Player Support

This library has the same support characteristics as the Brightcove Player Loader.

Table of Contents

Installation

No matter how you use this component, the only place it is available is npm.

npm install --save @brightcove/react-player-loader

Standard Usage with JSX

Most React applications are using JSX and the toolchain provided by create-react-app.

After installing, import the module and use the ReactPlayerLoader component like any other component in your React application:

NOTE: React/ReactDOM are NOT required, they are only used here to show a complete working example!

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader from '@brightcove/react-player-loader';

let reactPlayerLoader;
const onSuccess = function(success) {

  // The player object or iframe element (depending on embed type) can be
  // accessed in two ways.
  // 
  // From the success object passed to the `onSuccess` callback:
  console.log(success.ref);

  // As a property of the component instance:
  console.log(reactPlayerLoader.player);
};

reactPlayerLoader = ReactDOM.render(
  <ReactPlayerLoader accountId='1234678' onSuccess={onSuccess}/>,
  document.getElementById('fixture')
);

See Alternate Usage below for less common ways to use this component.

Props

attrs

Type: Object

Provides attributes (props) to the component element.

For example, you may want to customize the className of the component (by default, "brightcove-react-player-loader") by setting props on the component like so:

<ReactPlayerLoader attrs={{className: 'my-custom-class'}} />

baseUrl

Type: string

Used to override the base URL for the Brightcove Player being embedded.

Most users will never need this prop. By default, players are loaded from Brightcove's player CDN (players.brightcove.net).

manualReloadFromPropChanges

Type: boolean

Used to specify if reloading the player after prop changes will be handled manually. This can be done by calling refToReactPlayerLoader.loadPlayer().

See Effects of Prop Changes below for the effects of prop changes.

Other Props

All props not specified above are passed to the Brightcove Player Loader with a few differences:

  1. We cannot expose the Player Loader promise easily, so you must use the onSuccess and onFailure callbacks.
  2. If you don't provide an onFailure callback, the failure will be handled by throwing an error.
  3. We need to use refNode and refNodeInsert internally, so those props will be ignored.

Effects of Prop Changes

When a prop passed to this component changes, it will have one of two effects:

  1. Dispose/reload the player. This is the most common case.
  2. Update the player's state (e.g. fetch a new video).

The following props will update the player's state without a reload:

  • catalogSearch
  • catalogSequence
  • playlistId
  • playlistVideoId
  • videoId

All other prop changes, excluding props that are function's, will cause a complete dispose/reload.

View the Demo

This repository includes a barebones demo/example page.

  1. Clone the repository
  2. Move into the repository
  3. Run npm install
  4. Run npm start
  5. Navigate to http://localhost:9999 in a browser

Alternate Usage

ES Module (without JSX)

After installation, import the module in your JavaScript and use the ReactPlayerLoader component like any other component in your React application:

NOTE: React/ReactDOM are NOT required, they are only used here to show a complete working example!

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader  from '@brightcove/react-player-loader';

const reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

CommonJS

After installation, require the module in your JavaScript and use the ReactPlayerLoader component like any other component in your React application:

NOTE: React/ReactDOM are NOT required, they are only used here to show a complete working example!

var React = require('react');
var ReactDOM = require('react-dom');
var ReactPlayerLoader = require('@brightcove/react-player-loader');

var reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess: function(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

<script> Tag

This case is extremely unlikely to be used.

After installation or loading from a CDN, use a script tag to include the module in your HTML and use the global window.BrightcoveReactPlayerLoader to construct the component.

<div id="fixture"></div>
<script src="//path/to/react.min.js"></script>
<script src="//path/to/react-dom.min.js"></script>
<script src="//path/to/brightcove-react-player-loader.min.js"></script>
<script>
  var React = window.React;
  var ReactDOM = window.ReactDOM;

  var reactPlayerLoader = ReactDOM.render(
    React.createElement(window.BrightcoveReactPlayerLoader, {
      accountId: '1234678',
      onSuccess: function(success) {
        // two ways to get the underlying player/iframe at this point.
        console.log(success.ref)
        console.log(reactPlayerLoader.player);
      }
    }),
    document.getElementById('fixture')
  );
</script>