Embed FLV video in HTML

Embed FLV video in HTMLA “Video” is an essential element for many websites today. Unlike in early days, the usage of videos have significantly increased among internet users and the websites today. People tend to watch and react for videos very much than the usual static images. The availability of high speed internet connections and the many number of free video sharing websites like Youtube have made people to watch videos regularly. So as a webmaster, if you are not making use of videos in your website, you are losing many additional benefits you can get from your website.

When embedding videos in a website, you will have two options to select from.
  • Hosting your videos with a free video sharing website like “youtube.com”. 
  • Hosting in your own web server.
The main focus of this article will only be on the second option. We are discussing how to embed a video in your website which is hosted on your own web server.

Also, note that we are specifically talking about embedding FLV videos only.

We know that with HTML5, a new tag for embedding videos was introduced to embed videos in your websites. That is very easy to use and you can find many articles in internet for HTML5 video embed code samples. But the bad thing about this great HTML5 video tag is, you can't use this tag to embed FLV videos in your website. So definitely you will have to go for an alternate solution, and in this article I will show you a nice script which you can use to embed FLV videos easily in your HTML website.

To embed FLV videos, we are using a swf file which can be downloaded from the following URL.

code.google.com/p/youplayer/downloads/detail?name=mediaplayer.swf 

Download the above file and place it in your root directory, or the directory you have uploaded your FLV videos. I recommend to keep your FLV videos and this .swf file in the same directory.

Now, in your web page where you would like to embed the FLV video, you can paste below code. Make sure that you change the file paths correctly.
<embed allowfullscreen="true" height="250" src="/videos/mediaplayer.swf?file=my_video.flv" width="400"></embed>
 
The output of the above code will be as shown below;

Embedding FLV video in HTML
 

According to the above example code, the “mediaplayer.swf” is uploaded to the 'videos' folder, and my FLV videos are also in the same directory. I can now simply call the flv video file only using its name 'my_video.flv' since both the video and the .swf file are in the same location.

Even though we have discussed only about FLV videos here, you should know that this method can be used to embed any other common video formats in your website. This method is very useful when inserting FLV videos, since the native HTML5 tag doesn't support FLV.

I hope my article was helpful to you. If you find any errors or mistakes in my article please feel free to correct me :) 

Embed FLV video in HTML, FLV Html5, HTML video embed

0 comments :

Post a Comment