Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
js
sass
.gitignore
README.md
index.html
watch.sh

README.md

Flexible jPlayer Skin

Installation

  1. Install gem dependencies

    $ gem install bourbon
    $ gem install sass
  2. Install bourbon files

    $ cd sass && bourbon install

Run / Compiling Sass

Compiling Sass file to CSS

$ sass --watch sass:css

Running Bash script

$ ./bash

HTML

You should add the ff code at the top of your HTML code so that it will work on lower version of ie.

<!DOCTYPE html>
<!--[if IE 6]> <html class="ie6 ltie8"> <![endif]-->
<!--[if IE 7]> <html class="ie7 ltie8"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]> <html> <!-- <![endif] -->

Playlist Code

...
<div class='jp-playlist'>
  <ul style='display: block;'>
    <li class='jp-playlist-current'>
      <div>
        <a 
          class='jp-playlist-item'
          data-poster='http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png'
          data-url='http://5by5.tv/bigwebshow'
          href='http://d.ahoy.co/redirect.mp3/fly.5by5.tv/audio/broadcasts/bigwebshow/2013/bigwebshow-088.mp3'
        >
          The Big Web Show 88: Greg Storey
        </a>
      </div>
    </li>
  </ul>
</div>
...
  • data-poster — Poster image source
  • data-url — Poster link url
  • href — Audio MP3 file url
  • The Big Web Show 88: Greg Storey — Episode title

Publisher Code

...
<div class='jp-publisher-container'>
  <a class='jp-publisher' href='http://5by5.tv/bigwebshow' target='_blank'>
    <img
      alt=''
      class='jp-global-poster'
      src='http://res.cloudinary.com/playerfm/image/fetch/d_graymike-bg.png,c_fill,h_270,w_270/http://icebox.5by5.tv/images/broadcasts/7/cover.jpg'
    />
  </a>
  <div class='jp-global-title'>Traffic and Weather</div>
</div>
...
  • href='http://5by5.tv/bigwebshow' — default poster link
  • src='http://res.cloudinary.com/playerfm/image/fe... — default poster image source
  • <div class='jp-global-title'>Traffic and Weather</div> — default poster text
Something went wrong with that request. Please try again.