Menu

Tree [de9802] master /
 History

HTTPS access


File Date Author Commit
 libs 2015-12-27 ED The Webmage ED The Webmage [3b82a5] Committer: ED The Webmage
 picons 2015-12-28 ED The Webmage ED The Webmage [fa0e33] Committer: ED The Webmage <ed@...>
 playlists 2015-12-27 ED The Webmage ED The Webmage [3b82a5] Committer: ED The Webmage
 scripts 2016-04-04 ED The Webmage ED The Webmage [de9802] important video bugfix for chrome
 templates 2015-12-31 ED The Webmage ED The Webmage [e0bc97] Committer: ED The Webmage <ed@...>
 COPYING.html 2015-12-27 ED The Webmage ED The Webmage [3b82a5] Committer: ED The Webmage
 README.md 2015-12-31 ED The Webmage ED The Webmage [55c478] Committer: ED The Webmage <ed@...>
 demo.ini 2015-12-27 ED The Webmage ED The Webmage [3b82a5] Committer: ED The Webmage
 index.php 2015-12-27 ED The Webmage ED The Webmage [3b82a5] Committer: ED The Webmage

Read Me

Simple JQuery Media Player

Overview

Simple JQuery Media Player is a media player I started writing for my personal intranet in 2014.
Despite the name Simple JQuery Media Player can do a lot of cool things from playing videos and music to picture slideshows.
You maybe wondering why I did this, because some of you may have mediagoblin or youtube, I made something that could be easy to
understand and modify for your own needs so id someone needs a nifty media player for his site he doesn't have to start from
scratch. I hope you have as much fun using it as I did making it (and then using it ;P) it is written entirely with free
(as in free speech, not free hugs) standards in mind such as HTML5 CSS3 Ogg Vorbis and Theora.
URL Query Arguments


Playlist

Determines what playlist to play

Height

Determines the player height

Width

Determines the player width

Theme

Determines the player theme

Playlists

Before Simple JQuery Media Player will play anything you need to saaign something for it to play this is done with playlist
files and pointer files both in ini format. The pointer tells the media player where to find the data i.e. in another directory
on another server etc. it contains the following data

playlisturl="./path/to/playlist/"

stores the base url for the playlist

mediadir="yourmedia/"

stores the location of the media

artdir="yourart/"

stores the location of art for music files

playlistfile="yourplaylist.ini"

stores the location of the playlist itself.
the actual playlist file contains the following

media sections labeled [media1] [media2] etc.

inside those media sections there are

file

the media file

art

the album art or equivalent image file for music tracks
can be numbered for slidshows

title

the title of the media file
can be numbered for slidshows

type

determines weather the media is an audio or a video
also there are some optional variables

arttype

used for defining slideshows for music tracks. can be slideshow or timedslideshow

time

used exclusively for timed slideshows the time in seconds the next image should show
Themes


One cool feature of Simple JQuery Media Player is it's support for themes located in the templates folder
Simple JQuery Media Player, being based on the smarty template engine is designed with customization and eye candy in mind
if you want to make a theme I suggest you familliarise yourelf with smarty first but if you are already familliar with smarty
here are some important smarty variables

{{$width}}

width of the player most likely to be used in css calculations.

{{$height}}

height of the player most likely to be used in css calculations.

{{$playlist}}

the playlist ini data to be passed to the javascript

{{$mediadir}}

media dir of current playlist

{{$artdir}}

art dir of current playlist
you will also need to know javascript but since all you will be doing for themes is assigning variables so that should be a
piece of cake define these variables before you include the common.js which contains all the functions for controling the
mediaplayer.

var playlist = INI('{{$playlist}}');

required for the mediaplayer to interpret your playlist

var mediadir = "{{$mediadir}}";

reqired for inclusion of media

var artdir = "{{$artdir}}";

required for inclusion of art

var progresstype = <"block"|"bevel">;

reqired for type of progressbar

var blockwidth=<width in="" pixels="">;</width>

reqired for width of each progressbar block
and here are some ids and classes for widgets like buttons and important parts of the player

Classes

bevel

the main box of the media player

insetbevel

the art and video container of the media player

progressbarout

the outside box of the progressbar

progressbarin

the progressbar itself

button

the common class for a button

Ids

audio

the audio element

audiofile

the source of the audio element

video

the video element

videofile

the source of the video element

buttons

back
rw
playbutton
pausebutton
ff
next
stopbutton
volup
voldown
loopon
loopoff
Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.