Videos Playing in Place

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.

One Response to “Videos Playing in Place”

  1. Hidayath Says:

    Hi Enric,

    It was really nice work.I have a problem placing a div element on top of the quicktime video.that is i have a QT video playing and i want a on top the quicktime.
    the depth for the QT is higher even if we sets the Z-index for div.is there any possibilities to over come this overlay of div in quicktime video.

    thanks,
    S.Hidayath