Home ›

OSM Standalone Setup Guide

NOTE: If you are using a server with PHP to deliver your HTML pages, then please refer to the Using the Open Standard Media Player PHP Library guideline instead of this tutorial.

The Open Standard Media Player was designed with the flexibility to not only be used within a Content Management System, but also as a stand alone player within your website. Unfortunately, though, implementing the player as a stand alone solution does require code and markup to get the player to show content. Also, please note, that within the Open Standard Media Player download, there is an index.html page that you can reference when trying to replicate a standalone solution.

Before we begin, we will first need to do some preparation...

Preparation

  • The first step that you will need to take is to download the stand-alone Open Standard Media player by navigating to the Stand-alone Open Standard Media Player project page. This link will open up a separate tab in your browser so you will not lose this page.
  • Once you have finished downloading the latest version of this player, you will then need extract the contents within a player directory that resides in the root folder of your website. For example, if your website's root folder is contained within the public_html folder of your server, then we will need to make sure that the contents of this player have been extracted within a public_html/player folder.
  • Next verify that the index.html file contained within the stand-alone download is found at the public_html/player/index.html location. If it is not, the rearrange your folder structure so that it is.
  • We are now ready to begin...

Single Media File Player

Typically, when someone wishes to show the Open Standard Media player with a single file, they simply wish to provide a single path to the media they wish to play, and then a preview image to show when the media has not started playing ( or in the case of an audio track, an image to show when the audio track is being played ). Follow these steps to achieve this...

  • First add the following Javascript and CSS files to the <head></head> of your website.
    <script type="text/javascript" src="player/js/jquery.osmplayer.compressed.js"></script>    
    <script type="text/javascript" src="player/templates/default/jquery.media.template.default.compressed.js"></script>


  • Next, you will need to add the template CSS file to the <head></head> of your website.
    <link rel="stylesheet" href="player/templates/default/osmplayer_default.css" type="text/css" media="screen" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="./templates/default/osmplayer_default_ie.css" />
    <![endif]-->


  • Now you need to decide which theme you would like to use. You can download or create your themes by going to the jQuery ThemeRoller website. Once you download your theme, you will then need to move the theme folder located within the css folder from the extracted jQuery UI download to the player/jquery-ui/css folder. You can then add your theme to your website by using the code like the following in the <head></head> of your website. Please note, that your code will look different since you will be referencing a different theme.
    <link rel="stylesheet" href="player/jquery-ui/css/dark-hive/jquery-ui-1.8rc1.custom.css" type="text/css" media="screen" />


  • You will now need to add the following code within your <body></body> of your website to add the node of the player.
    <div class="mediaplayerdialog ui-dialog ui-widget ui-widget-content ui-corner-all" id="mediaplayer" style="width:640px;height:480px;">
      <div class="mediatitlebar ui-dialog-titlebar ui-widget-header ui-corner-top ui-helper-clearfix"></div>
      <div class="mediaplayer ui-helper-clearfix">
        <div class="medianode">
          <div class="mediaregion">
            <div class="mediabusy"><img src="templates/default/images/busy.gif" /></div>
            <div class="mediaplay"><img src="templates/default/images/play.png" /></div>
            <div class="mediapreview"></div>
            <div class="mediadisplay"></div>
            <div class="mediacontrol ui-widget-header ui-corner-bottom">
              <div class="mediacontrolleft">
                <div class="mediaplaypause ui-state-default ui-corner-all">
                  <div class="on"><span class="ui-icon ui-icon-play"></span></div>
                  <div class="off" style="display:none"><span class="ui-icon ui-icon-pause"></span></div>
                </div>
                <div class="mediacurrenttime">00:00</div>
              </div>
              <div class="mediacontrolright">
                <div class="mediatotaltime">00:00</div>
                <div class="mediamute ui-state-default ui-corner-all">
                  <div class="on" style="display:none"><span class="ui-icon ui-icon-volume-off"></span></div>
                  <div class="off"><span class="ui-icon ui-icon-volume-on"></span></div>
                </div>
                <div class="mediavolumebar">
                  <div class="mediavolumehandle">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                  </div>
                  <div class="mediavolume ui-state-default">
                    <div class="mediavolumeupdate"><div class="ui-state-active"></div></div>
                  </div>
                </div>
              </div>
              <div class="mediacontrolcenter">
                <div class="mediaseekbar">
                  <div class="mediaseekhandle">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                  </div>
                  <div class="mediaseek ui-state-default">
                    <div class="mediaseekupdate"><div class="ui-state-active"></div></div>
                    <div class="mediaseekprogress"><div class="ui-state-hover"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  • Now finally, you need to add the JavaScript code that creates the player and adds the file and image to be played. You can do this at the top of the <body></body> section of your website. Of course, you will need to replace the http://www.mysite.com/video.mp4 and http://www.mysite.com/image.jpg with the video and image you wish to play.

    <script type="text/javascript">
    $(document).ready(function() {
      $(".mediaplayerdialog").mediaplayer({
        file:"http://www.mysite.com/video.mp4",
        image:"http://www.mysite.com/image.jpg"
      });                   
    });     
    </script>


XML Playlist support

The easiest way to implement XML playlist support is to simply open up the index.html file that comes with the Open Standard Media Player download, and then copy and paste that code within your website. You will then be able to specify any playlist that you wish to provide using the code below. Keep in mind that the player can either parse an RSS feed, or a custom XML file to build its playlist. It can even play RSS feeds from YouTube!

<script type="text/javascript">
  $(document).ready(function() {
    $(".mediaplayerdialog").mediaplayer({
      playlist:"http://www.mysite.com/rss"
    });                   
  });     
</script>

Sponsors