Add controls to pan and zoom HTML5 video.
Buttons: (from left to right)
[0] Reset pan & zoom settings.
[Left Arrow] Pan video to the left by 8 pixels.
[Up Arrow] Pan video to upward by 8 pixels.
[Down Arrow] Pan video to downward by 8 pixels.
[Right Arrow] Pan video to the right by 8 pixels.
[Bottom-Left Arrow] Shrink video by 0.01% (shrink width and height; preserving aspect ratio).
[Top-Right Arrow] Zoom video by 0.01% (expand width and height; preserving aspect ratio).
[Left Double-Arrows] Shrink video width by 0.01% (distort image).
[Right Double-Arrows] Expand video width by 0.01% (distort image).
[Down Double-Arrows] Shrink video height by 0.01% (distort image).
[Up Double-Arrows] Expand video height by 0.01% (distort image).
[P] Show/hide profile panel.
Notes:
Pan & zoom settings for fullscreen and normal video viewing mode are different. e.g. settings which was configured for normal video viewing mode won't give the same result when used for fullscreen viewing mode. Suggestions on how to correct this are welcomed.
Some of the button labels are arrow symbol Unicode characters. They requires a font that have those Unicode characters.
Tested on Firefox only.
