Open source Ckplayer Web player, cross platform (HTML5, mobile), FLV, F4V, MP4, rtmp protocol. WEBM, OGG, m3u8!

Article Link: http://justcoding.iteye.com/blog/2110275

Ckplayer, which is all called super cool FLV player, it is a software for playing video on the Web page, supported by the format of: HTTP protocol on the FLV,F4V,MP4 format, while supporting RTMP video streaming format playback, this player is characterized in that the user can define the player's style, such as Play/pause button, mute button, full screen button is called external image interface, the user according to their own needs to create the player style needs to use the various button pictures and then replace the original style of the corresponding picture can be made to make their own style, the specific buttons of the position and the bottom background settings in Ckplayer/ckplayer.js set in.

Feature set introduction This tutorial involves the following points, clicking on the corresponding title page will slide directly to the appropriate content:

• 1: Modify or remove the player's front-facing logo
• 2: Modify or remove the logo in the top right corner
• 3: Modify, close, set scrolling text ads
• 4: Remove the right switch light sharing plugin
• 5: Keep the right plug, but do not switch lights
• 6: Use of shared functions and points of attention
• 7: Pre-AD sequence/random play or random play one of multiple ads
• 8: Keep control bar Hidden forever
• 9: Lock the progress bar and let it change with time, but not drag
• 10: Leave the video below the player at a distance of 0
• 11: Cue text and text position settings when video load fails
• 12: Prohibit user from dragging the progress bar

Modify or remove the player's front-facing logo

The first step: the ckplayer/directory under the style.swf modified into Style.zip, to do their own good logo file, the official default use of logo.swf, you can also Use the Logo.png.logo.jpg picture format, drag into the Style.zip, and then change the style.zip back to style.swf
Step two: Open Ckplayer.js and Ckplayer.xml

First: Do not use the front-facing logo
Find (Ckplayer.js) Mylogo: ' logo.swf ',
<mylogo>logo.swf</mylogo> in the Ckplayer.xml.

Set separately into

Mylogo: ' null ',
<mylogo>null</mylogo>

The second type: Modify the front-facing logo

Find (Ckplayer.js) Mylogo: ' logo.swf ',
<mylogo>logo.swf</mylogo> in the Ckplayer.xml.

Replace it with the name of your logo

Find (Ckplayer.js) Pm_mylogo: ' 1,1,-100,-55 ',
<pm_mylogo>1,1,-100,-55</pm_mylogo> in the Ckplayer.xml.

Here is the location of the change, about the location of the four parameters of the role and usage please refer to:

Make sure to clear your browser's cache after you modify it

Modify or remove the logo in the top right corner

The first step: the ckplayer/directory under the style.swf modified into Style.zip, to do their own good logo file, the official default use of Cklogo.png, you also You can use CKLOGO.SWF (Flash format) or cklogo.jpg (picture format), drag into the Style.zip, and then change style.zip back to style.swf

Step two: Open Ckplayer.js and Ckplayer.xml

First: Do not use logos
Find (ckplayer.js) Logo: ' Cklogo.png ',
<logo>cklogo.png</logo> in the Ckplayer.xml.

Set separately into

Logo: ' null ',
<logo>null</logo>

The second type: Change logo
Find (ckplayer.js) Logo: ' Cklogo.png ',
<logo>cklogo.png</logo> in the Ckplayer.xml.

Replace it with the name of your logo

Find (Ckplayer.js) Pm_logo: ' 2,0,-100,20 ',
<pm_logo>2,0,-100,20</pm_logo> in the Ckplayer.xml.

Here is the location of the change, about the location of the four parameters of the role and usage, please refer to

Make sure to clear your browser's cache after you modify it

Modify, close, and set scrolling text ads

The way to turn off scrolling text ads is simple

Open Ckplayer.js and Ckplayer.xml.

Find setup: ' Parameters and <setup></setup>

The 9th parameter is set to 0 to turn it off.

The 9th parameter means the following:

Whether to turn on scrolling text ads, 0 is not on, 1 is on and do not use the Close button, 2 is turned on and use the Close button, open will be loaded when the video load scrolling text ads

Use (Modify) to scroll text ads

The premise is that you need to open the scrolling text ads, open the method as above said

The first method: Modify the scrolling text ad in Ckplayer.js or Ckplayer.xml

Then find the Advmarquee in Ckplayer.js: ',

Or the <advmarquee></advmarquee> in Ckplayer.xml

Modify the contents of the content, note that in the Ckplayer.xml text ads can use HTML syntax, but note that the "<" replaced by "{", ">" Replaced by "}"

Second approach: Display text ads in real-time on the page

First of all, the ckplayer.js in the Advmarquee: "The contents of the empty (the corresponding ckplayer.xml also empty)

Then in the call to the player's page set a JS function for the player to call, the code is as follows:

JS Code

1. <script>function Ckmarqueeadv () {return ' ad content ';} </script>

Here the CKMARQUEEADV function can also be replaced by other functions, the modification method is in the Ckplayer.js in the Ckstyle () in the Calljs parameter (Ckplayer.xml also have corresponding)

Make sure to clear your browser's cache after you modify it

Method settings for scrolling up text

Two points to note:

One: The Pm_advmarquee parameter in the Ckstyle () function in Ckplayer.js (Ckplayer.xml corresponds to <pm_advmarquee></pm_advmarquee>)

The 10th value of this parameter is set to 1, which enables scrolling up or down

The 6th and 13th values are consistent, so you can set it to 16 to test it first.

Second: You need to add a {BR} line-break symbol in front of the text ad, such as {br}1{br}2

Remove the right switch light sharing plugin

Ckplayer.js.

Find the following three lines to remove

CPT + = ' right.swf,2,1,-75,-100,2,0| '; /Right switch light, adjust, share button plug-in
CPT + = ' share.swf,1,1,-180,-100,3,0| '; /Share Plugins
CPT + = ' adjustment.swf,1,1,-180,-100,3,0| '; /adjust the size and color of the plugin

Ckplayer.xml found the following three lines removed

<cpt>right.swf,2,1,-75,-100,2,0</cpt><!--Right switch light, adjust, share button plug-in
<cpt>share.swf,1,1,-180,-100,3,0</cpt><!--Share Plugins--
<cpt>adjustment.swf,1,1,-180,-100,3,0</cpt><!--Adjust the size and color of the plugin--

Then to style.swf (change to Style.zip) right.swf,share.swf,adjustment.swf these three plugins removed

Keep the right plug, but do not switch lights

Ckplayer.js: cpt_lights: ' 0 ',

Ckplayer.xml:<cpt_lights>0</cpt_lights>.

Make sure to clear your browser's cache after you modify it

Use of shared functions and points of attention

We assume that your ckplayer is placed in the root directory of the website, such as your player address is
http://www. Your domain name. com/ckplayer/ckplayer.swf
Note this path

Start setting up below
The first step:
http://www. Your domain name. Cpt_share found in com/ckplayer/ckplayer.js: ' parameter
Change to Cpt_share: ' http://www. your domain name. Com/ckplayer/share.xml ',

http://www. Your domain name. Found in Com/ckplayer/ckplayer.xml <cpt_share></cpt_share>
Change into
http://www. Your domain name. com/ckplayer/share.xml

Step Two:
Open http://www. Your domain name. com/ckplayer/share.xml This file
Find the parameters inside the
{Embed src= "http://www. your domain name. com/ckplayer/ckplayer.swf"
Note that this is going to be set to absolute path

http://www. Your domain name, com/ckplayer/ckplayer.swf? [$share]
We're going to use absolute paths here too.

<share_path>ckplayer/share/</share_path>
Change to Absolute address
<share_path>http://www. your domain name .com/ckplayer/share/</share_path>
The main thing is to change the path to the beginning of the HTTP path, because the outbound access must have a full path to identify

<share_permit>0</share_permit>
Set this parameter, if your video station does not have audio-visual license, then set to 0, if there is, then set to 1

<share_flashvars>
F,my_url,my_pic,a
</share_flashvars>
The function of the Share_flashvars parameter is to share the parameters of the flashvars in the share, it must be noted, because depending on the way you call the video, you need to choose a different parameter sharing, has been to ensure that the outside of the station to share again can play.

Step Three:
Add a cross-domain policy file to the Web site, the description of this file can be self-baidu a bit
Simple to use is to download the official website directly into the root directory of their own site
Http://www.ckplayer.com/crossdomain.xm

Make sure to clear your browser's cache after you modify it

Front ad sequence/shuffle or shuffle one of multiple ads

The first step is to set up your pre-ads in the form of multiple ad addresses

Like your ad address is 1.swf and 2.flv.

Then set the following way

The code in the Flashvars (other forms of invocation as long as the corresponding line)

JS Code

1. var flashvars={
2. ...
3. L:' 1.swf|2.flv ',
4. R:' |http://www.ckplayer.com ',
5. T:' 10|10 ',
6. ...
7. };

I put two ads in the value of L, separated by a vertical bar

Because 2.flv is a video, you need to give it a link address so in R you set an empty address and a link address (take the official website address for example), the middle is separated by a vertical line

T is set to play time, all 10 seconds, total 20 seconds

The second step, open ckplayer.js Find setup: "This parameter, or open Ckplayer.xml find <setup></setup> this parameter

Note the 7th parameter

There are some kinds of settings here. Different settings, different meanings.

0: is to set multiple pre-ads to play in sequence

1: is to set multiple pre-ads to play in random order

2: Randomly take one of all ads to play

3: Randomly take two of all ads to play

...

And so on

Keep the control bar hidden Forever

Found it

Setup in Ckplayer.js: "the 29th parameter

The 29th parameter of <setup></setup> in Ckplayer.xml

Set to 2

The meaning method of the parameter

0: Is normal, this time the control bar will be run according to the 25th parameter in Setup.

1: Is the control bar by default hidden, the playback state mouse through the player display control bar, at this time only when the mouse through the player, the control bar will come out, to follow the setup of the 25th parameters to run

2: The control bar is always hidden

Lock the progress bar and let it change over time, but not drag

Found it

Setup in Ckplayer.js: "The 26th parameter

The 26th parameter of <setup></setup> in Ckplayer.xml

Set to 0

Leave the video below the player at a distance of 0

Style.swf changed into Style.zip

Drag the Style.xml file inside to open it.

Found it

<pm_video>0,0,0,35,0x000000,0,0,0,0,0</pm_video>
Set the fourth parameter (above is 35), set to 0

The meanings of the values in this parameter are as follows
Video Fixed Area
1, the control bar is not hidden when the left is reserved wide
2, the control bar is not hidden when the height reserved above
3, the control bar is not hidden when the right side reserved width
4, the control bar is not hidden when the height reserved below
5. Background color of the area
6. Background transparency in the region
7. When the control bar is hidden, the left width is reserved
8, the control bar hidden when the above reserved height
9, the control bar hidden when the right to reserve the width
10, the control bar hidden when the height reserved below

Location settings for prompt text and text when video load fails

Modified text in: Language.xml <pr_noload>{font color= ' #FFFFFF ' face= ' Nsimsun '} load failed {/font}</pr_noload> item

Modified text position is in the style.swf (changed to Style.zip) in the Style.xml in the <pm_load>1,1,-30,10,0,200,0</pm_load>

Because the place is used to show the loading progress, the part-time display fails to load the hint text. The meanings of each value are as follows:

1, horizontal alignment, 0 is left, 1 is medium, 2 is right
2, vertical alignment, 0 is on, 1 is in, 2 is the next
3. Horizontal Offset
4. Vertical offset
5, Text alignment: 0 is left-aligned, 1 is the middle alignment, 2 is the right alignment, 3 is the default alignment (equivalent to left-aligned)
6. Width of text box, only valid when left/right aligned
7, the High text box

Special note: In all about text control, only set the left and right alignment, the width of the back will have effect, if the center alignment, then the width of no effect

Prevent users from dragging the progress bar

Open Ckplayer.js Search: Setup

Open Ckplayer.xml Search: Setup

The 36th value that modifies this parameter is 0.

Source: http://www.ckplayer.com/article6.php?id=15

Official website: http://www.ckplayer.com/

Installation: Http://www.ckplayer.com/article6.php?id=14

Example: http://www.ckplayer.com/ex6.php?id=33

ckplayer6.5 Download Point I

(EXT) Open source Ckplayer Web player, cross platform (HTML5, mobile), FLV, F4V, MP4, rtmp protocol. WEBM, OGG, m3u8!