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.

Upload Video

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

<ng-wistia api-password="************">
  <p>Choose a video.</p>

  <!-- action button for selecting a video to upload -->
  <ng-wistia-input></ng-wistia-input>

  <!-- any error messages from wistia's API Will be shown below -->
  <ng-wistia-error></ng-wistia-error>
</ng-wistia>

Upload and Play Video

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

<ng-wistia api-password="************">
  <p>Choose a video.</p>

  <!-- action button for selecting a video to upload -->
  <ng-wistia-input></ng-wistia-input>

  <!-- any error messages from wistia's API Will be shown below -->
  <ng-wistia-error></ng-wistia-error>

  <!-- uploaded video will play automatically -->
  <ng-wistia-video></ng-wistia-video>
</ng-wistia>

Upload, show upload progress, and Play Video

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

<ng-wistia api-password="************">
  <p>Choose a video.</p>

  <!-- action button for selecting a video to upload -->
  <ng-wistia-input></ng-wistia-input>

  <!-- any error messages from wistia's API Will be shown below -->
  <ng-wistia-error></ng-wistia-error>

  <!-- upload progress -->
  <ng-wistia-progress></ng-wistia-progress>

  <!-- uploaded video will play automatically -->
  <ng-wistia-video></ng-wistia-video>
</ng-wistia>

Custom Implementation of Upload and Play

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:

<ng-wistia api-password="************">
  <div ng-if="!videoPlaying">
    <h1>Upload a Video</h1>
    <p>Choose a video that you wish to upload to Wistia. The upload will begin automatically.</p>
    <ng-wistia-input></ng-wistia-input>
    <ng-wistia-error></ng-wistia-error>
    <ng-wistia-progress></ng-wistia-progress>
  </div>

  <div ng-if="videoPlaying">
    <h1>Playing your Video</h1>
    <p>Your uploaded video has been embedded below. The playback should start automatically.</p>
  </div>
  
  <!-- when video starts playing, we remove the upload, error, and progress components -->
  <ng-wistia-video on-play="videoPlaying = true"></ng-wistia-video>

</ng-wistia>

Independent Video Player

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):

<ng-wistia api-password="************">
  <ng-wistia-video style="width: 100%; height: 400px; display: block;" video-id="*****"></ng-wistia-video>
</ng-wistia>

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

<ng-wistia api-password="<Your Wistia API Password Here">

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+