Web broadcast videos flash controller produced Xiangjie

Posted by john

7/26/2007

Related Tags:
web standards

Shanba see this in the flash players, want to download from its source studies for its own use and did not expect Shanba has been done to prohibit download. For a few days of online search, in addition to several relevant information, there is no source download, and no examples explain. Be unable to resist temptation, but their references personally wrote. This flash video playback controller used Shanba player interface, code written entirely personally.

First, we look at the flash player controller interface (very simple html code, but not their source a) definition of style:

<style>
Body, td, button (font: normal 12px Tahoma; color: # 333333; text-align: center)
. Drag (position: relative; cursor: hand)
Button (border: 1px solid # 333333; background: # EEEEEE; margin: 2px; font-family: Webdings; height: 20px)
Div (cursor: default)
# Menu (margin: 3; line-height: 20px; border: 1px solid # dedede; background: # FFFFFF; display: none; position: absolute)
# Menu a: link, a: visited (border: 1px solid # FFFFFF; background: # FFFFFF; text-decoration: none; display: block; padding: 0 3; margin: 1; color: # 333333; cursor: default; text-align: left; text-indent: 15px)
# Menu a: hover (background: # dedede; border-color: # 666666; color: # 000000)
# CtlButtons IMG (behavior: url (rollover.htc))
</ Style> quoted Driver: <script src="play.js"> </ script> Following is flash video playback and control interface code: <div oncontextmenu="return false" onselectstart="return false">
<div Style="padding:0">
<table Border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr> <td>
<Object id = "movie" classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000" codebase = "http://download.macromedia.com/pub/ shockwave / cabs / flash / swflash.cab # version = 7 , 0,0,0 "width =" 550 "height =" 400 "align =" middle ">
<param Name="movie" value="about:blank" />
<param Name="quality" value="high" />
</ Object>
</ Td> </ tr> </ table>

<table Style="width:550px;height:35px;vertical-align:bottom" cellspacing="0" cellpadding="0" border="0">
<tr>
<td Style="">
<table Style="border:0px solid #333333;width:90%;" cellpadding="1" cellspacing="0">
<tr>
<td Style="text-align:left;vertical-align:left;background:url(bg.gif);height:8px" onMouseDown="Jump(total*event.offsetX/421|0)">
<div Id="bar" style="width:0%;font:3px;height:3px;background:#00FF44"> </ div>
</ Td>
<tr>
</ Table>
</ Td>
<td Style="text-align:right;width:50px;font:11px Tahoma" id="frameCount"> </ td>
</ Tr>
</ Table>
<span Id="ctlButtons">
<img OnClick="Rewind();" title="跳至第一帧" text="9" src="images/button/dd1.gif" hoverSrc="images/button/hh1.gif">
<img OnClick="Back();" title="快退" text="7" src="images/button/dd2.gif" hoverSrc="images/button/hh2.gif">
<img OnClick="Play();" title="播放" text="4" src="images/button/dd3.gif" hoverSrc="images/button/hh3.gif">
<img OnClick="Pause();" title="暂停" text=";" src="images/button/dd4.gif" hoverSrc="images/button/hh4.gif">
<Img onClick = "Stop ();" title = "stop" text = "<" src = "images/button/dd5.gif" hoverSrc = "images/button/hh5.gif">
<img OnClick="Forward();" title="快进" text="8" src="images/button/dd6.gif" hoverSrc="images/button/hh6.gif">
<img OnClick="GoToEnd();" title="跳至最末帧" text=":" src="images/button/dd7.gif" hoverSrc="images/button/hh7.gif">
<img OnClick="Replay();" title="重放" text="q" src="images/button/dd8.gif" hoverSrc="images/button/hh8.gif">
<img OnClick="showMenu(menu);" title=" open Flash文件" text="5" src="images/button/dd9.gif" hoverSrc="images/button/hh9.gif">
<input Type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()"> </ span>
<div Id="menu" onClick="this.style.display=''''''''none''''''''">
<a Href=" Dakaizhiding URL" onClick="OpenRemoteSwf();return false"> you to the specified URL </ a>
<a Href="选择本地文件" onClick="selectMovie();return false"> choosing local paper </ a>
<a Href="选择本地文件" onClick="alert(''''''''Wren FLash Player 1.0 on Preview\nCopyright (C) WRen.Cn'''''''');return false"> Wren Flash Player </ a>
</ Div> </ div> run driver players: <script defer>
Var movie = document.getElementById ( "movie");
LoadSWF ( "http://down.wren.cn/flash/navigation_68.swf", "600" and "400"); / / loadSWF ( "flash address", "width" and "a high degree")
</ Script>
Below I look at the driver code to write, the preservation of play.js: var total; / / definition of flash-ching, the total number of films
Var frame_number; / / definition of flash videos of the current Lo

/ / The following is a rolling process of the picture Drag
Var dragapproved = false;
Var z, x, y
/ / Function mobile
Function move () (
If (event.button == 1 & & dragapproved) (
Temp1 event.clientX-y = x;
/ / The following is the scope of control of mobile
If (y <0)
Y = 0;
If (y> 420)
Y = 420;

Z.style.pixelLeft = y
Movie.GotoFrame (y/420 * total); / / move to a certain location, flash video playback to a certain position
Return false
)
)
/ / Drag before a function of initial data
Function drags () (
If (! Document.all)
Return
If (event.srcElement.className == "drag") (
Dragapproved = true
Z = event.srcElement
Temp1 = z.style.pixelLeft
X = event.clientX
Document.onmousemove move =
)
)

/ / Video player dynamic Display of the current Lo / Lo total number of
Function showcount () (
Frame_number = movie.CurrentFrame ();
Frame_number;
Frame_number frameCount.innerText = "/" movie.TotalFrames;
Element.style.pixelLeft = 420 * (frame_number / movie.TotalFrames); / / rolling of the picture corresponding to the location accordingly
If (frame_number == movie.TotalFrames)
ClearTimeout (tn_ID);
Else
Var tn_ID = setTimeout ('''''''' showcount ();'''''''', 1000);
)
/ / To return to the first film frame
Function Rewind () (
If (movie.IsPlaying ()) (
Pause ();
)
Movie.Rewind ();
Element.style.pixelLeft = 0;
FrameCount.innerText = "/" total;
)
/ / Video player
Function Play () (
Movie.Play ();
Showcount ();
)
/ / Suspended players
Function Pause () (
Movie.StopPlay ();
)

/ / Skip to the last frame
Function GoToEnd () (
If (movie.IsPlaying ())
Pause ();
Movie.GotoFrame (total);
Element.style.pixelLeft = 420;
FrameCount.innerText total = "/" total;
)
/ / Fast forward films
Function Back ()
(
If (movie.IsPlaying ())
Pause ();
Frame_number = frame_number-50;
Movie.GotoFrame (frame_number);
Play ();
)
/ / Fast-forward videos
Function Forward ()
(
If (movie.IsPlaying ())
Pause ();
Frame_number frame_number = 50;
Movie.GotoFrame (frame_number);
Play ();
)
/ / Video player
Function Replay () (
If (movie.IsPlaying ()) (
Pause ();
Movie.Rewind ();
Play ();
)
Else
(
Movie.Rewind ();
Play ();
)
)
/ / Stop broadcasting videos to return to the first-ching
Function Stop () (
If (movie.IsPlaying ()) (
Pause ();
Movie.Rewind ();
)
Else
(
Movie.Rewind ();
)
)
/ / Show videos included in progress, after all printed in the control buttons can be used
Function jindu () (
Var in_ID;
Bar.style.width = Math.round (movie.PercentLoaded ()) "%";
FrameCount.innerText = Math.round (movie.PercentLoaded ()) "%";
If (movie.PercentLoaded () == 100) (
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 0]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 1]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 2]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 3]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 4]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 5]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 6]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 7]. Disabled = false;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 8]. Disabled = false;
Total = movie.TotalFrames;
Frame_number;
Frame_number frameCount.innerText = "/" total;
Bar.style.background = "";
/ / Bar.style.width = "0%"
Bar.innerHTML =''''''''< img src = "images/button/posbar1.gif" style = "cursor: hand; border: 0;" id = "element" class = "drag" OnMouseOver = " fnOnMouseOver () "OnMouseOut =" fnOnMouseOut ()">'''''''';
Document.onmousedown = drags
Document.onmouseup = new Function ( "dragapproved = false; Play ()")
Showcount ();
ClearTimeout (in_ID);
)
Else
In_ID = setTimeout ( "jindu ();", 1000);
)

/ / Printed in the beginning of flash videos, printed in the process, the player control buttons can not be used
Function loadSWF (fsrc, fwidth, fheight) (
Movie.LoadMovie (0, fsrc);
Movie.width = fwidth;
Movie.height = fheight;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 0]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 1]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 2]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 3]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 4]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 5]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 6]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 7]. Disabled = true;
CtlButtons.document.all.tags ('''''''' IMG'''''''')[ 8]. Disabled = true;

Frame_number = movie.CurrentFrame ();
Jindu ();
)
/ / Display function layer
Function showMenu (menu) (
Menu.style.display ='''''''' block'''''''';
)

/ / Mouse click Position on the rolling of the film corresponding to that position players
Function Jump (fnume) (
If (movie.IsPlaying ()) (
Pause ();
Movie.GotoFrame (fnume);
Play ();
)
Else
(
Movie.GotoFrame (fnume);
Play ();
)
)

/ / Function of the following two pictures switch function
Function fnOnMouseOver () (
Element.src = "images / button / posbar.gif";
)

Function fnOnMouseOut () (
Element.src = "images/button/posbar1.gif";
) Above code, we will find that after careful study is actually very simple, but I have a great deal of energy costs. You are welcome to continue to improve on this basis, and add new functions.

Flash Player can be controlled by the Javascript method. List:
Play () ---------------------------------------- player animation
StopPlay ()------------------------------------ stop animation
IsPlaying ()----------------------------------- animation whether it is broadcast
GotoFrame (frame_number )---------------- Jump to a certain frame
TotalFrames ()------------------------------- access to the churn animation
CurrentFrame ()------------------------------ return of the current animation churn -1
Rewind ()------------------------------------- to return to the first frame animation
SetZoomRect (left, top, right, to enlarge the designated areas buttom )-------
Zoom (percent change animation size )------------------------------
Pan (x_position, y_position, )------------ the animation unit in the x, y direction of translation
PercentLoaded ()---------------------------- return to be recorded in the percentage of animation
LoadMovie (level_number, loading animation path )-----------
TGotoFrame (movie_clip, frame_number) - Jump to the designated churn movie_clip
TGotoLabel (movie_clip, label_name )------ movie_clip Jump to a specific label
TCurrentFrame (movie_clip )--------------- return movie_clip current frame -1
TCurrentLabel (movie_clip )----------------- return movie_clip current tab
TPlay (movie_clip )--------------------------- player movie_clip
TStopPlay (movie_clip )---------------------- stop movie_clip players
GetVariable (variable_name )----------------- access variables
SetVariable (variable_name, value )----------- variable assignment
TCallFrame (movie_clip, frame_number) --- call the action specified frame
TCallLabel (movie_clip, label )---------------- call the action specified on the label
TGetProperty (movie_clip, property )-------- access to the designated attributes movie_clip
TSetProperty (movie_clip, property, number) - Set movie_clip designated attributes above code, we will find that after careful study is actually very simple, but I have a great deal of energy costs. You are welcome to continue to improve on this basis, and add new functions.

Related articles:

Flash Video Tutorial: Making buttons

Click here to watch full-screen tutorial <embed src=http://webjx.com/sucai/flashshipin/3_11.swf pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width=560 height=413>...

CSS primary entry: the overall page style statement

CSS primary entry: the overall style statement - Welcome to the CSS software tutorial area天极 The overall statement methods 1. Basically, there were two ways to the overall statement, is a response to a label, and then a set of several styles. The seco...

Seven Network profitable model recommended

Internet can make money, in this and previous head of the overwhelming majority of the people think is the same: to Chi's nose. Until someone really received dollars before the hearing to do, since the whole is free of charge. No one comments, slowly groping the...

JavaScript build with the CSS + page tab

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"> <HTML> <HEAD> <TITLE> To create JavaScript + CSS page tab </ TITLE> <META NAME="Generator" CONTENT="EditPlus"> ...

WAP Server = Web Server Configuration

We turn first to Microsoft's Internet Infomation Server (IIS IIS 4 or 5), as well as Unix platforms, the most common two Apache Web Server to introduce them to how formed their own WAP Sever, has been formed originally of Web information platform to the infinite expansion platform. ...