Video Players Compared
YouTube player
Vimeo-hosted / Vimeo's player
HTML5 Default Player
This is an example of the default HTML5 video player which is now recognized by most web browsers. It is shipped with a few parameters such as autoplay (true|false), not much more.
video.js - version 6.2.6
From www.video.js.com: Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video.
video.js - default player
- Background image derived preloaded from video frame
- Big play button default location top left
video.js -custom v1
- Big play button default location
- Big play button converted to red and round
- Background image derived and preloaded from video ifirst video frame
- Inactivity timeout set to 2 seconds
video.js -customized
- Big play button default styled relocated to center
- Custom background image grabbed from frame 120 (as .jpg)
- Control bar height reduced from 3em to 2em
- Inactivity timeout set to 10 seconds
Display the video in a pop-up lightbox
Benefits include the ability to display videos in wall gallery style, great control over titles and description.
Vimeo video with custom aspect ratio (2/1)
Display close button on top of the video; custom start time
Hidden HTML5 video element
Shell script to auto-generate poster images
# Requires that ImageMagick (with identify) and mediainfo be installed
file="your_video.mp4"
frame=120
base=`echo $file | cut -f1 -d'.'`
\rm -f $output
input="$base.mp4"
output="$base.jpg"
width=`mediainfo $input | grep Width | cut -f2 -d":" | awk '{print }'`
height=`mediainfo $input | grep Height | cut -f2 -d":" | awk '{print }'`
dimensions="${width}x${height}"
ffmpeg -y -ss $frame -i $input -s $dimensions -frames:v 1 $output
identify $output
Contact
Dotted i Web Design & SolutionsP: 303-926-0167
167 Montgomery Dr.
Erie, CO 80516
Contact by webform
