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 r###lt 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.