Wistia video upload and play components for AngularJS
npm install ng-wistia-components
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.
Install via npm:
npm install ng-wistia-components
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.
To upload videos to Wistia, simply use the following setup:
Choose a video.
The below implementation will do everything as the above, and also play the video that you just uploaded:
Choose a video.
The below implementation will do everything as the above, and also show the a progress bar indicating the upload progress:
Choose a video.
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:
Choose a video that you wish to upload to Wistia. The upload will begin automatically.
Upload a Video
Your uploaded video has been embedded below. The playback should start automatically.
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):
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
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.
* jQuery v. 1.6+
* blueimp-file-upload v. 9+