I am using camendesign's VIDEO FOR EVERYBODY script to embed a video element on my page, and have a flash player fallback for those who do not have HTML5 functionality.
But I am changing al the URLs to be dynamically loaded when the page is called. Everything is parsing out fine except for the flashVars string in the object embed params tag. The value of this params tag needs to be URL Encoded, so I have a bit of javascript before the video is rendered on the page to encode the url for the poster image AND the video file using the values that are loaded in.
My question is this: How do I properly have the two values parse out so that they complete the flashVars value properly?
Here's my code: (consequently, this is a Java site I'm running, hence the JAVA c:sets)
<!DOCTYPE HTML>
<c:set var="title" value="Blender Demo Reel 2013"/>
<c:set var="file" value="bdr2013"/>
<c:set var="poster" value="poster.jpg"/>
<c:set var="width" value="960"/>
<c:set var="height" value="540"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Video Player</title>
</head>
<script>
var posterEncode = encodeURIComponent("${poster}");
var fileEncode = encodeURIComponent("${file}");
</script>
<body>
<div id="videoContainer">
<video controls preload poster="${poster}" width="${width}" height="${height}">
<source src="${file}.mp4" type="video/mp4">
<source src="${file}.ogv" type="video/ogg">
<source src="${file}.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image="+posterEncode+"&file="+fileEncode+".mp4" />
<img alt="Big Buck Bunny" src="${poster}" width="${width}" height="${height}" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
</body>
</html>
The source code when I view this in a browser comes back as this:
<script>
var posterEncode = encodeURIComponent("poster.jpg");
var fileEncode = encodeURIComponent("bdr2013");
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Video Player</title>
<body>
<div id="videoContainer">
<video controls preload poster="poster.jpg" width="960" height="540">
<source src="bdr2013.mp4" type="video/mp4">
<source src="bdr2013.ogv" type="video/ogg">
<source src="bdr2013.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="960" height="540">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image="+posterEncode+"&file="+fileEncode+".mp4" />
<img alt="Big Buck Bunny" src="poster.jpg" width="960" height="540" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
</body>
</html>
You're just writing out HTML attributes. There's no need for JavaScript here. URI encode the strings in Java and put them in Java variables and then put them in your HTML just like you do with any other Java variable: