Videos Playing in Place
Videos Playing in Place
After seeing the videos start and stop with mouse rollover at vlogs universe, I decided to code my videos to appear in place on my web pages. I wanted to create generalized javascript functions that handle the movie appearance. So, I looked at the source on vlog universes and show more...
The first thing I figured is that the content of a <div> could be replaced with a call to "innerHTML." So after some experimentation I wrote the following javascript function:
function showVlog(divName, movSrc, movWidth, movHeight, movAutoplay, movController) { var vlogDiv = document.getElementById(divName); if (vlogDiv != null && movSrc != null) { if (movWidth == null) movWidth = "320"; if (movHeight == null) movHeight = "260"; if (movAutoplay == null) movAutoplay = "false"; if (movController == null) movController = "true"; vlogDiv.innerHTML ="<object width='" + movWidth + "' height='" + movHeight + "' classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab'> <param name='src' value='" + movSrc + "'> <param name='autoplay' value='" + movAutoplay + "'> <param name='controller' value='" + movController + "'> <embed src='" + movSrc + "' width='"+ movWidth + "' height='" + movHeight + "' autoplay='" + movAutoplay + "' controller='" + movController + "' pluginspage='http://www.apple.com/quicktime/download/'> </embed></object>"; } }What showVlog function does is take the ID of a <div> (divName) and the http location of a quicktime movie (movSrc) and replace the content of the specified <div> with formatted <object> and <embed> code for the movie. You may also optionaly enter the movie width (movWidth), movie height (movHeight), whether it automaticaly starts playing (movAutoplay) and displays a movie controller (movController). Or accept the default settings for those parameters: A movie that's 320x260 (with controller), does not auto play and will display the controller.
After trying this out and making it work, I realized I usually want my movies to autoplay (start playing immediately.) So I created another, simpler function playVlog(...) that has autoplay on:
function playVlog(divName, movSrc, movWidth, movHeight) { var vlogDiv = document.getElementById(divName); if (vlogDiv != null && movSrc != null) { if (movWidth == null) movWidth = "320"; if (movHeight == null) movHeight = "260"; showVlog(divName, movSrc, movWidth, movHeight, true, true); } }I put both of these functions into a javascript .js file (I called mine "vlog.js") and put it up in a appropriate directory on my server (/vlog/script directory.) Now I needed to load that javascript into my site page. On Wordpress I edited the "header.php" file in my active theme. There I put under the "<!-- Javascript Includes -->" section:
<script type="text/javascript" language="javascript" src="script/vlog.js"></script>Depending on the theme, this may be named differently. But it should be placed anywhere before the finishing <head> tag. It can even be placed within the <body> tag. This should also work in other blogging systems, like Bloogger.com, by editing their themes. Though there may be interactions on other systems to figure out.
Now comes calling the functions in the vlog entry. First create a <div> with a unique <id> and an <onclick> event call to the javascript function:
<div id="divMyName" onClick="playVlog('divMyName', 'http://quicktime-movie-location/quicktime-movie.mov');">I then add a <img> entry within the <div>. After the <div>, I place <a href...> link code within a <noscript> tag. This serves two purposes: 1) If scripting is disabled it allows the user to start the movie from that link and 2) RSS engines will format the first visible <a href...> pointer to a media resource as an enclosure:
<script> </script><noscript><br><a href="http://quicktime-movie-location/quicktime-movie.mov">Watch Movie</a><br></noscript>
And last, I write out in a script section a text link to call the javascript function:
<script>document.writeln("<a href='javascript: playVlog("divMyName", "http://quicktime-movie-location/quicktime-movie.mov");'>Watch Movie</a><br>");</script>
If using Wordpress 1.5, you'll need to comment out the following line in the php file wp-includes/default-filters.php:
//add_filter('the_content', 'wptexturize');
Otherwise the above script will be reformated by WordPress and not function.
So here is the code to place into the javascript file:
function showVlog(divName, movSrc, movWidth, movHeight, movAutoplay, movController) { var vlogDiv = document.getElementById(divName); if (vlogDiv != null && movSrc != null) { if (movWidth == null) movWidth = "320"; if (movHeight == null) movHeight = "260"; if (movAutoplay == null) movAutoplay = "false"; if (movController == null) movController = "true"; vlogDiv.innerHTML =" "; } } function playVlog(divName, movSrc, movWidth, movHeight) { var vlogDiv = document.getElementById(divName); if (vlogDiv != null && movSrc != null) { if (movWidth == null) movWidth = "320"; if (movHeight == null) movHeight = "260"; showVlog(divName, movSrc, movWidth, movHeight, true, true); } }And here is a sample entry to place the video in the page (please change it to the correct settings for your quicktime movie):
<div align="center"> <div id="divMyName" onClick="playVlog('divMyName', 'http://quicktime-movie-location/quicktime-movie.mov');"> <img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://image-location/image.ext" alt="Image Title" border="0" /> </div> <script> </script><noscript><br /><a href="http://quicktime-movie-location/quicktime-movie.mov">Watch Movie</a><br /></noscript><script>document.writeln("<a href='javascript: playVlog("divMyName", "http://quicktime-movie-location/quicktime-movie.mov");'>Watch Movie<code><pre><br />");</script> </div>That's generally it. Let me know if you have any questions, see any errors or have any suggestions.
-- Enric
show less...
