Find file
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (180 sloc) 7.43 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.flash example</title>
<link type="text/css" rel="stylesheet" href="http://www.stephenbelanger.com/wp-content/themes/vanilla-cart/prettify.css" />
<script type="text/javascript" src="http://www.stephenbelanger.com/wp-content/themes/vanilla-cart/prettify.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
$.noConflict();
</script>
<script type="text/javascript" src="js/jquery.flash.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#flash').flash({allowfullscreen:true,allowscriptaccess:'always'});
$('#flash2').flash({
'src':'http://www.nerdculture.org/wp-content/uploads/audioplayer/mediaplayer.swf',
'width':'600',
'height':'360',
'allowfullscreen':'true',
'allowscriptaccess':'always',
'flashvars': {
'file':'http://www.nerdculture.org/wp-content/uploads/music/playlist.xml',
'displayheight':'0',
'backcolor':'0xFFFFFF',
'frontcolor':'0x666666',
'lightcolor':'0xFF6600',
'thumbsinplaylist':'true',
'width':'600',
'height':'360'
}
});
prettyPrint();
});
</script>
<style type="text/css">
<!--
/* Fonts */
@font-face {
font-family: 'MEgalopolisExtraRegular';
src: url('http://www.stephenbelanger.com/wp-content/themes/vanilla-cart/fonts/MEgalopolisExtra.eot');
src: local('MEgalopolis Extra Regular'), local('MEgalopolisExtra'), url('http://www.stephenbelanger.com/wp-content/themes/vanilla-cart/fonts/MEgalopolisExtra.woff') format('woff'), url('http://www.stephenbelanger.com/wp-content/themes/vanilla-cart/fonts/MEgalopolisExtra.otf') format('opentype'), url('http://www.stephenbelanger.com/wp-content/themes/vanilla-cart/fonts/MEgalopolisExtra.svg#MEgalopolisExtra') format('svg');
}
* {
font-family:Helvetica, Tahoma, Geneva, sans-serif;
}
body {
letter-spacing:1px;
color:#444;
}
pre {
font-size:0.8em;
color:#000;
line-height:1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-family:MEgalopolisExtraRegular, Helvetica, Tahoma, Geneva, sans-serif;
}
/* Centering */
body {
margin:0;
}
#container, div.video {
margin:auto;
}
h1 {
text-align:center;
}
/* Padding */
#container, div.video, pre {
padding:10px !important;
}
div.video div.title {
margin-top:10px;
}
/* General */
body {
background: #dddde0;
}
#container {
width:900px;
}
#fade {
z-index:-1;
position:absolute;
width:100%;
height:500px;
background: -webkit-gradient(linear, 0 0, 0 500, from(#b0b0b3), to(#dddde0));
background: -moz-linear-gradient(#b0b0b3, #dddde0 500px);
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#dddde0', startColorstr='#b0b0b3', gradientType='0');
}
pre {
overflow:auto;
}
a#flash {
display:block;
width:600px;
height:364px;
}
div.video {
width:600px;
}
div.video, pre {
background-color:#FFF;
border:solid 1px #888 !important;
}
/* Rounded Corners */
div.video, pre {
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
-->
</style></head>
<body>
<div id="fade">
</div>
<div id="container">
<h1>jquery.flash</h1>
<div class="video">
<a id="flash" href="http://www.youtube.com/v/Br8zEBwv81Y">Javascript disabled! Click here for video.</a>
<div class="title">Greg Sczebel - Amazing singer / songwriter / pianist from Salmon Arm, BC.</div>
</div>
<h2>Let's get started...</h2>
<p>First you need to download <a href="http://jquery.com/">jquery</a> and jquery.flash (<a href="http://www.stephenbelanger.com/wp-content/uploads/2010/01/jquery.flash.min_.js">Compressed</a> / <a href="http://www.stephenbelanger.com/wp-content/uploads/2010/01/jquery.flash.js">Uncompressed</a>) and reference them somewhere in your page, typically these are placed at the top of the page inside the head element, but I prefer to place them just before the closing body element to prevent rendering from being halted, that's up to you though.</p>
<pre class="prettyprint">
&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.flash.min.js&quot;&gt;&lt;/script&gt;
</pre>
<p>Next you need to create an element to replace. Any kind of element will do, but there is some added functionality allowing jquery.flash to automagically grab the url of the video from the href attribute, if present and no url was supplied in the initialization code, so I like using 'a' link elements--they degrade nicely for those with javascript disabled.</p>
<pre class="prettyprint">
&lt;a id=&quot;flash&quot; href=&quot;http://www.youtube.com/v/Br8zEBwv81Y&quot;&gt;Javascript disabled! Click here for video.&lt;/a&gt;
</pre>
<p>Okay, now we are ready to make the switch. This is the absolute minimum usage case--yes, no arguments are required at all! It will inherit the href, class, id, width and height from the original element if nothing is supplied.</p>
<pre class="prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
$('#flash').flash();
});
&lt;/script&gt;
</pre>
<h2>Let's try something more complex...</h2>
<p>Let's have a look at a more interesting case though. Here we have a music player that requires flashvars to define a playlist and various visual styles;</p>
<div class="video">
<a id="flash2" href="http://www.youtube.com/v/4jsCPLHp_CA">You must not hava Javascript available...click here to load the video instead.</a>
<div class="title">Here's a little shameless self-promotion. Creative Commons Licensed.<br /><a href="http://www.nerdculture.org/wp-content/uploads/2009/04/withstyle.rar">withStyle</a>, <a href="http://www.nerdculture.org/wp-content/uploads/2009/04/checheche.rar">CheCheChe</a></div>
</div>
<p>For something like this we would supply a json object as the first argument, notice that flashvars is also json object, it makes it a little more readable that way--query strings are a pain.</p>
<pre class="prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
$('#flash').flash({
'src':'http://www.nerdculture.org/wp-content/uploads/audioplayer/mediaplayer.swf',
'width':'480',
'height':'300',
'allowfullscreen':'true',
'allowscriptaccess':'always',
'flashvars': {
'file':'http://www.nerdculture.org/wp-content/uploads/music/playlist.xml',
'displayheight':'0',
'backcolor':'0xFFFFFF',
'frontcolor':'0x666666',
'lightcolor':'0xFF6600',
'thumbsinplaylist':'true',
'width':'480',
'height':'300'
}
});
});
&lt;/script&gt;
</pre>
<p>Available parameters and attributes are;</p>
<pre class="prettyprint">id, class, width, height, src, bgcolor, quality, allowscriptaccess, allowfullscreen, flashvars and wmode</pre>
<p>If you need access to other attributes or parameters you can change the values of 'availattrs' and 'availparams' in the json object supplied to jquery.flash.</p>
<p>The defaults are;</p>
<pre class="prettyprint">
availattrs: ['id', 'class', 'width', 'height', 'src'],
availparams: ['src', 'bgcolor', 'quality', 'allowscriptaccess', 'allowfullscreen', 'flashvars', 'wmode'],
</pre>
</div>
</body>
</html>