Thursday, 24 September 2015

Keyboard shortcuts and mouse functions for HTML 5 video

This time I was playing with HTML 5 video tag, but there are no keyboard shortcuts out of the box.
So I implemented a simple jQuery plugin.
Please find the link below:
https://github.com/ConsciousObserver/Html5VideoShortCutPlugin/blob/master/public/js/plugin/Html5VideoShortCutPlugin.js

I have implemented a few shortcuts which I use in VLC media player. Code can be easily extended without much fuss.
As of now following options are supported:

  1. Play/pause (spacebar and mouse click)
  2. Video navigation (10 seconds, 25 seconds, 40 seconds, left right arrows with ctrl or shift)
  3. Volume control (up and down arrows)
  4. Fast forward (+ key)
  5. Slow down (- key)
  6. Screenshot (shift + e)
Usage details can be found below:
https://github.com/ConsciousObserver/Html5VideoShortCutPlugin

Following is a working example:

Due to blogger trapping many events some shortcuts may not work here as expected, however you can use 'f' or press 'enter' to enter fullscreen mode. After that all shortcuts should work.

No comments:

Post a Comment