文件列表:

.babelrc (79, 2018-02-26)
.eslintignore (26, 2018-02-26)
.eslintrc (33, 2018-02-26)
.npmignore (43, 2018-02-26)
.travis.yml (33, 2018-02-26)
package.json (1998, 2018-02-26)
src (0, 2018-02-26)
src\create-event-handlers (0, 2018-02-26)
src\create-event-handlers\index.js (654, 2018-02-26)
src\create-event-handlers\on-ad-play.js (222, 2018-02-26)
src\create-event-handlers\on-before-play.js (275, 2018-02-26)
src\create-event-handlers\on-full-screen.js (185, 2018-02-26)
src\create-event-handlers\on-mute.js (148, 2018-02-26)
src\create-event-handlers\on-play.js (375, 2018-02-26)
src\create-event-handlers\on-time.js (1386, 2018-02-26)
src\create-event-handlers\on-video-load.js (136, 2018-02-26)
src\default-props.js (817, 2018-02-26)
src\helpers (0, 2018-02-26)
src\helpers\get-curried-on-load.js (252, 2018-02-26)
src\helpers\get-event-name-from-prop.js (318, 2018-02-26)
src\helpers\get-player-opts.js (991, 2018-02-26)
src\helpers\initialize.js (1131, 2018-02-26)
src\helpers\install-player-script.js (343, 2018-02-26)
src\helpers\remove-jw-player-instance.js (202, 2018-02-26)
src\helpers\set-jw-player-defaults.js (427, 2018-02-26)
src\helpers\should-component-update.js (276, 2018-02-26)
src\player-prop-types.js (1432, 2018-02-26)
src\react-jw-player.jsx (3030, 2018-02-26)
test (0, 2018-02-26)
test\get-curried-on-load.test.js (694, 2018-02-26)
test\get-event-name-from-prop.test.js (798, 2018-02-26)
test\get-player-opts.test.js (4421, 2018-02-26)
test\helpers (0, 2018-02-26)
test\helpers\mock-component.js (262, 2018-02-26)
test\initialize.test.js (4356, 2018-02-26)
test\install-player-script.test.js (1529, 2018-02-26)
test\on-ad-play.test.js (1675, 2018-02-26)
... ...

# react-jw-player :movie_camera: [](https://travis-ci.com/micnews/react-jw-player) `` is a React Component for initializing client-side instances of JW Player. Simply give `` the id of your player script, and the id of a JW Player video or playlist. The component comes with several event hooks that can be accessed through component props. ## Contents * [Installation](#installation) * [Usage](#usage) * Props * [Required Props](#required-props) * Optional Props * [Configuration](#optional-configuration-props) * [Event Hooks](#event-hooks) * [Advertising](#optional-advertising-event-hook-props) * [Player Events](#optional-player-event-hook-props) * [Time Events](#optional-time-event-hook-props) * [Example Container Component](#example-container-component) * [Contributing](#contributing) ## Installation ```shell npm install react-jw-player ``` ## Usage At the mininum, you can just use something like the three following code snippets: ### Playing a JW Player JSON Playlist ``` javascript import React from 'react'; import ReactDOM from 'react-dom'; import ReactJWPlayer from 'react-jw-player'; ReactDOM.render( , document.getElementById('my-root-div'); ); ``` ### Playing a custom Playlist ``` javascript import React from 'react'; import ReactDOM from 'react-dom'; import ReactJWPlayer from 'react-jw-player'; const playlist = [{ file: 'https://link-to-my-video.mp4', image: 'https://link-to-my-poster.jpg', tracks: [{ file: 'https://link-to-subtitles.vtt', label: 'English', kind: 'captions', 'default': true }], }, { file: 'https://link-to-my-other-video.mp4', image: 'https://link-to-my-other-poster.jpg', }]; ReactDOM.render( , document.getElementById('my-root-div'); ); ``` ### Playing a Specific File ``` javascript import React from 'react'; import ReactDOM from 'react-dom'; import ReactJWPlayer from 'react-jw-player'; ReactDOM.render( , document.getElementById('my-root-div'); ); ``` For more complex interaction, check out the container component example [here](#example-container-component) To generate preroll, supply the player with the `generatePrerollUrl` prop. This prop just needs to be a function that returns a valid VAST tag! See (Optional Configuration Props)[#optional-configuration-props] for more info. ## Required Props These are props that modify the basic behavior of the component. * `playerId` * A unique Id for the player instance. Used to distinguish the container divs. * Type: `string` * Example: `playerId="my-jw-player-instance"` * `playerScript` * Link to a valid JW Player script. * Type: `string` * Example: `https://content.jwplatform.com/libraries/abCD1234.js` * `playlist` OR `file` * Link to a valid JW Player playlist or video file, or playlist array. Cool tip: JW Player automatically generates JSON feeds for individual videos if you use the video id in place of `abCD1234`. You can use this to get meta data on the videos without loading an actual playlist. * Type: `string` (for `file` and `playlist`) or `array` (for `playlist`) * Example: `https//content.jwplatform.com/feeds/abCD1234.json` ## Optional Configuration Props * `aspectRatio` * An optional aspect ratio to give the video player. Can be 'inherit', `1:1` or `16:9` currently. * Defaults to 'inherit'. * `className` * An optional class name to give the container div. * Type: `string` * `customProps` * An optional object containing properties to be applied directly to the JW Player instance. Add anything in the API, like skins, into this object. `customProps={{ skin: { name: 'six' } }}`. * Type: `object` * `isAutoPlay` * Determines whether the player starts automatically or not. * Type: `boolean` * `isMuted` * Determines whether the player starts muted or not. * Type: `boolean` * `generatePrerollUrl(video)` * Supply a function that returns a VAST or GOOGIMA tag for use in generating a preroll advertisement. * Arguments: * `video` * This is a video object for the current item loaded in the player. You can use it to help generate your preroll tags. * `image` * URL to a poster image to display before playback starts * Type: `string` * `licenseKey` * License Key as supplied in the jwplayer dashboard, under: Players > Tools > Downloads > JW Player X (Self-Hosted) * Type: `string` * `useMultiplePlayerScripts` * EXPERIMENTAL - Allows you to load multiple player scripts and still load the proper configuration. Expect bugs, but report them! * Type: `boolean` # Event Hooks `react-jw-player` dynamically supports all events in JW Player. Simply preface the event name with `on` and pass it in as a prop. Examples: * `ready` => `onReady` * `setupError` => `onSetupError` `react-jw-player` has layered some different functionality on some of these events, so please check the docs below if you find any unexpected behavior! ## Optional Advertising Event Hook Props * `onAdPause(event)` * A function that is run when the user pauses the preroll advertisement. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onAdPlay(event)` * A function that is run once, when the preroll advertisement first starts to play. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onAdResume(event)` * A function that is run when the user resumes playing the preroll advertisement. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onAdSkipped(event)` * A function that is run when the user skips an advertisement. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onAdComplete(event)` * A function that is run when an ad has finished playing. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. ## Optional Player Event Hook Props * `onAutoStart(event)` * A function that is run once, when an autoplaying player starts to play a video. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onEnterFullScreen(event)` * A function that is run when the user fullscreens a video. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onError(event)` * A function that is run when the player errors. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onExitFullScreen(event)` * A function that is run when the user un-fullscreens a video. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onMute(event)` * A function that is run when the user mutes the player. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onPause(event)` * A function that is run when the user pauses the player during a video. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onPlay(event)` * A function that is run when a video first starts to play. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onReady(event)` * A function that is run once when the video player is ready. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onResume(event)` * A function that is run when the user plays a video after pausing it. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onSetupError(event)` * A function that is run when the player errors during setup. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onTime(event)` * A function that is run whenever the playback position gets updated. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onUnmute(event)` * A function that is run when the user unmutes the player. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onVideoLoad(event)` * A function that is run whenever a new video is loaded into the player. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. ## Optional Time Event Hook Props * `onThreeSeconds(event)` * A function that is run when the playhead reaches passed the 3 second mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onTenSeconds(event)` * A function that is run when the playhead reaches passed the 10 second mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onThirtySeconds(event)` * A function that is run when the playhead reaches passed the 30 second mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onTwentyFivePercent(event)` * A function that is run when the playhead reaches passed the 25% mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onFiftyPercent(event)` * A function that is run when the playhead reaches passed the 50% mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onSeventyFivePercent(event)` * A function that is run when the playhead reaches passed the 75% mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onNinetyFivePercent(event)` * A function that is run when the playhead reaches passed the 95% mark. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. * `onOneHundredPercent(event)` * A function that is run when the a video ends. * Type: `function` * Arguments: * `event` * This is the event object passed back from JW Player itself. ## Example Container Component ``` javascript import React from 'react'; import PropTypes from 'prop-types'; import ReactJWPlayer from 'react-jw-player'; const displayName = 'ReactJWPlayerContainer'; const propTypes = { playlist: PropTypes.string.isRequired, playerScript: PropTypes.string.isRequired }; class ReactJWPlayerContainer extends React.Component { constructor(props) { super(props); this.state = { videoTitle: '', }; this.onAdPlay = this.onAdPlay.bind(this); this.onReady = this.onReady.bind(this); this.onVideoLoad = this.onVideoLoad.bind(this); // each instance of needs a unique id. // we randomly generate it here and assign to the container instance. this.playerId = someFunctionToRandomlyGenerateId(); } onReady(event) { // interact with JW Player API here const player = window.jwplayer(this.playerId); } onAdPlay(event) { // track the ad play here } onVideoLoad(event) { this.setState({ videoTitle: event.item.description // this only works with json feeds! }); } render() { return (

{ this.state.videoTitle }

); } } ReactJWPlayerContainer.propTypes = propTypes; ReactJWPlayerContainer.defaultProps = defaultProps; ReactJWPlayerContainer.displayName = displayName; export default ReactJWPlayerContainer; ``` ## Contributing **Just do it!** 

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：