Literacy Librarian | Main

August 07, 2009

Video Embeding (Autoplay)

Working with media has been a long time hobby for me, and you have to know the ins and outs of saving audio and video files when you're madly being a groupie to a musician and building a rather fanatical fan site.

A lot of people though are wary of working with video because usually what you see when you try working with audio/video is a string of text that doesn't really make sense:

Wha?

If you really want a breakdown of what's involved in embedding video, I'll do my best to explain what that box of gibberish above means (it's so beautiful to a geek like me...)

Ok, I don't claim to know everything but there are some basic components called for in when embedding a video file.

This includes the a player, specifications of the video width and height, controls that you want to show/hide, and the link to the actual video file itself which is ultra important.

Let's take a look at breaking down the gibberish:

embed src="http://www.teachertube.com/embed/player.swf"
This is the default player being embedded. Just as, to go old school, you need a cd player or cassette player to play a cd or cassette, you need some form of player to play a video. Usually this is flash file (.swf). Without this the video may still work, only you get a FULL SCREEN, somewhat pixelated version of it.

width="470" height="260"
Here is where you set the width and height of video in pixels.

bgcolor="undefined"
...and then the background color. I'm not 100% sure, but I thinkyou can use "#hexcode" to change (bgcolor="#bfbfbf") ???

allowscriptaccess="always" allowfullscreen="true"
Um....options to change smaller screen size to full screen I think.

flashvars="file="http://www.teachertube.com/embedFLV.php?pg=video=114176
Each video is given a specific link, code or number. This link is where the computer goes to play the video or where it goes to load the video in the player.

Try copying and pasting a link in a web browser to see if it is a video. If it loads, that's what you want to paste in the section above (you'll need to do it twice, see below). And chances are, it's a huge full screen video, which is why....hi! In the section above you specify that you want a predetermined player to load first and the video contained within it.

&menu=false&frontcolor=ffffff&lightcolor=FF0000
Not too sure what this is, but likely menu and color specifications for something

&logo=http://www.teachertube.com/www3/images/greylogo.swf
Insertion of logo. Teachertube logo color can't be changed. note it's "greylogo"

&skin=http://www.teachertube.com/embed/overlay.swf
Specification of "skin" to use, kinda like the look of the player. Includes controls, volume, full screen options. All the little things you see that are clickable. (Try copying and pasting the link to see what the skin looks like, kinda cool).

&volume=80&controlbar=over&displayclick=link&viral.link=http://www.teachertube.com/viewVideo.php?video_id=114176
volume and control bar specifications. link to video file again. If you are copying and pasting your video, be sure to copy and paste it a second time here

&stretching=exactfit&plugins=viral-1&viral.callout=none
specify positioning of video, plugins

&viral.onpause=true" />
specify autoplay, change to false to make autoplay on load.

And there you go, a quick breakdown of embed code which is how you embed videos given the Teacher Tube embed code!

Good luck!


Posted by Cathy at August 7, 2009 03:39 PM