enric wrote this 6:48 am:
Below is a tutorial on coding quicktime video to play
in place (without opening a new web page or refresh) on your site. The videos don't load until specified by a javascript call. To see
videos playing in place, visit my Cirne site and try out the video
entries.
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 Steve Garfield's Video Blog and this is what I came up with. The code and
procedure is a bit complex due to the limitations of javascript. So a mistake in typing can easily cause failure. If there's better
techniques, please let me know.
1) 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:
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:
2) 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.)
3) Writing the vlog. First activate the javascript file
by putting it as the first entry:
Since RSS aggregators will organize each entry as
seperate, the call to the javascript file will need to appear into each vlog entry.
4 Then I place <a href...>
link code within a <noscript> tag. The <noscript> tag serves two purposes: 1) If scripting is disabled, it allows the user to
start the movie from the link inside the <noscript> tag and 2) RSS engines will format the first visible <a href...> pointer to
a media resource as an enclosure:
5) Now to call the javascript
movie function. First create a <div> with a unique <id>:
6) Then put in a <img> tag within a <span> container. The
<span> tag has a <onclick> event call to the javascript function to replace the div area with the specified movie. The
<img> tag has a style="cursor: pointer;", so that the cursor becomes a pointer when entering the image to indicate it's a clickable
area:
7) And last, I write out in a script section a text link to call the javascript movie
function:
8) 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 link
correctly.
So here is the code to place into the javascript file:
And here is a sample entry to place the video in the page (please change it
to the correct settings for your javascript file location and quicktime movie):
That's generally it. Let me know if you have any questions, see any errors
or have any suggestions.
-- Enric
Update 2/27/06: The "Writing the vlog" and the "sample
entry" above previously had errors. They should be correct now.
Filed under: 
1 Comment