Commit 508df94d authored by Aral Balkan's avatar Aral Balkan

Added a demo script that runs a web server and opens up the demonstration...

Added a demo script that runs a web server and opens up the demonstration video in the browser automatically to help people get started quicker. Updated the readme to reflect this.
parent 9e42ee03
# Responsive Accessible HTML5 Video Player
## by Ind.ie, based on work by the PayPal Accessibility Team
See the [Authors](#authors) section below for details.
## What is it?
A lightweight responsive HTML5 video player which includes support for captions and screen reader accessibility.
## Getting started
If you’re on a Mac or Linux-based system:
1. [Clone the Git repository.](https://source.ind.ie/project/video-player)
2. Run ```./demo```
_(On other platforms, or if the demo script doesn’t run because Python is not installed, start a web server with the project folder as root and open it up in a browser.)_
## Features
- Provides a responsive HTML5 video player with custom controls.
- Supports captions; simply denote a VTT caption file using the standard HTML5 video syntax.
- Uses native HTML5 form controls for volume (range input) and progress indication (progress element).
......@@ -20,6 +32,7 @@ A lightweight responsive HTML5 video player which includes support for captions
## Implementation
### Preparing your videos
For the videos to work across as many browsers as possible, you’ll need at least the following formats:
- .mp4
- .webm
......@@ -28,12 +41,15 @@ For the videos to work across as many browsers as possible, you’ll need at lea
To convert videos into these formats, I recommend the [Miro Video Converter](http://www.mirovideoconverter.com) or [Handbrake](https://handbrake.fr). After converting, check the audio and picture for the videos are working correctly. Sometimes conversions can result in a loss of picture, or strange green picture. If this happens, converting again can solve the problem.
#### HTTP Live Streaming
Apple has an [HTTP Live Streaming format](https://developer.apple.com/streaming/). For this you’ll need to add the source as a .m3u8 file with the `application/x-mpegURL` source type.
### Preparing your captions
I wrote a [blog post about how I created captions for our Spyware 2.0 video](https://ind.ie/about/blog/accessible-video-player). A couple of recommended caption timestamping tools are [Subtitle Horse](http://www.subtitle-horse.com/) and [Jubler](http://www.jubler.org/). This [caption format converter](http://www.3playmedia.com/services-features/tools/captions-format-converter/) can convert different caption file formats to the required .vtt (Web VTT) format.
### CSS and Image
Insert the CSS in the Head of your HTML document. You'll also need to upload the sprite images (or use your own) and adjust the path in the CSS file.
```html
......
######################################################################
#
# Little demo server script.
#
# Copyright © 2015 Aral Balkan. Released under the MIT License.
#
# Run a simple Python-based web server to show the demo.
#
######################################################################
# Make errors abort the script so they don’t cascade.
set -e
#
# Check if we were asked to stop the server.
#
while getopts ":s" opt; do
case $opt in
s)
printf "Stopping the demo server… " >&2
demoServerPID=$(pgrep -f 4200)
if [ ! -z "$demoServerPID" ]; then
kill $demoServerPID >&2
printf "done.\n"
else
printf "Demo server wasn’t running.\n"
fi
exit
;;
\?)
echo "Invalid option: -$OPTARG" >&2
;;
esac
done
#
# Start the demo server.
#
echo "Starting Universal Video Player demo at http://localhost:4200…\n"
python -m SimpleHTTPServer 4200 >&2 &
# Give the server time to come up.
sleep 1
# Open the demo in the browser.
open http://localhost:4200 >&2
#
# Let the user know how to shut the server off.
#
echo "╔══════════════════════════════════════════════════════════════════╗"
echo "║ Type ./demo -s <enter> at any time to stop the web server. ║"
echo "╚══════════════════════════════════════════════════════════════════╝"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment