Hints for Video Posting Part 1
Hints for Embedding Video in Blog Posts
(The code examples assume the viewer, of the video, has the required flash plug-in. Most have this, as it is a standard plug in which is provided for free).
Note:
If using this guide for myspace, myspace will add additional attributes. Just let them do this (well you have no choice, if you try to remove them they will add them back). The additional attributes are harmless, they will not prevent the video from playing. Just paste in the minimal code I show here, and then let myspace add their code. So far this has always worked for me.
This guide is designed to use, when the usual methods (of just taking the code they give you and following the instructions of the video site, or sending the code via the video site) do not work for you.
This is an alternate, more versatile method, for posting videos in either blogger or myspace (or other web pages)
The method covered here uses the object tag, and does NOT use an embed tag. Many sites generate code which uses the embed tag, either nested in the object tag, or without an object tag.
I will use the object tag and avoid the embed tag.
Here is a simple code block, which includes the minimum amount of code required, to place a flash video on your blog, which will work in multiple browsers (including IE and Firefox) using the object tag (without the embed tag).
EXAMPLE 1:
[This is a basic example, for this to work you must replace the X with the address of your video/player.]
(You can alter the width and height as needed).
(I did not include a classid. I believe I should need one, but this seems to work without one, and my goal is to start with the minimum code needed, adding additional attributes later).
To make the above work, replace X (both occurrences of X) with the address of the site's video player/video. The arguments needed depend on the specific video player for the specific site. (The reason this is needed in two places is because of non standard compliant browsers).
(I will explain how to find this address value, for a few of the popular video sites, later in this post. It is NOT usually the same address you are using when you view the video on the hosts web site.)
Here is an example using a video I found on myspace:
(I will explain how determined the value, to use in place of X, later in this post).
EXAMPLE 1A:
Here is an example using youtube:
EXAMPLE 1B:
To insert the code (shown above), into my blog, I paste the above code into the blogger editor.
(I tried both the post editor and the html editor. They both worked. However do NOT switch between them while working with the code).
For myspace you can insert the code into any of the provided data boxes, depending on where you want the video to show up.
OR, if you are using an overlay, or some customizing method where you have control over the absolute location of each element on your page, you can do this instead:
You will likely want to modify the top px value, depending what is on your page. You can modify all of the px values.
Here are some links to my results:
myspace video implemented, on blogger: click here
myspace video implemented on myspace: (you will need to scroll down to get to it)
my myspace page
youtube video implemented on blogger:youtube video test
In all of the above cases, I have inserted the complete address of the video (the video itself rather than a web page where the video is displayed with other junk).
To use this technique, you need to be able to determine this address.
Each video site has their own video player, and their own way of accessing it and passing it the needed arguments to play the video.
Hints for determining the web address to directly access a video (and player):
MySpace:
You need the video number. You can find this in the address string used when you play the video on myspace.
When I played the above video, through myspace, it went to this html address:
http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoID=1563789883
I want the number after the "videoID=".
In the above example this is: 1563789883
To access the video directly (without the rest of the stuff on the video page) I use this address string:
http://lads.myspace.com/videos/vplayer.swf?m=I&type=video"
where I=the number of the myspace video.
In my case this:
http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video"
Now I use the above string to replace X in my [EXAMPLE 1](above):
EXAMPLE 1A:
Google Example:
The address to directly access a google video is as follows:
http://video.google.com/googleplayer.swf?docid=D (where D=the docid of the video you want).
To find this docid value, I need to look at the address which google video takes me to after I select my video.
For example; I selected a video which took me here
(it includes my search terms in the address, don't let that confuse you)
http://video.google.com/videoplay?docid=2064435391498284090&q=Disney+Christmas
Notice the docid value in the above address.
Replace the D, in the example above, with this docid value.
i.e.
http://video.google.com/googleplayer.swf?docid=2064435391498284090
Now you have the address string needed to access this video directly. Try it, put the above address into a web browser and see what you get. Notice you see the video, without all the other stuff from the google video page. This is what you (most likely) want to place on your blog.
Now take the code from [EXAMPLE 1]
Now cut and paste this code into your blogger editor and Publish.
To view the result: google-video-test-1
YouTube Example:
YouTube stores their videos here:http://www.youtube.com/v/D (where D=the id for the specific video).
To find the value of D, look at the address in youtube while viewing the video.
For example, I selected a video which took me here: http://www.youtube.com/watch?v=gm_zqcg9onY
The number I want is after the v=.
(Pick any video, go to it, and look at the web address. Notice the number after v=).
I insert this number in place of the D.
http://www.youtube.com/v/gm_zqcg9onY
Try placing the above address into your web browser. Notice what it does.
(Youtube actually converts this to a string, which has the player and passes the file with a bunch of arguments to the player. We could use this long address string, but instead I will let YouTube do this work for me, since it will).
Using my EXAMPLE 1, I start with this:
Now I replace X with my video address, giving me this:
I paste the above code into my blogger edit box giving this result:
youtube-test-1
DailyMotion Example:
This site provides the html code to embed a player (with the video) on your page.
It is way more code than I would use, but if it works for you, why not just use it. It does contain an embed tag (inside an object tag).
However, if you are having trouble with this code, or just want to simplify your code, we can use the same technique we used in the above examples. However we need to find our video id. In this case, the video id is NOT in the web address we are on, when we view the video, making finding it more difficult.
I selected a video which took me to this web address:
http://www.dailymotion.com/visited/search/Hilary%20Duff/video/x4zoy_hilary-duff-someones-watching-over
What I need is this:
http://www.dailymotion.com/swf/2Vfh94CKBjTl1YAa
This is where the video is, and if this address is used, dailymotion will build the needed address string (which is actually quite long, and involves the location of their player which they then pass a whole bunch of arguments to). (If you want to see where dailymotion stores its video player, and how it passes the arguments to make it work, place the above address into your browser and see what it does with it.)
I need to place the above address string into my EXAMPLE 1 as follows:
dailymotion-test-1
Here is the base code, with a video game swf file in it:
I then paste the above code into my blogger post editor hit publish, and I get this:
swf Mario Game
So far this has been tested on 3 browsers and 2 operating systems. So if you are using a browser where this does not work, please let me know.
Placing the Video in a Div
Replace the px values with the height and width of your video. Do this for both the video. Use the same size for the div, if you want to use the div to add a border, or otherwise want your div sized tightly around your video.
The class is optional, but very useful if you now want to add additional style.
If you are putting the video on a myspace page they (the myspace code police) will add additional parameters.
The following style block places a border around the div. It also contains a few lines for positioning (Remove either both or one of them).
To be covered later(or Not): Adding additional param tags to the object for more advanced functionality. (It turned out NOT, no real interest here. Besides, blogger fixed the embed tag bug, and many of the video sites changed the code the generate to use the object tag instead).
(The code examples assume the viewer, of the video, has the required flash plug-in. Most have this, as it is a standard plug in which is provided for free).
Note:
If using this guide for myspace, myspace will add additional attributes. Just let them do this (well you have no choice, if you try to remove them they will add them back). The additional attributes are harmless, they will not prevent the video from playing. Just paste in the minimal code I show here, and then let myspace add their code. So far this has always worked for me.
This guide is designed to use, when the usual methods (of just taking the code they give you and following the instructions of the video site, or sending the code via the video site) do not work for you.
This is an alternate, more versatile method, for posting videos in either blogger or myspace (or other web pages)
The method covered here uses the object tag, and does NOT use an embed tag. Many sites generate code which uses the embed tag, either nested in the object tag, or without an object tag.
I will use the object tag and avoid the embed tag.
Here is a simple code block, which includes the minimum amount of code required, to place a flash video on your blog, which will work in multiple browsers (including IE and Firefox) using the object tag (without the embed tag).
EXAMPLE 1:
[This is a basic example, for this to work you must replace the X with the address of your video/player.]
<object type="application/x-shockwave-flash" data="X" width="320" height="240">
<param name="movie" value="X">
</object>(You can alter the width and height as needed).
(I did not include a classid. I believe I should need one, but this seems to work without one, and my goal is to start with the minimum code needed, adding additional attributes later).
To make the above work, replace X (both occurrences of X) with the address of the site's video player/video. The arguments needed depend on the specific video player for the specific site. (The reason this is needed in two places is because of non standard compliant browsers).
(I will explain how to find this address value, for a few of the popular video sites, later in this post. It is NOT usually the same address you are using when you view the video on the hosts web site.)
Here is an example using a video I found on myspace:
(I will explain how determined the value, to use in place of X, later in this post).
EXAMPLE 1A:
<object type="application/x-shockwave-flash" data="http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video" width="320" height="240">
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video">
</object>Here is an example using youtube:
EXAMPLE 1B:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/pn2aGpje5QA" width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/pn2aGpje5QA">
</object>
To insert the code (shown above), into my blog, I paste the above code into the blogger editor.
(I tried both the post editor and the html editor. They both worked. However do NOT switch between them while working with the code).
For myspace you can insert the code into any of the provided data boxes, depending on where you want the video to show up.
OR, if you are using an overlay, or some customizing method where you have control over the absolute location of each element on your page, you can do this instead:
<object type="application/x-shockwave-flash" data="http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video" height="400" width="430" style="position:absolute; visibility:visible; left:50%; top:1130px; margin-left: -431px; width:430px height:400px;">
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video" />
</object>
You will likely want to modify the top px value, depending what is on your page. You can modify all of the px values.
Here are some links to my results:
myspace video implemented, on blogger: click here
myspace video implemented on myspace: (you will need to scroll down to get to it)
my myspace page
youtube video implemented on blogger:youtube video test
In all of the above cases, I have inserted the complete address of the video (the video itself rather than a web page where the video is displayed with other junk).
To use this technique, you need to be able to determine this address.
Each video site has their own video player, and their own way of accessing it and passing it the needed arguments to play the video.
Hints for determining the web address to directly access a video (and player):
MySpace:
You need the video number. You can find this in the address string used when you play the video on myspace.
When I played the above video, through myspace, it went to this html address:
http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoID=1563789883
I want the number after the "videoID=".
In the above example this is: 1563789883
To access the video directly (without the rest of the stuff on the video page) I use this address string:
http://lads.myspace.com/videos/vplayer.swf?m=I&type=video"
where I=the number of the myspace video.
In my case this:
http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video"
Now I use the above string to replace X in my [EXAMPLE 1](above):
EXAMPLE 1A:
<object type="application/x-shockwave-flash" data="http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video" width="320" height="240">
<param name="movie" value="http://lads.myspace.com/videos/vplayer.swf?m=1563789883&type=video">
</object>
Google Example:
The address to directly access a google video is as follows:
http://video.google.com/googleplayer.swf?docid=D (where D=the docid of the video you want).
To find this docid value, I need to look at the address which google video takes me to after I select my video.
For example; I selected a video which took me here
(it includes my search terms in the address, don't let that confuse you)
http://video.google.com/videoplay?docid=2064435391498284090&q=Disney+Christmas
Notice the docid value in the above address.
Replace the D, in the example above, with this docid value.
i.e.
http://video.google.com/googleplayer.swf?docid=2064435391498284090
Now you have the address string needed to access this video directly. Try it, put the above address into a web browser and see what you get. Notice you see the video, without all the other stuff from the google video page. This is what you (most likely) want to place on your blog.
Now take the code from [EXAMPLE 1]
<object type="application/x-shockwave-flash" data="X" width="320" height="240">
<param name="movie" value="X">
</object>
Now cut and paste this code into your blogger editor and Publish.
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docid=2064435391498284090" width="320" height="240">
<param name="movie" value="http://video.google.com/googleplayer.swf?docid=2064435391498284090">
</object>
To view the result: google-video-test-1
YouTube Example:
YouTube stores their videos here:http://www.youtube.com/v/D (where D=the id for the specific video).
To find the value of D, look at the address in youtube while viewing the video.
For example, I selected a video which took me here: http://www.youtube.com/watch?v=gm_zqcg9onY
The number I want is after the v=.
(Pick any video, go to it, and look at the web address. Notice the number after v=).
I insert this number in place of the D.
http://www.youtube.com/v/gm_zqcg9onY
Try placing the above address into your web browser. Notice what it does.
(Youtube actually converts this to a string, which has the player and passes the file with a bunch of arguments to the player. We could use this long address string, but instead I will let YouTube do this work for me, since it will).
Using my EXAMPLE 1, I start with this:
<object type="application/x-shockwave-flash" data="X" width="320" height="240">
<param name="movie" value="X">
</object>
Now I replace X with my video address, giving me this:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/gm_zqcg9onY" width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/gm_zqcg9onY">
</object> I paste the above code into my blogger edit box giving this result:
youtube-test-1
DailyMotion Example:
This site provides the html code to embed a player (with the video) on your page.
It is way more code than I would use, but if it works for you, why not just use it. It does contain an embed tag (inside an object tag).
However, if you are having trouble with this code, or just want to simplify your code, we can use the same technique we used in the above examples. However we need to find our video id. In this case, the video id is NOT in the web address we are on, when we view the video, making finding it more difficult.
I selected a video which took me to this web address:
http://www.dailymotion.com/visited/search/Hilary%20Duff/video/x4zoy_hilary-duff-someones-watching-over
What I need is this:
http://www.dailymotion.com/swf/2Vfh94CKBjTl1YAa
This is where the video is, and if this address is used, dailymotion will build the needed address string (which is actually quite long, and involves the location of their player which they then pass a whole bunch of arguments to). (If you want to see where dailymotion stores its video player, and how it passes the arguments to make it work, place the above address into your browser and see what it does with it.)
I need to place the above address string into my EXAMPLE 1 as follows:
<object type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/2Vfh94CKBjTl1YAa" width="320" height="240">
<param name="movie" value="http://www.dailymotion.com/swf/2Vfh94CKBjTl1YAa">
</object>
dailymotion-test-1
Here is the base code, with a video game swf file in it:
<object type="application/x-shockwave-flash" data="http://www.flashgamecodes.com/swf/marioRampage.swf" width="512" height="307">
<param name="movie" value="http://www.flashgamecodes.com/swf/marioRampage.swf">
</object>
I then paste the above code into my blogger post editor hit publish, and I get this:
swf Mario Game
So far this has been tested on 3 browsers and 2 operating systems. So if you are using a browser where this does not work, please let me know.
Placing the Video in a Div
<div class="myV1" style="width:320px; height:260px;">
<object type="application/x-shockwave-flash" data="X" width="320" height="260">
<param name="movie" value="X">
</object></div>
Replace the px values with the height and width of your video. Do this for both the video. Use the same size for the div, if you want to use the div to add a border, or otherwise want your div sized tightly around your video.
The class is optional, but very useful if you now want to add additional style.
If you are putting the video on a myspace page they (the myspace code police) will add additional parameters.
The following style block places a border around the div. It also contains a few lines for positioning (Remove either both or one of them).
<style>
{!-put border around div-!}
div.myV1 {border:2px hotpink solid}
{!- Use ONE or NONE of the next 2 blocks -!}
{!- 1:Place Div is absolute location on page-!;
!-change px values as needed -!}
div.myV1 {position:absolute; top:200px; left:50%; margin-left:200px;}
{!-2: Use relative placement if that works better for you-!}
div.myV1 {position:relative; top:0px; left:0px; right:0px;}
</style>
To be covered later(or Not): Adding additional param tags to the object for more advanced functionality. (It turned out NOT, no real interest here. Besides, blogger fixed the embed tag bug, and many of the video sites changed the code the generate to use the object tag instead).
posted by uāāl!ā at Sunday, December 10, 2006
<< Home