Negatory. Postpone Mission.
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@articulate/orson

1.2.4 • Public • Published

Orson NSP Status

An Articulate flavored React component video player.

Install

npm install @articulate/orson

Usage

Import the stylesheets

<link rel="stylesheet" src="/path/to/videojs.css" />
<link rel="stylesheet" src="node_modules/@articulate/orson/dist/VideoPlayer.css" />

or, if using webpack and sass-loader on your project

@import "~@articulate/orson/lib/index.webpack";

Import VideoPlayer into your component.

import VideoPlayer from '@articulate/orson';
 
<VideoPlayer>
  <source src="__path_to_mp4__" type="video/mp4" />
  <source src="__path_to_format__" type="video/format" />
  <p>
    Custom Error Message
  </p>
</VideoPlayer>

API

Props

  • aspectRatio (number, default: 9/16) Desired ratio between width and height.
  • fullWidthAt (number) Specifies a screen breakpoint under which the player will try to use the entire width of the parent.
  • options (object) Options passed to video.js (see reference)

Methods

You'll need to capture a ref to the VideoPlayer instance for this.

  • .setDimensions() calculates and sets the ideal dimensions for the video player.
  • .snapshot() creates a base64 image of the video in png.

Properties

You'll need to capture a ref to the VideoPlayer instance for this.

Upgrading to 1.0.

The following steps need to be performed if using a version pre-1.0

  1. Remove webpack configuration for this plugin. This plugin used to require setting up exceptions in webpack's config loaders section, which is no longer needed.
  2. Import the CSS. Previously, stylesheets would be imported automatically with sass-loader. That's no longer the case.
  3. Change imports from import VideoPlayer from '@articulate/orson/lib/VideoPlayer' to import VideoPlayer from '@articulate/orson'

install

npm i @articulate/orson

Downloadsweekly downloads

331

version

1.2.4

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability