Wistia uploading and playing components for AngularJS

Angular components that allow you to upload and play videos via Wistia. There are separate components to upload a video, show upload progress, show error messages and play an uploaded video. The multi-components architecture will support whatever fancy structure you are building.

Uploading works via blueimp-file-upload.

Get Started

Install via npm:

npm install ng-wistia-components

Usage

Every implementation begins with a parent component ng-wistia. Then, to customize your experience, you can choose among other child components: ng-wistia-input, ng-wistia-progress, ng-wistia-error, ng-wistia-video.

$3

To upload videos to Wistia, simply use the following setup:

Choose a video.

$3

The below implementation will do everything as the above, and also play the video that you just uploaded:

Choose a video.

$3

The below implementation will do everything as the above, and also show the a progress bar indicating the upload progress:

Choose a video.

$3

The below implementation will prompt the user to upload a video, and once uploaded, will change the UI to show a player. This is achieved via ng-wistia-video's on-play attribute:

$3

Using the video-id attribute of ng-wistia-video, any independent video can be played directly. Note that video-id is the hashed_id of a video on Wistia (e.g. 1iuyx2yvow):

Example Included

An example of a simple AngularJS app has been included. To run the example, follow these steps:

Step 1: Clone this repository

git clone https://github.com/ritenv/ng-wistia-components.git

Step 2: Navigate to the example directory

Step 3: Run with npm

npm start

Step 4: Add your Wistia API Password in example/home/view.html

Step 5: Point your browser to http://localhost:8000

Testing

In order to test the components, simply install the devDependencies and run:

npm test

An HTML report of test cases will be generated at a new directory named karma_html.

Requirements

* jQuery v. 1.6+
* blueimp-file-upload v. 9+