nfreear/nomensa-ndf-min-commented.html

## nomensa-ndf-min-commented.html
<!DOCTYPE html><html lang="en"><meta charset="utf-8" />
<!--
 N.D.Freear, 27 January 2012.

 1. Converted to HTML5 doctype..
 * no [head] or [body] (the browsers fix this for us, now that HTML5 defines/ standardizes parsing rules),
 * removed type=text/javascript, type=text/css
 * removed instructions
   - this reduces clutter!


 2. Issue/Bug(?): The YouTube player in examples.html didn't work for me when I ran from "file:" protocol, as opposed to "http:" in Chrome 16 and Firefox 8 on mac os x 10.6, ie:
"file://localhost/Users/Nick/workspace/Nomensa-Accessible-Media-Player/examples.html"
 - this may not be a bug, but probably deserves a warning! (First rule of software release - someone will always try a configuration you didn't think of!)
-->

<!-- Not sure I understand this!? "Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7" -->

<!--
 3. There is a v. minor bug in the 'Content-Type' [meta] tag below - should be  ".. ; charset=utf-8" - best convert to HTML5, then you (almost) can't go wrong ;).

    <meta http-equiv="Content-Type" content="application/text+html;utf-8" >
-->

    <title>Accessible Media Player Examples, simplified</title>

    <link href="core/css/player-core.css" rel="stylesheet" >
    <link href="custom/css/player-theme.css" rel="stylesheet" >

<!--
 4. Why not just statically link? Simpler, more understandable.

    <script src="http://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1.6.0");
        google.load("jqueryui", "1.8.13");
    </script>
-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    <script src="core/javascript/swfobject/swfobject.js"></script>
    <script src="core/javascript/jquery.player.js"></script>
<!--
 5. Remove unused Javascripts.
    <script src="custom/javascript/config/jwplayer-5/core/jwplayer.js"></script>
    <script src="custom/javascript/config/jwplayer-5/jw-player.config.js"></script>
    <script src="custom/javascript/config/vimeo/vimeo.config.js"></script>
-->
    <script src="custom/javascript/jquery.loader.js"></script>


    <h1>Accessible Media Player</h1>

<!--
 6. Lack of 'namespace' in the generated HTML - 'player-container' is a bit generic. Why not 'nomensa-player-ctr' for example? (Plus, free branding!)

 <span style="height: 100%; width: 100%; " class="player-container player-wide">
   <span class="video">
   ...
-->

<!--
 Trying the Javascripty route..
-->

<div id=yt1>Video: Order of content by Emily Coward</div>
<a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a>

<script>
$("#yt1").player({

  // 7. In general, the Javascript API seems simple and usable - except, note the '_' versus camelCase point below!

  id:'yt_player',
  media:'kXiGXcq4pqY',

  captions: './example/captions/captions-order-of-content.xml',

  // 8. OK, the 'use_html5' flag doesn't seem to work for the YouTube player - correct? If that is the case, best to be upfront and document it to save disappointment!

  // 9. Note, I tried both variations (use_html5, useHtml5), because the rest of the variables appear to be a mix of '_' separated and camelCase - best to be consistent in your API!

  use_html5: true,
  useHtml5: true
});
</script>


<!-- jquery.loader.js method one -->

<!-- 10. Remove unused examples...

	<h2>Examples</h2>
	<h3>Youtube Player with captions</h3>

	<p><a href="http://www.youtube.com/watch?v=kXiGXcq4pqY">Order of content by Emily Coward</a><a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a>

	<h3>YT Player without captions</h3>
	<p><a href="http://www.youtube.com/watch?v=IhWMou12_Vk">Aria Document Landmark Roles</a>

	<h3>JW Player - MP4 File</h3>
	<p><a href="./example/video/hidden-elements.mp4">Screen readers and hidden elements</a><a class="captions" href="./example/captions/captions-hidden-elements.xml" style="display:none;">Captions</a>

	<h3>JW Player - MP3 File</h3>
	<p><a href="./example/audio/Jaws_HTML_Tables.mp3">Tester MP3 file</a>
-->

</html>

## nomensa-ndf-min-min.html
<!DOCTYPE html><html lang="en"><meta charset="utf-8" /><!-- Nomensa + N.D.Freear, 27 January 2012. -->

    <title>Accessible Media Player Example, simplified - Nomensa</title>

    <link href="core/css/player-core.css" rel="stylesheet" />
    <link href="custom/css/player-theme.css" rel="stylesheet" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    <script src="core/javascript/swfobject/swfobject.js"></script>
    <script src="core/javascript/jquery.player.js"></script>
    <script src="custom/javascript/jquery.loader.js"></script>

    <h1>Accessible Media Player</h1>

<div id="yt1">Video: Order of content by Emily Coward</div>
<a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a>

<script>
$("#yt1").player({
  id:'yt_player',
  media:'kXiGXcq4pqY',
  captions: './example/captions/captions-order-of-content.xml',

  //use_html5: true //Bug? :(.
});
</script>

</html>

## original-examples.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
    <meta http-equiv="Content-Type" content="application/text+html;utf-8" >

    <title>Accessible Media Player Examples</title>

    <link type="text/css" href="core/css/player-core.css" rel="stylesheet" >
    <link type="text/css" href="custom/css/player-theme.css" rel="stylesheet" >

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.6.0");
        google.load("jqueryui", "1.8.13");
    </script>
    <script type="text/javascript" src="core/javascript/swfobject/swfobject.js"></script>
    <script type="text/javascript" src="core/javascript/jquery.player.js"></script>
    <script type="text/javascript" src="custom/javascript/config/jwplayer-5/core/jwplayer.js"></script>
    <script type="text/javascript" src="custom/javascript/config/jwplayer-5/jw-player.config.js"></script>
    <script type="text/javascript" src="custom/javascript/config/vimeo/vimeo.config.js"></script>
    <script type="text/javascript" src="custom/javascript/jquery.loader.js"></script>
</head>
<body>

    <div style="float:left; width: 65%;">
        <h1>Accessible Media Player</h1>

		<div>
			<h2>Dependencies</h2>

				<h3>Basic</h3>
					<p>The following libraries are required for operation of the Nomensa accessible media player:</p>
					<ul>
						<li>jQuery core (version 1.3.2+)</li>
						<li>jQuery UI (version 1.7.3+)</li>
					</ul>

				<h3>Youtube</h3>
					<p>No further libraries are required to make the nomensa accessible media player work with the youtube player.</p>

				<h3>JW Player</h3>
					<p>In addition to the files mentioned in the &quot;Basic&quot; section above the jwplayer requires the following files:</p>
					<ul>
						<li>jwplayer.swf (version 5.x) - This is the actual flash based media player.  You will be responsible for purchasing and licensing your own copy of JW Player.</li>
						<li>jwplayer.js. (This file is needed to create the player manager instance. It should be distributed with the jwplayer package)</li>
					</ul>
		</div>

		<div><!-- jquery.loader.js method one -->
			<h2>Examples</h2>
		        <h3>Youtube Player with captions</h3>
		        <p><a href="http://www.youtube.com/watch?v=kXiGXcq4pqY">Order of content by Emily Coward</a><a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a></p>

				<h3>YT Player without captions</h3>
				<p><a href="http://www.youtube.com/watch?v=IhWMou12_Vk">Aria Document Landmark Roles</a></p>

		        <h3>JW Player - MP4 File</h3>
		        <p><a href="./example/video/hidden-elements.mp4">Screen readers and hidden elements</a><a class="captions" href="./example/captions/captions-hidden-elements.xml" style="display:none;">Captions</a></p>

		        <h3>JW Player - MP3 File</h3>
		        <p><a href="./example/audio/Jaws_HTML_Tables.mp3">Tester MP3 file</a></p>

	    </div>


		<div>
        	<h2>Initialisation</h2>
			<p>Nomensas' accessible media player is configured to handle youtube content by default.  We currently have config files that make it possible to play audio and video using jwplayer.</p>
        </div>

    </div><!-- /contentLeft -->

    <div style="float:right; width:33%;">
        <h2>Player options</h2>

        <h3>Unique options</h3>
        <p>These are normally unique to each player:</p>

        <ul>
            <li>
            <p><strong>id</strong> - <em>(ytplayer)</em></p>
            <p>A unique id for this player. It is essential that each call to generate a new player passes in a specific new id.  The player manager class will use this id for managing player instances on the page.</p>
            </li>

            <li>
            <p><strong>url</strong> - <em>(http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=)</em></p>
            <p>The path to the player file. The Youtube player instance is returned from the url above.  JWPlayer makes use of a .swf file.  If a file is used instead this property should be set so that it points to the swf file.  For example: &quot;path/to/player.swf&quot;</p>
            </li>

            <li>
            <p><strong>media</strong> - <em>(8LiQ-bLJaM4)</em></p>
            <p>The media file you want the player to load when generated. For YouTube players this is the 11 character unique id at the end of the URL of a YouTube video. For JW players it is the relative path to the media file you want the player to load.</p>
            </li>

            <li>
            <p><strong>captions</strong> - <em>(null)</em></p>
            <p>This should be a path to an xml based captions file.  The mediaplayer will get these captions using an ajax call and will synchronise them if possible.  Note that this is an experimental feature.  Although it should work independantly of the type of video player used it is a purely javascript implementation.</p>
            </li>

            <li>
            <p><strong>image</strong> - <em>()</em></p>
            <p>Thumbnail image URL that appears before the media is played (this is not supported by the Youtube API)</p>
            </li>
        </ul>
        <h3>Generic options</h3>
        <p>These options will normally be set once for all players:</p>
        <ul>
            <li>
            <p><strong>flashWidth</strong> - <em>(100%)</em></p>
            <p>The width of the flash player within the container. This changes the width of the visual screen of the flash player rather than the container. This defaults to 100%, but can be changed to other values such as px or different %'s.</p>
            </li>

            <li>
            <p><strong>flashHeight</strong> - <em>(220)</em></p>
            <p>The height of the flash player within the container. The default value is 600px, but different values can be passed in using the option flashHeight:'200px'.</p>
            </li>

            <li>
            <p><strong>playerStyles</strong> - <em>(javascript object - {})</em></p>
            <p>This is an object containing a mapping of styles that will be applied to the player container. You can add any number of styles to the player.  For example &quot;playerStyles : {'height': '100%', 'width': '100%', 'color':'red'}&quot; will create a player container of 100% width and height with red text.</p>
            </li>

			<li>
            <p><strong>captionsOn</strong> - <em>(false)</em></p>
            <p>This is a simple boolean flag indicating whether or not to display captions by default (if a captions file has been provided).</p>
            </li>

			<li>
            <p><strong>use_html5</strong> - <em>(true)</em></p>
            <p>If this option is set to true, HTML5 version of the player will be used if the browser in use supports it.  If the browser in use does not support the html5 video element or the type of video being played it will fall back to use flash.  Note that this does not currently work with the Youtube player.  Support for any given type of video is evaluated based on the level of support estimated by the browser.  This uses the HTML5 video/audio 'canPlayType(videoType)' call.</p>
            </li>

        </ul>
        <h3>Advanced options</h3>
        <p>The defaults will normally be sufficient. We would recommend you only change these if you know what you are doing:</p>
        <ul>
            <li>
            <p><strong>repeat</strong> - <em>(false)</em></p>
            <p>Whether or not to loop the video.</p>
            </li>

            <li>
            <p><strong>slider_timeout</strong> - <em>(350)</em></p>
            <p>The time between sebsequent calls to update the timer widget in milliseconds</p>
            </li>

            <li>
            <p><strong>flashContainerName</strong> - <em>(player)</em></p>
            <p></p>
            </li>

            <li>
            <p><strong>flashContainer</strong> - <em>(span)</em></p>
            <p>Element used for Flash container</p>
            </li>

            <li>
            <p><strong>playerContainer</strong> - <em>(span)</em></p>
            <p>Element used for player container</p>
            </li>

            <li>
            <p><strong>player_skip</strong> - <em>(10)</em></p>
            <p>Amount (in seconds) the rewind and forward buttons skip</p>
            </li>

            <li>
            <p><strong>volume_step</strong> - <em>(10)</em></p>
            <p>The value (in percent) that the volume will be increased/decreased by when it is changed.</p>
            </li>

            <li>
            <p><strong>buttons</strong> - <em>(javascript object - {})</em></p>
            <p>A mapping of buttons to show in the player.</p>
			<p><strong>For example:</strong></p>
			<pre>
buttons : {
	forward: true,
	rewind: true,
	toggle: true
}
			</pre>
			<p>This mapping will ensure that the fast-forward, rewind and a play/pause button is provided.  Note that if 'toggle' is set to true only one button will be provided.  This will be used to toggle between playing and paused states.  If this is set to false both a play and a pause button will be provided.</p>
            </li>

            <li>
            <p><strong>player</strong> - <em>(null)</em></p>
            <p>This is purely a placeholder.  It will eventually contain a reference to the player API (whichever one is being used).  If this property is overwritten when the player is instantiated it is likely to cause problems.</p>
            </li>

            <li>
            <p><strong>swfCallback</strong> - <em>(null)</em></p>
            <p>SWFObject allows us to attach a callback to the swf.embed option.  This allows us to call a function, method when the flash component has loaded.  This is required for the correct operation of some players.</p>
            </li>
        </ul>
    </div><!-- /contentRight -->
</body>

</html>
	<!DOCTYPE html><html lang="en"><meta charset="utf-8" />
	<!--
	N.D.Freear, 27 January 2012.

	1. Converted to HTML5 doctype..
	* no [head] or [body] (the browsers fix this for us, now that HTML5 defines/ standardizes parsing rules),
	* removed type=text/javascript, type=text/css
	* removed instructions
	- this reduces clutter!


	2. Issue/Bug(?): The YouTube player in examples.html didn't work for me when I ran from "file:" protocol, as opposed to "http:" in Chrome 16 and Firefox 8 on mac os x 10.6, ie:
	"file://localhost/Users/Nick/workspace/Nomensa-Accessible-Media-Player/examples.html"
	- this may not be a bug, but probably deserves a warning! (First rule of software release - someone will always try a configuration you didn't think of!)
	-->

	<!-- Not sure I understand this!? "Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7" -->

	<!--
	3. There is a v. minor bug in the 'Content-Type' [meta] tag below - should be ".. ; charset=utf-8" - best convert to HTML5, then you (almost) can't go wrong ;).

	<meta http-equiv="Content-Type" content="application/text+html;utf-8" >
	-->

	<title>Accessible Media Player Examples, simplified</title>

	<link href="core/css/player-core.css" rel="stylesheet" >
	<link href="custom/css/player-theme.css" rel="stylesheet" >

	<!--
	4. Why not just statically link? Simpler, more understandable.

	<script src="http://www.google.com/jsapi"></script>
	<script>
	google.load("jquery", "1.6.0");
	google.load("jqueryui", "1.8.13");
	</script>
	-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

	<script src="core/javascript/swfobject/swfobject.js"></script>
	<script src="core/javascript/jquery.player.js"></script>
	<!--
	5. Remove unused Javascripts.
	<script src="custom/javascript/config/jwplayer-5/core/jwplayer.js"></script>
	<script src="custom/javascript/config/jwplayer-5/jw-player.config.js"></script>
	<script src="custom/javascript/config/vimeo/vimeo.config.js"></script>
	-->
	<script src="custom/javascript/jquery.loader.js"></script>


	<h1>Accessible Media Player</h1>

	<!--
	6. Lack of 'namespace' in the generated HTML - 'player-container' is a bit generic. Why not 'nomensa-player-ctr' for example? (Plus, free branding!)

	<span style="height: 100%; width: 100%; " class="player-container player-wide">
	<span class="video">
	...
	-->

	<!--
	Trying the Javascripty route..
	-->

	<div id=yt1>Video: Order of content by Emily Coward</div>
	<a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a>

	<script>
	$("#yt1").player({

	// 7. In general, the Javascript API seems simple and usable - except, note the '_' versus camelCase point below!

	id:'yt_player',
	media:'kXiGXcq4pqY',

	captions: './example/captions/captions-order-of-content.xml',

	// 8. OK, the 'use_html5' flag doesn't seem to work for the YouTube player - correct? If that is the case, best to be upfront and document it to save disappointment!

	// 9. Note, I tried both variations (use_html5, useHtml5), because the rest of the variables appear to be a mix of '_' separated and camelCase - best to be consistent in your API!

	use_html5: true,
	useHtml5: true
	});
	</script>


	<!-- jquery.loader.js method one -->

	<!-- 10. Remove unused examples...

	<h2>Examples</h2>
	<h3>Youtube Player with captions</h3>

	<p><a href="http://www.youtube.com/watch?v=kXiGXcq4pqY">Order of content by Emily Coward</a><a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a>

	<h3>YT Player without captions</h3>
	<p><a href="http://www.youtube.com/watch?v=IhWMou12_Vk">Aria Document Landmark Roles</a>

	<h3>JW Player - MP4 File</h3>
	<p><a href="./example/video/hidden-elements.mp4">Screen readers and hidden elements</a><a class="captions" href="./example/captions/captions-hidden-elements.xml" style="display:none;">Captions</a>

	<h3>JW Player - MP3 File</h3>
	<p><a href="./example/audio/Jaws_HTML_Tables.mp3">Tester MP3 file</a>
	-->

	</html>
	<!DOCTYPE html><html lang="en"><meta charset="utf-8" /><!-- Nomensa + N.D.Freear, 27 January 2012. -->

	<title>Accessible Media Player Example, simplified - Nomensa</title>

	<link href="core/css/player-core.css" rel="stylesheet" />
	<link href="custom/css/player-theme.css" rel="stylesheet" />

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

	<script src="core/javascript/swfobject/swfobject.js"></script>
	<script src="core/javascript/jquery.player.js"></script>
	<script src="custom/javascript/jquery.loader.js"></script>

	<h1>Accessible Media Player</h1>

	<div id="yt1">Video: Order of content by Emily Coward</div>
	<a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a>

	<script>
	$("#yt1").player({
	id:'yt_player',
	media:'kXiGXcq4pqY',
	captions: './example/captions/captions-order-of-content.xml',

	//use_html5: true //Bug? :(.
	});
	</script>

	</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
	<head>
	<meta http-equiv="Content-Type" content="application/text+html;utf-8" >

	<title>Accessible Media Player Examples</title>

	<link type="text/css" href="core/css/player-core.css" rel="stylesheet" >
	<link type="text/css" href="custom/css/player-theme.css" rel="stylesheet" >

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.6.0");
	google.load("jqueryui", "1.8.13");
	</script>
	<script type="text/javascript" src="core/javascript/swfobject/swfobject.js"></script>
	<script type="text/javascript" src="core/javascript/jquery.player.js"></script>
	<script type="text/javascript" src="custom/javascript/config/jwplayer-5/core/jwplayer.js"></script>
	<script type="text/javascript" src="custom/javascript/config/jwplayer-5/jw-player.config.js"></script>
	<script type="text/javascript" src="custom/javascript/config/vimeo/vimeo.config.js"></script>
	<script type="text/javascript" src="custom/javascript/jquery.loader.js"></script>
	</head>
	<body>

	<div style="float:left; width: 65%;">
	<h1>Accessible Media Player</h1>

	<div>
	<h2>Dependencies</h2>

	<h3>Basic</h3>
	<p>The following libraries are required for operation of the Nomensa accessible media player:</p>
	<ul>
	<li>jQuery core (version 1.3.2+)</li>
	<li>jQuery UI (version 1.7.3+)</li>
	</ul>

	<h3>Youtube</h3>
	<p>No further libraries are required to make the nomensa accessible media player work with the youtube player.</p>

	<h3>JW Player</h3>
	<p>In addition to the files mentioned in the "Basic" section above the jwplayer requires the following files:</p>
	<ul>
	<li>jwplayer.swf (version 5.x) - This is the actual flash based media player. You will be responsible for purchasing and licensing your own copy of JW Player.</li>
	<li>jwplayer.js. (This file is needed to create the player manager instance. It should be distributed with the jwplayer package)</li>
	</ul>
	</div>

	<div><!-- jquery.loader.js method one -->
	<h2>Examples</h2>
	<h3>Youtube Player with captions</h3>
	<p><a href="http://www.youtube.com/watch?v=kXiGXcq4pqY">Order of content by Emily Coward</a><a class="captions" href="./example/captions/captions-order-of-content.xml" style="display:none;">Captions</a></p>

	<h3>YT Player without captions</h3>
	<p><a href="http://www.youtube.com/watch?v=IhWMou12_Vk">Aria Document Landmark Roles</a></p>

	<h3>JW Player - MP4 File</h3>
	<p><a href="./example/video/hidden-elements.mp4">Screen readers and hidden elements</a><a class="captions" href="./example/captions/captions-hidden-elements.xml" style="display:none;">Captions</a></p>

	<h3>JW Player - MP3 File</h3>
	<p><a href="./example/audio/Jaws_HTML_Tables.mp3">Tester MP3 file</a></p>

	</div>


	<div>
	<h2>Initialisation</h2>
	<p>Nomensas' accessible media player is configured to handle youtube content by default. We currently have config files that make it possible to play audio and video using jwplayer.</p>
	</div>

	</div><!-- /contentLeft -->

	<div style="float:right; width:33%;">
	<h2>Player options</h2>

	<h3>Unique options</h3>
	<p>These are normally unique to each player:</p>

	<ul>
	<li>
	<p><strong>id</strong> - <em>(ytplayer)</em></p>
	<p>A unique id for this player. It is essential that each call to generate a new player passes in a specific new id. The player manager class will use this id for managing player instances on the page.</p>
	</li>

	<li>
	<p><strong>url</strong> - <em>(http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=)</em></p>
	<p>The path to the player file. The Youtube player instance is returned from the url above. JWPlayer makes use of a .swf file. If a file is used instead this property should be set so that it points to the swf file. For example: "path/to/player.swf"</p>
	</li>

	<li>
	<p><strong>media</strong> - <em>(8LiQ-bLJaM4)</em></p>
	<p>The media file you want the player to load when generated. For YouTube players this is the 11 character unique id at the end of the URL of a YouTube video. For JW players it is the relative path to the media file you want the player to load.</p>
	</li>

	<li>
	<p><strong>captions</strong> - <em>(null)</em></p>
	<p>This should be a path to an xml based captions file. The mediaplayer will get these captions using an ajax call and will synchronise them if possible. Note that this is an experimental feature. Although it should work independantly of the type of video player used it is a purely javascript implementation.</p>
	</li>

	<li>
	<p><strong>image</strong> - <em>()</em></p>
	<p>Thumbnail image URL that appears before the media is played (this is not supported by the Youtube API)</p>
	</li>
	</ul>
	<h3>Generic options</h3>
	<p>These options will normally be set once for all players:</p>
	<ul>
	<li>
	<p><strong>flashWidth</strong> - <em>(100%)</em></p>
	<p>The width of the flash player within the container. This changes the width of the visual screen of the flash player rather than the container. This defaults to 100%, but can be changed to other values such as px or different %'s.</p>
	</li>

	<li>
	<p><strong>flashHeight</strong> - <em>(220)</em></p>
	<p>The height of the flash player within the container. The default value is 600px, but different values can be passed in using the option flashHeight:'200px'.</p>
	</li>

	<li>
	<p><strong>playerStyles</strong> - <em>(javascript object - {})</em></p>
	<p>This is an object containing a mapping of styles that will be applied to the player container. You can add any number of styles to the player. For example "playerStyles : {'height': '100%', 'width': '100%', 'color':'red'}" will create a player container of 100% width and height with red text.</p>
	</li>

	<li>
	<p><strong>captionsOn</strong> - <em>(false)</em></p>
	<p>This is a simple boolean flag indicating whether or not to display captions by default (if a captions file has been provided).</p>
	</li>

	<li>
	<p><strong>use_html5</strong> - <em>(true)</em></p>
	<p>If this option is set to true, HTML5 version of the player will be used if the browser in use supports it. If the browser in use does not support the html5 video element or the type of video being played it will fall back to use flash. Note that this does not currently work with the Youtube player. Support for any given type of video is evaluated based on the level of support estimated by the browser. This uses the HTML5 video/audio 'canPlayType(videoType)' call.</p>
	</li>

	</ul>
	<h3>Advanced options</h3>
	<p>The defaults will normally be sufficient. We would recommend you only change these if you know what you are doing:</p>
	<ul>
	<li>
	<p><strong>repeat</strong> - <em>(false)</em></p>
	<p>Whether or not to loop the video.</p>
	</li>

	<li>
	<p><strong>slider_timeout</strong> - <em>(350)</em></p>
	<p>The time between sebsequent calls to update the timer widget in milliseconds</p>
	</li>

	<li>
	<p><strong>flashContainerName</strong> - <em>(player)</em></p>
	<p></p>
	</li>

	<li>
	<p><strong>flashContainer</strong> - <em>(span)</em></p>
	<p>Element used for Flash container</p>
	</li>

	<li>
	<p><strong>playerContainer</strong> - <em>(span)</em></p>
	<p>Element used for player container</p>
	</li>

	<li>
	<p><strong>player_skip</strong> - <em>(10)</em></p>
	<p>Amount (in seconds) the rewind and forward buttons skip</p>
	</li>

	<li>
	<p><strong>volume_step</strong> - <em>(10)</em></p>
	<p>The value (in percent) that the volume will be increased/decreased by when it is changed.</p>
	</li>

	<li>
	<p><strong>buttons</strong> - <em>(javascript object - {})</em></p>
	<p>A mapping of buttons to show in the player.</p>
	<p><strong>For example:</strong></p>
	<pre>
	buttons : {
	forward: true,
	rewind: true,
	toggle: true
	}
	</pre>
	<p>This mapping will ensure that the fast-forward, rewind and a play/pause button is provided. Note that if 'toggle' is set to true only one button will be provided. This will be used to toggle between playing and paused states. If this is set to false both a play and a pause button will be provided.</p>
	</li>

	<li>
	<p><strong>player</strong> - <em>(null)</em></p>
	<p>This is purely a placeholder. It will eventually contain a reference to the player API (whichever one is being used). If this property is overwritten when the player is instantiated it is likely to cause problems.</p>
	</li>

	<li>
	<p><strong>swfCallback</strong> - <em>(null)</em></p>
	<p>SWFObject allows us to attach a callback to the swf.embed option. This allows us to call a function, method when the flash component has loaded. This is required for the correct operation of some players.</p>
	</li>
	</ul>
	</div><!-- /contentRight -->
	</body>

	</html>