Embedding Flash video in your web site
Embedding Flash Video Files
Method 1: Embedd in Swf format
When you use a Flash format for progressive downloading, compress it into .swf format Now all you need to do is embed the Flash player video file into your webpage using the appropriate HTML codes. This simply means that you put the media player code directly into your web page code so that it is displayed on the webpage itself (in the user's browser) instead of loaded into another video-viewing program. To do this, you must insert a special section of HTML code.
HTML Code to Embed Flash Videos
The following are the two HTML tags necessary to embed a Flash media file into a web page: <object>and <embed>. The <object> html tag is for use with Internet Explorer on Microsoft Windows platforms and other browsers that have ActiveX support. The <embed> tag is for most other browsers besides IE, such as Mozilla FireFox browser.
You are welcome to "copy and paste" to make use of the sample HTML code below, but remember to replace the "video-filename" with your own .swf filename and alter the parameters (such as video frame size) to your preferences.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
width="320" height="400" >
<param name="movie" value="video-filename.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
width="320" height="400" >
<param name="movie" value="video-filename.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
Method 2: Embedd in external video source (eg : YouTube video )
One of the most easy ways to embed FLV video into your HTML page is to use the video services like YouTube,. In other words you need to upload your video to the video service and then use the share button and copy the embed code. For YouTube click the Share button under the video, then click Embed and copy the generated html code. It’ll look like the following:
select the embed code and pste in your web page (as given below and the same video is embedded below that code)
<iframe width="420" height="315" src="http://www.youtube.com/embed/ZnehCBoYLbc" frameborder="0" allowfullscreen></iframe>
Method 2: Upload our own video in our sever and use flash players (eg Flow Player )
Flow Player - Open Source video player for your website
Flowplayer is an Open Source video player for your website.
For site owners, developers, hobbyists, businesses and programmers.
if you want to play videos to users or visitors of your web site. If you only want to play videos locally, see the end of this document where local installation is discussed.
The following steps are needed to display videos on your web site:
- Have a web server, or have your web site hosted - install apache web server
- Place the Flowplayer distribution files on the server - download flow player
- Place your video files on the server
- Include Flowplayer in your web pages
The web server is a computer connected to the internet that handles requests for pages from the internet. In its simplest form it only sends pages that are stored as files on the hard disk of the web server. More complex web servers also run programs, such as a user registration application, that interacts with the web site’s users.
You need to download the Flowplayer distribution and place the following files in the zip file on your web server (so not the zip file itself). Choose an easily remembered place as you will place a path to these files later in your web pages:
flowplayer-3.2.12.swf
, the player.flowplayer.controls-3.2.12.swf
, the optional control bar.flowplayer-3.2.11.min.js
, the api.
That is all. Flowplayer is now installed on your web server.(these are the files we downloaded )
and i have copied the flowplayer directory in my web server (C:\AppServ\www\flowplayer )
if your installation is ok click this link http://localhost/flowplayer/example/index.html
here we have used one external flv link (check in index.html page )
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a
href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
style="display:block;width:520px;height:330px"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "../flowplayer-3.2.12.swf");
</script>
if you wnat to use your own video , upload the video to your server and edit the code ( i have uploaded Venice.flv in video directory as shown in figure
<a
href="../video/Venice.flv"
style="display:block;width:520px;height:330px"
id="player">
</a>
-------------------------------------------------------------------------------------------------
and the typical edbedded video will look like as shown below
1 comment:
Yeah this is what im looking for , thanks for the infos
Post a Comment