Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Media Player

This extension is the replacement for the <audio> and <video> html5 tags.
It is not only a beautifier, it also fixes issues across browsers and extends their functionality.
Designed to fit your design...

Some features:

- Customizable panel that fits every design.
- Multiple tracks (playlist).
- Autostart and loop modes.
- RWD/fluid support with proportional resize.
- Custom image and caption for each track.
- Default image for tracks.
- Own images set for the panel buttons.
- Multi-instance with optional synchronization.
- Smooth panel autohide mode with custom transparency.
- Custom track index ("1/5", "1 of 5", "Part 1 of 5", etc).
- Tint simulation levels for normal view and interaction mode.
- Proprietary events support for advanced integration.
- Keyboard support for better navigability and user experience.
- Crossbrowser/platform support with fallback.
- No jQuery required.

...and more!

W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 1.2.1

- Fixed small gaps and improved rendering workarounds/fallbacks for mobiles.

* New in version 1.2

- Optional mini-player when the video is out of the viewport (due of content up/down scroll).
- Highly customizable mini-player.
- Instances of the player can be inside a layout grid.
- Improved in/out viewport handling.
- Improved multi-instance manager.

* New in version 1.1.1

- Redesigned playlist with improved design and behavior across browsers.
- Images associated to the tracks can optionally be included in the playlist.
- The images borders in the playlist can by styled for the different statuses.
- Duration time included in the playlist.
- Workaround for an unstable PC-Safari bug clicking on the playlist elements.

* New in version 1.1

- Customizable playlist (if applies) with the available tracks.
- Configurable playlist modes (previous-next and/or tracks list).
- Full keyboard support for navigability standards in both the control panel and the playlist.

* New in version 1.0.1

- Optionally, video can be automatically paused when it is out of the viewport and resumed when it is viewable again.
- Custom minimum viewable area of the media object in the viewport to trigger the automatic pause/resume.
- Auto pause/resume synchronized with the audio module.

* New in version

- The counter applies only when there are more than one media file.
- Added a blinking signal when the media is being buffered (useful for large media files and/or slower connections).

How to use?

1. Design your page with its elements.
2. Drag and drop an extension instance (video and/or audio modules).
3. Open the properties dialog and enter the audio and/or video files.
4. Setup colors, sizes, images and other behavioral parameters.
5. Preview or publish.


For audio, it is recommended to use MP3 files and OGG formats as fallback for better compatibility across platforms.
For video, it is recommended the use of MP4 files and WebM and OGV formats as fallback for better compatibility across platforms.

Available optional event-functions:

function MyInstance_onload(track) { ... }:
This optional function is called when a track from the playlist has been loaded.

function MyInstance_onunload(track) { ... }:
This optional function is called when a track from the playlist has been unloaded.

function MyInstance_onstart(track) { ... }:
This optional function is called when a track started playing.

function MyInstance_onend(track) { ... }:
This optional function is called when a track finished playing.

function MyInstance_onplay(track) { ... }:
This optional function is called when a track resumed playing after a pause.

function MyInstance_onpause(track) { ... }:
This optional function is called when a track has been paused.

(Just replace MyInstance with the actual instance name.)

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with