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> <CONTRALPANELBTNGLOWCOLRO >0xffff00</contralpanelbtnglowcolro> <controlpanelmode>float</controlpanelmode> <defautvolume>0.8</defautvolume> <isautoplay>true</isautoplay> <isloadbegin>true</isloadbegin> <isshowabout>true</isshowabout> <scalemode>showAll</scalemode> </config> <PLUGINS&G T <logoplugin> <url>LogoPlugIn.swf</url> <logotext>ruo Chi.com</logotext> <logotextalpha>0.75</logotextalpha> < ;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