Web Development with jQuery®

Customizing Player Controls

As previously discussed, the MediaElement plugin provides many confi guration options. The

features option customizes which controls display to the user.

features: ['playpause', 'current', 'progress', 'duration', 'volume',

'fullscreen']

Most of the available controls or features are self-explanatory, with the preceding code indicating a

play/pause button and displaying the current position, progress bar, video length, volume control,

and full-screen button, respectively.

Following are common options that can be provided in the features array:

➤ (^) playpause—A control button to play or pause the media, switching its icon to appropriate
action for the media’s state.
➤ (^) current—A display of the media’s current position, in typical HH:MM:SS format.
➤ (^) progressbar—A fi lled bar control to display the current position of the media against its
duration.
➤ (^) duration—A display of the media’s length, in typical HH:MM:SS format.
➤ (^) volume—A control button with an integrated slider for setting the volume.
➤ (^) tracks—A control button to toggle display of captions or subtitles specifi ed by
elements inside the

Controlling When the Download of Media Begins

A few concerns should factor into the decision for when your media content should download (or

buffer) within the user’s browser; among them are the size of the video and the expected probability

http://www.it-ebooks.info