Walker News

How To Embed FLV Flash In WordPress or HTML

Copyright © Walker 11 Jan 2008 03:56
You could embed FLV flash video in HTML by referring to the template of code below.

For example, you only have to replace the red colour text with the URL of your own FLV video. The blue colour text refers to JW Media Player that “play” the FLV video file – replace it with the URL pointing to yours (if you’ve one), otherwise leave it as this.


The sample HTML code used to embed FLV video
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="480" height="360"><param name="flashvars" value="file=http://www.walkernews.net/wp-content/uploads/2008/01/LionLove.flv&image=http://www.walkernews.net/wp-content/uploads/2008/01/Lion-Hug-Rescuer.JPG" /><param name="movie" value="http://www.walkernews.net/mediaplayer.swf" /><embed src="http://www.walkernews.net/mediaplayer.swf" width="480" height="360" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.walkernews.net/wp-content/uploads/2008/01/LionLove.flv&image=http://www.walkernews.net/wp-content/uploads/2008/01/Lion-Hug-Rescuer.JPG" /></object>

How to embed FLV video in WordPress or New Blogger?

After replacing the text in red colour text and blue colour (optional) at the above, copy and paste it to the blog post editor while you compose an article with your own flash video!

If you copy the code directly to your post, you’ll see this video playing:-

Update:

1) Upload the mediaplayer.swf file to your blog directory, i.e. the directory where the wp-config.php is kept, if you don’t know what is this “blog directory” I am referring to. How to upload it? Well, how do you upload the WordPress core files (e.g. wp-config.php)?

2) Login to your blog and write/compose a new post. Suppose you’re going to show off a flash video in this “new post”, click the Add Media button to upload it. The Add Media button is one of the upload/insert buttons which you normally click Add An Image button to insert pictures into the blog post.

3) After upload completes, look for the Link URL text box. Below it, there is 3 buttons, click the File URL button to have WordPress fill up the Link URL text box. Copy whatever inside the Link URL text box to replace all the red-color text in the sample code above.

4) Optionally, upload a screenshot of the flash video and replace the yellow-color text with the Link URL of uploaded image. If you don’t want to use this feature, delete all the yellow-color text, please.

5) Lastly, replace the blue-color text in sample code with your blog domain.

Suppose you have done the steps correctly, your self-hosted flash video shows be showing off to the world now, as this one showing here that using the sample code above:

Do not copy the sample code and paste it directly to your post without replace the colourized-text. It won’t work in that way, because I disable the hotlinking to prevent you and most other people from using my hosting bandwidth :-)


(This FLV video is copied from YouTube – refer to How to retrieve YouTube Video from the cache folder in IE and Firefox?)



More reference on this topic:

Embedding Flash Video into a Web Page
Macromedia Flash OBJECT and EMBED tag syntax
Flash Satay: Embedding Flash While Supporting Standards
Flash in HTML


Howto, Internet, Codec, Embed, Flash, FLV, Howto, HTML, Jeroen Wijering, Media Player, Wordpress


» How To Play WV File Or WavPack Media File?
» How To Copy YouTube Video or FLV File From Google Chrome Cache Folder?
» WordPress: Adds wp-caption-text To CSS File For Image Caption Styling
» How To Change WordPress Image Caption Text Style To Superscripts?
» Favicon: How To Create A Website Icon For A Blog?
» Windows Media Player: How To Embed WMV File In HTML Code?
» YouTube Downloader: Download YouTube Video For My Mom!

Custom Search

« Plain White T Write You A Song For Valentine
» Access Google Search In Other Local Domain
  1. Nik April 14th, 2008 7:44 AM

    Could you please specify how to add an image to this embedded player (snapshot for video).
    In a similar script it was done with the line

    s1.addVariable(”image”,”FILELOCATION.jpg”);

    how would that be in this case?

    Thanks!

  2. Walker April 14th, 2008 11:24 AM

    Hi Nik, you may use JW Media Player (refer to the post) where the Javascript will able to do that for your case.

    (The code template that I’ve outlined is HTML style and thus less features).

    Please refer to my correction on the next comment.

  3. Walker April 14th, 2008 12:31 PM

    Hi Nik, sorry for misleading info, I might be too tired :-(

    By using JW Media Player, you could also include the snapshot / preview image of the FLV video clip by simply including the ‘image’ flashvar to that HTML-style of code (i.e. without having to use a Javascript), i.e.

    ......param name="flashvars" value="file=http://walkernewsdownload.googlepages.com/Lion-hug-Rescuer.flv&image=http://walkernewsdownload.googlepages.com/WalkerNews-Feed.jpg"......
  4. bachhoakhai May 12th, 2008 9:46 PM

    Hi Nik, it run. But…how i can make it to show a playlist of these file I’ve linked

  5. John May 16th, 2008 3:00 PM

    How could I get this to autoplay?

  6. John Morris June 27th, 2008 12:49 AM

    Walker:

    Very helpful thread. Now that I can access the FLVs via HTTP and the Object embed, how can I create a “wrapper” SWF player in which to play the files? I want to create a “branded” player. (Obviously, I don’t know much about Flash).

    Thanks – John

  7. Walker June 27th, 2008 1:05 AM

    Hi John, do you mean to create flash player of yourself?
    To be frank, I know only little about creating flash movie. So, I can’t help you on this.

  8. John Morris June 27th, 2008 1:48 AM

    I want to generalize the code as much as possible which I can probably do by creating a .js file of the enbed object code and pass the name of the target FLV file in as a parameter. I want to use a single code base to access a library of FLV files. The “player” (the single_video_player.swf) file is what I was really referring to. I want to create a new one with some additional controls and branding. Since I’m not a Flash expert by any means, I wondered if you had advice on creating the SWF player.

    Thanks – John

  9. How To Extract Audio Music From A Video Clip In Windows Movie Maker - Walker News June 30th, 2008 10:35 PM

    [...] short flash video showing a simple trick on how to do [...]

  10. How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5? - Walker News June 30th, 2008 11:51 PM

    [...] just upgraded or is running WordPress powered blog for the first time, do you know that WordPress allows author to edit or rewrite the post slug to a search engine friendly [...]

  11. World Time Clock: How Many Time Zones Are Used In USA Or Russia? - Walker News July 14th, 2008 2:38 AM

    [...] too hard for you to visualize the world clock on the world map, you may refer to this simple Shockwave Flash gadget provided by [...]

  12. QueenEve July 21st, 2008 4:28 PM

    hi walker
    How can i change the skin , i want to add a different skin that has more buttons is there a way to do it
    Thanks

  13. WordPress 2.6: What Does The Commenter IP Tells? - Walker News August 18th, 2008 12:04 AM

    [...] those who are using WordPress powered weblog, do you click the commenter IP address each time before approving it? If you never [...]

  14. paul September 17th, 2008 10:43 AM

    hi there, i have 1 problem in the code at the top, when i copy and paste the code, the video didn’t play..i already change the URL of the video, but nothings happen.. this is my example “URL:http://localhost/request/DK.flv” please someone here to help me, this is for my thesis..

  15. Walker September 17th, 2008 9:53 PM

    Hi Paul,

    do you have a copy of JW Media Player (i.e. the mediaplayer.swf) in your local web server?

    If you do, you should also replace the URL of mediaplayer.swf (written in light-blue text) to test all in local web server.

    If you doubt the local web server working, just place the the URL you’re using in web browser Address bar (I think the working web server will prompt you to download).

  16. Chris November 28th, 2008 2:38 AM

    Is there any way to get the player to autoplay?

  17. How Easy To Change WordPress 2.7 Post Permalink With Post Slug - Walker News December 16th, 2008 12:53 AM

    [...] / truncation logic). If you have a reason to change the default “Pretty Permalink”, WordPress allows you to edit or change the permalink, just as you [...]

  18. Vince January 28th, 2009 10:43 AM

    Thanx for the code. I saw this code a while back but I never needed it until today. I’m starting a new site and the wordpress theme I am using only excepts this one without showing code on home page. All I need to do now is figure out how to get the full screen access turned on. Thanx again.

  19. Darius February 25th, 2009 2:36 PM

    Copied and pasted the code and it worked fine except that it doesn’t allow full screen. How do I enable full screen viewing?

  20. Walker February 26th, 2009 12:45 AM

    Try set the allowfullscreen to true (my sample code above doesn’t include this), e.g.

    ......param name="flashvars" value="file=http://walkernewsdownload.googlepages.com/Lion-hug-Rescuer.flv&allowfullscreen=true"......
  21. Tracy February 28th, 2009 11:25 AM

    I’m trying to add a flash player to my site. I’m self-taught, so i tend to intermingle different types of code. i’ve tried a few different versions of code for players, yours included, and I have the same problem every time, – I can’t hear any audio. Is there a common mistake I’m making that you can think of?

  22. Walker February 28th, 2009 11:42 AM

    HI Tracy, have you tried to browse the page embedded with flash on different PC or different browser?

  23. Tracy February 28th, 2009 2:12 PM

    yes, I’m on a Mac, so initially I thought that was the problem, and had my friends go to the link too. No audio in any browser…

  24. manwith March 1st, 2009 4:16 AM

    Hi ,

    I am trying to add this code in php file and I am not able to

    Can anyone help me out with it

  25. Gneteel March 19th, 2009 5:15 PM

    Hello,

    i’ve been racking my brain over embedding my own videos with my own flash player. my question is how do i make a video URL such as youtube, and how can i make a video id such as youtube?

    can anyone help? I appreciate it.

  26. mike April 17th, 2009 3:19 AM

    thanks man …helped alot…got it working…replaced the player on my server….all is well…much respect!!

  27. Walker April 18th, 2009 3:35 PM

    Thanks JW Media Player!

  28. How To Embed SWF File Or Shockwave Flash Object In Microsoft Word 2007? April 24th, 2009 1:29 AM

    [...] 01:29 How do you open SWF file or Shockwave Flash game? Well, if you able to watch YouTube or any flash video embedded on a web page, most likely you could open the SWF file with that web browser. But, people seldom receive SWF [...]

  29. Paul April 30th, 2009 9:01 PM

    Thanks to your guidelines I have included a “flv’ video file to the site – after much heartache I will admit – the main problems encountered on the way was getting a suitable swf file. It works fine in safari and firefox on mac osx and ie but firefox on windows has a problem ??? I am still looking at this (the site is under development obviously if you look).

    What I really want to know is the params or flashvars to turn off the controller – I have tried “name = controller value=false” but it does not seem to have any affect. If you have a list of params that apply to your swf it would be appreciated.

    All in all it is great and simple – thanks again.

    Paul

  30. Anis uddin Ahmad June 4th, 2009 2:30 AM

    Thanks man.
    Thanks for the straight-cut solution. :)

  31. Ziah J June 15th, 2009 10:20 AM

    Hey thanks much for the tutorial. I’m having troubles though and want to know if you can help me out. What if I want to host the video in the same directory as my blog but then embed it on the blog itself? I’ve tried using your code and it just shows the code in the preview….no video. So let me see if I can make what I’m trying to do a bit more clear. I’ve uploaded the video to the same public_html directory and just want to post it live on my blog. What would be the correct way to go about doing this? Thanks in advance.

  32. Walker June 16th, 2009 4:32 AM

    Please take note that the block of code in the post is referring to files hosted at Google Pages, which imposes quota of bandwidth per month. I.e. it won’t work if the bandwidth limit is hit.

    For your case, you should host the mediaplayer.swf file too instead of using mine copy at Google Pages. Note, you need to update the path to video and mediaplayer.swf accordingly.

  33. Sridhaarr June 19th, 2009 12:03 AM

    Hi ,
    I am using above code to dynamically add flash to my page by appending object tag to div.But I need to save this into database.While iam using div.innerhtml iam not getting
    flash vars value.I am getting like this
    “”
    How can i get this value.Any help appreiciated?

  34. dee June 27th, 2009 2:58 AM

    Helppp!

    I created a banner in Flash and saved it as a swf. How can I upload it ( the new banner) into wordpress to replace the old one?

    Thanks

  35. Walker June 28th, 2009 7:36 PM

    I have just updated this post today:

    1) The block of code is now using my own hosting server instead of Google Pages.

    2) The revised steps.