Video Sharing Sites like Youtube or Google video provide simple HTML code for embedding their video clips in your web pages. But sometimes we want to add raw Flash Video files like SWF animations or FLV [streaming or progressive] which are frequently used by News or media websites.
Now to embed flash video files, you can either download the flv or swf flash video to your hard drive, convert it to avi, wmv or mov format and then upload it to your Youtube account. Then you can use the Youtube supplied HTML code to embed that video in your webpage or blog. The video will play wrapped inside the Youtube or Google Video player skin.
The above approach works but is clearly not the best way to do things. What if the original video is updated - then you will have to revisit the whole encoding-decoding cycle again. Secondly, there will be considerable loss in video quality when it is converted from one format to another and Youtube is definitely not the best place to see high resolution video clips. They will degrade it to 320x240 size clip.
So here's a very easy way for embedding flash videos in your website without loosing any quality. Also you won't have to download the video to your own server - you can embed the flash video player in your site and it will stream the video [or play directly] from the source website [you might want to obtain permission from the content host since you will be consuming his bandwidth]
To do this, just copy-paste the following HTML snippet in your blog template and replace the height, width and streamName parameters with real values [you can find the video size (dimensions) and URL of the flash video by looking at the HTML source code of the webpage where the video is originally embedded]
Incase you would like the video to start only when the site visitor hits the play button, replace autoPlay=true with autoPlay=false. Once the video track finishes playing, the cue marker would return to the original position. You can disable this by setting autorewind=false.
Here's a real world example - this flash video is hosted on an external news website in flv format but has been embedded in this site using just the above HTML code. See the video player skin is non-branded and looks more sleek and professional.
Reader Comments:
Is this legal?
As I mentioned in the post, take permission from the content provider - if he agrees to streaming his content on your blog, it should be fine I guess.
But yes, we definitely have to look at the legal angle more carefull before streaming anyone's content on our own sites since it's also consuming his bandwidth.
this is a really cool code..thx for sharing
Thanks! This is just what I want - I tried it in my blog test and although it worked it took ages to satrt and - IEo said that there was an script causing IE to run slowly - would I like to stop it? Even with this message up, the .flv started playing behind, and clicking 'yes' to stop the script means the video carries on playing or 'no' slowed IE right down again!
Firefox just gets stuck waiting for geekfile.googlepages.com...
see http://funnytruth.blogspot.com/
Any ideas what that script problem is ?? thanks
This is a great bit of code.
One thing that would make it a lot better is if the video didn't start downloading until the user pressed play, since someone visiting the page but not wanting to watch the video is just wasting bandwidth. As it is it seems the play button doesn't even appear until the video has started downloading.
I tried the code with my own hosted flash and get the video to play...but I cant seem to get the CONTROLS (Stop , Play etc...) to show up...do I need to chang the code to reflect that?
So all I get is the video without anyway to control it.
Help!
it appears on most sites with the streaming .FLV files they are pre-loaded in some sort of javascript or other player skins therefore not showing the true URL of the .FLV source on the server any options or prog as to where to find the source? Doesnt make much sense to use this awesome code if you have to rip the video then upload to replay...thanks again for all your amazing info and hacks..~M
Fantastic little code man. Big props for that, it works no problem but is there any way to get this to work with SWF and not just FLV ?. Reason being is there's not many decent FLV hosts out there without having to pay big bucks. There's quite a few SWF hosts.
Dear Amit,
Thanks for the code. It works just fine for my son's blog.
Cheers!
Meng Yong
I'm hoping someone can help me out. I've tried copying and pasting the code but get nothing. The flash video file is here:
http://www.realweddingvideos.com/tiffanijasoncere.flv
and its dimensions are 352 by 240. Can anyone come up with the exact code to make this work? Thank you!!!
Is the source for the player meant to be used in this way? I have been trying to find a good, flash embedded player to put on my blog but could only find wimpy wasp which isn't free.
http://www.wimpyplayer.com/products/wimpy_wasp.html
Hi , Is there any way that you can actually see where the source file of the flv is played from ??If you want embad a flv in your blog.
Can i get your advice on ragula_2000@indiatimes.com
I can't figure out where the code ends <----Place code here----> would have been a good idea, and let us view your example below. I'm not dumb, just not as up to speed as others in some areas.
hi just wonder where in the blog template should the snippet be inserted to?
Also does it mean that the entire blog site can only has one embedded video since there is only one video url link in the snippet.
Thanks.
Lay Kock :-)
does it work with youtube's video ? and with wmv ?
thanks for the code. it finall works after i tried many different ways. however, i was wondering if we can change the skin. as i can recall, when creating the swf in flash, we can select skin and it will be exported as another swf file. i tried calling it directly by chaning the above skin path to that swf but did not work. Any hint? Thx.
Tried many different ways again using your script and create my own skin and flvpaly.swf but after posting it at my blogspot, still doesn't seem working as good as using the path to your skin and swf as base for my flv. Appreciate any hints....is it something about the crossdomain.xml?
After trying all different coding, i think yours is the best. maybe my skill is still not up to standard ;p
cheers.thx.
The skin is loaded from an external swf.
Player:
http://geekfile.googlepages.com/flvplay.swf
Skin
http://geekfile.googlepages.com/flvskin.swf
Is there a way to set the frame that shows before the video is played. Say, for example, I need to display the frame from 1:20 of the video as the still frame. Is this possible?
Thanks,
Alex
I had some problems embeding the flv on my site, it played localy but when I tried to play it on my website it didn't work. After few days I found out that .flv extension wasn't included in MIME types on my server. I hope this'll help to someone because I spent hours and hours trying to correct this.
Bye
This is a really cool little thing, but it would be improved enormously if there was a way to pass a parameter with the number of seconds that the .flv file should be buffered. this would help large files stream more smoothly.
I am trying to embed this to my blog - http://news.yam.com/view/video.php?m=tvbs&v=E20070524-05
I thought it was a .swf file when I looked at the page source. Turns out it is .wmv What code should I use to make it post on my blog?
Thanks!
The player swf isn't legal .. its a copy of a commercial one by the same name. Would have been nice to put that right up front in the article
thanks for this! it worked on ie. downloaded the player and skin and uploaded to my own website..
How do you get the video to keep looping over and over??
Please let me know.
hi.
this post very usefull for me. I tried on my blog and it is worked.
and I found other skins clear-flvskins and halo-skins.
I tried to do fullscreen but I didn't
I need to do fullscreen function how can I do that. thans.
No comments:
Post a Comment