Embed FLV video broadcast in HTML

1,flv Introduction

FLV is the abbreviation for Flash video, and the FLV streaming format is a video format developed with the launch of Flash MX. Because it forms a very small file, loading speed is very fast, so that the network to watch video files become possible, it is effective to solve the video file import Flash, so that the export SWF file size, can not be good use of the network and other shortcomings.

FLV is a new streaming video format that leverages the widely used flash Player platform on a Web page to integrate video into Flash animations. That is, visitors to the site as long as the Flash animation can be seen, nature can also see the FLV format video, without additional installation of other video plugins, the use of FLV video has brought great convenience to video transmission.

My understanding is that the browser installed Flash plugin can be implemented for the SWF file barrier-free playback, but the general SWF file is very large, in the network transmission environment has a great disadvantage. The principle of FLV playing in a Web page is to use the SWF file to build a shell and then use the shell to play a small compressed FLV file.

2,flv player

I'm using VCASTR3 in the project this time.

Vcastr3.0 is an open source FLV online Web Player plugin that can be defined in many things. This article is mainly used to record the novice use of the process from scratch, after a deep understanding can be supplemented.

1) Download the vcastr3.swf and find it from the compression package below.

Http://vcastr.googlecode.com/svn/trunk/vcastr3/beta/example/example.zip

2) Add the address of the SRC write player of object and embed,embed to the webpage.

var videowrapper = $ (' #videoWrapperId '); var videohtml = ' <object classid= ' clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 "codebase="/HTTP/ Download.mabartransparent=100&cromedia.com/pub/shock wave/cabs/flash/swflash.cab#version=6,0,29,0 "height=" 2 "Width=" 480 "> ' +                                                 ' <embed src=" cdn/video/vcastr3.swf "quality=" High "pluginspage="/http Www.macromedia.com/go/getflashplayer "type=" Application/x-shockwave-flash "width=" 480 "height=" "style=" margin-top:29px; " > ' +                         ' </embed> ' +                     ' </object> '; videowrapper.html (videohtml);

3) Create a vcastr.xml file in the same path as the Web page to configure the player.

<vcastr> <channel> <item> <source>http://vcastr.ruochi.com/video/happy_feet.flv</source><duration></duration> <title></title> </item> <item> <source>http://vcastr.ruochi.com/video/happy_feet.flv</source><duration></duration> <title></title> </item> <item> <source>http://vcastr.ruochi.com/video/happy_feet.flv</source><duration></duration> <title></title> </item> & lt;/channel> <config> <buffertime>4</buffertime> <contralpane                Lalpha>0.75</contralpanelalpha> <controlpanelbgcolor>0xff6600</controlpanelbgcolor> <controlpanelbtncolor>0xffffff</controlpanelbtncolor> &LT;CONTRALPANELBTNGLOWCOLRO >0xffff00</contralpanelbtnglowcolro> <controlpanelmode>float</controlpanelmode> <defautvolume>0.8</defautvolume> <isautoplay>true</isautoplay> <isloadbegin>true</isloadbegin> <isshowabout>true</isshowabout> <scalemode>showAll</scalemode> </config> &LT;PLUGINS&G                T <logoplugin> <url>LogoPlugIn.swf</url> <logotext>ruo Chi.com</logotext> <logotextalpha>0.75</logotextalpha> &lt ;logotextfontsize>24</logotextfontsize> <logotextcolor>0xffffff< /logotextcolor> <textmargin>10 Auto Auto 10</textmargin> < Logoclipurl>http://www.ruochigroup.com/images/logo.png</logoclipurl><logoclipalpha>1</logoclipalpha> <clipmargin>10 Auto Auto</clipmargin> </logoplugin> <beginendimageplugin> <url>beginendima Geplugin.swf</url> <source>beginSwfTest.swf</source> <t Ype>begin</type> <scaletype>exactFit</scaletype> </beginendi                Mageplugin> <javascriptplugin> <url>javaScriptPlugIn.swf</url> </javascriptplugin> </plugins></vcastr>

Use the following "." Describe the XML tree structure and describe the role of the parameter

Film Information

Channel.item

Movie information, you can set up multiple movies

Channel.itme.source

FLV movie address parameter, this parameter is the only parameter that must be, other parameters can not, the player has default parameters

Channel.itme.duration

The total time corresponding to the movie, in seconds, because some of the film in the production process of time information is lost, can be set here

Channel.itme.tilte

Title of the corresponding movie

Channel.itme.link

The link after the movie click

Player settings

Config.buffertime

Time in the cache movie, Unit is seconds

Config.contralpanelalpha

Control bar transparency, between 0-1

Config.controlpanelbgcolor

The color of the control bar background

Config.controlpanelbtncolor

Control the color of the button

Config.contralpanelbtnglowcolro

Control the color of the button glow

Config.defautvolume

Default sound size, max 1, minimum 0

Config.controlpanelmode

The display mode of the control bar,
"Float": The default floating mode, the mouse to remove the player will be hidden away
' normal ': Normal mode, at any time at the bottom of the movie floating display
"Bottom": Lower mode, does not float above the movie, but is displayed below the movie
"None": the Player control bar is not displayed

Config.isautoplay

If the movie automatically starts playing, the default is True

Config.isloadbegin

Whether to read the movie from the beginning, the default is True

Config.isrepeat

Whether to loop the movie, Silence is False

Config.isshowabout

Whether to display information about

Config.scalemode

Movie Zoom mode:
"ShowAll": you can see all the movies, keep the proportions, maybe up or down or around
"Exactfit": shrinks the size of the movie to the player, which may be disproportionate
"Noscale": The original size of the film, no retraction
"Noborder": Movie full player, maintain proportions, may be cropped

Plugin settings

Each child node in the PlugIns represents a plug-in that can be set up with multiple plugins

Plugins.logoplugin, display the parameter settings of the logo plug-in PlugIns.logoPlugIn.url

The address of the plug-in, you can use the absolute address, you can use the relative address, absolute address needs HTTP//start

PlugIns.logoPlugIn.logoText

Logo text, attention can be used in English and English punctuation, do not support Chinese, if you want to put Chinese, the Chinese text PNG transparent image, with the PLUGINS.LOGOPLUGIN.LOGOCLIPURL parameter settings

PlugIns.logoPlugIn.logoTextAlpha

Transparency of text

PlugIns.logoPlugIn.logoTextLink

Connection of text

PlugIns.logoPlugIn.logoTextFontSize

Size of text font

PlugIns.logoPlugIn.logoTextColor

The color of the text

PlugIns.logoPlugIn.textMargin

The position of the text, with the CSS margin concept, four values represent the distance between the lower right and left relative to the player, four values separated by a space, do not need to specify the value of "auto" to fill out, such as the top left and all have 10 pixels distance can write "Ten auto auto 10″, the bottom right corner is" au To ten Auto "

PlugIns.logoPlugIn.logoClipUrl

Image logo URL, you can use absolute address, can also use relative address, absolute address needs HTTP//start

PlugIns.logoPlugIn.logoClipAlpha

Transparency of Image logo

PlugIns.logoPlugIn.logoClipLink

Connection of Image logo

PlugIns.logoPlugIn.clipMargin

Image logo location, with the CSS margin concept, four values represent the distance between the lower right and left relative to the player, four values separated by a space, do not need to specify the value of "auto" to fill, such as the top left and all have 10 pixels distance can write "Auto auto 10″, right bottom corner alignment Is "Auto Ten auto"

Plugins.javascriptplugin,javascript control plug-in parameter settings

PlugIns.javaScriptPlugIn.url

The address of the plug-in, you can use the absolute address, you can use the relative address, absolute address needs HTTP//start

JavaScript plugins

Use the method to see the instance page
Http://vcastr.ruochi.com/v3/vcastr_javaScript_example.html

JavaScript can control player playback, pause, stop, fast forward, rewind, Next, previous, volume control, movie jump to required time
In JavaScript can get the event of the player, there are four parameters back, namely Type: Event Type, state: Current status, Phayheadtime: Current play time, loadpersent: Download percentage

Event Type has
StateChange, play status change, play or pause
Complete, play over
INIT, player initialization complete
Ready, Movie download part, already can start to play
Playheadupdate, every second is sent once
Startbuffering, start buffering.
Stopbuffering, end of buffer

Status state
Playing, in play
Paused, pause in

Beginendimageplugin the start and end of a movie requires a plugin that loads an external resource (which can be a picture or SWF) BeginEndImagePlugIn.logoPlugIn.url

Plug-in address, you can use a relative or absolute address, Absolute address needs HTTP//start

BeginEndImagePlugIn.logoPlugIn.source

The beginning of the picture or the address of the SWF

BeginEndImagePlugIn.logoPlugIn.type

Display mode, 3 display methods, begin: At the beginning of the display, end: The end of the display, Beginend: At the beginning and end of the show

BeginEndImagePlugIn.logoPlugIn.scaleType

"ShowAll": you can see all the movies, keep the proportions, maybe up or down or around
"Exactfit": shrinks the size of the movie to the player, which may be disproportionate
"Noscale": The original size of the film, no retraction
"Noborder": Movie full player, maintain proportions, may be cropped

Embed FLV video broadcast in HTML