Html5 Video player with custom js/html/css controls and flash fallback

This player uses an event interface between the ui controls and the chosen video playback strategy, so that the same controls are used whether the browser is utilizing the html5 video tag, or the flash plugin.

Because the controller is a separate component from the video frame, it can be skinned without modifying any flash files or changing any javascript files.

Loading the examples in safari will utilize the html5 video tag, while using firefox or IE will utilize the flash plugin.

Note that the only difference between all these examples is the CSS stylesheet and the parameters passed into the controller instantiation. The same javascript class is used in each.

fig 1. The full set of available controls includes step buttons, time remaining, time elapsed, and a volume control slider. View example

<div id="player" class="ap-player"></div> <div id="controller" class="ap-controller"></div> <script> var playerEvents = aFrame.event(); var controller = AP_CONTROLLER.create({ id : 'controller', events : playerEvents, controls : [ 'StepBackward', 'PlayPause', 'StepForward', 'Time', 'Progress', 'TimeRemain', 'Volume', 'Fullscreen' ], width : 380 }); var player = AP_PLAYER.create({ id : 'player', events : playerEvents }); </script>

fig 2. A different skin for the controller. View example

fig 3. Control elements can be rendered in any combination and order. View example

fig 4. As simple as it gets, just a play-pause button View example

View Adam Portilla's portfolio website