Version Description
- minor bug fixes
Download this release
Release Info
Developer | FolioVision |
Plugin | FV Flowplayer Video Player |
Version | 0.9.17 |
Comparing to | |
See all releases |
Version 0.9.17
- controller/backend.php +88 -0
- controller/frontend.php +103 -0
- css/flowplayer.css +101 -0
- flowplayer.php +25 -0
- flowplayer/example.flv +0 -0
- flowplayer/flowplayer.controls.swf +0 -0
- flowplayer/flowplayer.min.js +24 -0
- flowplayer/flowplayer.swf +0 -0
- flowplayer/style.css +41 -0
- images/finished_bg.png +0 -0
- images/play.png +0 -0
- images/replay.png +0 -0
- images/share.png +0 -0
- js/flowPlayer.js +449 -0
- js/jscolor/arrow.gif +0 -0
- js/jscolor/cross.gif +0 -0
- js/jscolor/hs.png +0 -0
- js/jscolor/hv.png +0 -0
- js/jscolor/jscolor.js +830 -0
- js/pngfix.js +43 -0
- js/suggestions.js +10 -0
- models/flowplayer-backend.php +26 -0
- models/flowplayer-frontend.php +130 -0
- models/flowplayer.php +150 -0
- readme.txt +75 -0
- screenshot-1.png +0 -0
- screenshot-2.png +0 -0
- screenshot-3.png +0 -0
- view/admin.php +168 -0
- view/backend-head.php +11 -0
- view/colours.php +46 -0
- view/frontend-head.php +26 -0
- wpfp.conf +14 -0
- wpfp.conf.default +14 -0
controller/backend.php
ADDED
@@ -0,0 +1,88 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Needed includes
|
5 |
+
*/
|
6 |
+
include dirname( __FILE__ ) . '/../models/flowplayer.php';
|
7 |
+
include dirname( __FILE__ ) . '/../models/flowplayer-backend.php';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* Create the flowplayer_backend object
|
11 |
+
*/
|
12 |
+
$fp = new flowplayer_backend();
|
13 |
+
|
14 |
+
/**
|
15 |
+
* WP Hooks
|
16 |
+
*/
|
17 |
+
add_action('admin_head', 'flowplayer_head');
|
18 |
+
add_action('admin_menu', 'flowplayer_admin');
|
19 |
+
/**
|
20 |
+
* END WP Hooks
|
21 |
+
*/
|
22 |
+
|
23 |
+
|
24 |
+
/**
|
25 |
+
* Administrator environment function.
|
26 |
+
*/
|
27 |
+
function flowplayer_admin () {
|
28 |
+
|
29 |
+
// if we are in administrator environment
|
30 |
+
if (function_exists('add_submenu_page')) {
|
31 |
+
add_options_page(
|
32 |
+
'FV Wordpress Flowplayer',
|
33 |
+
'FV Wordpress Flowplayer',
|
34 |
+
8,
|
35 |
+
basename(__FILE__),
|
36 |
+
'flowplayer_page'
|
37 |
+
);
|
38 |
+
}
|
39 |
+
}
|
40 |
+
|
41 |
+
/**
|
42 |
+
* Outputs HTML code for bool options based on arg passed.
|
43 |
+
* @param string Currently selected value ('true' or 'false').
|
44 |
+
* @return string HTML code
|
45 |
+
*/
|
46 |
+
function flowplayer_bool_select($current) {
|
47 |
+
switch($current) {
|
48 |
+
case "true":
|
49 |
+
$html = '<option selected="selected" value="true">true</option><option value="false">false</option>';
|
50 |
+
break;
|
51 |
+
case "false":
|
52 |
+
$html = '<option value="true" >true</option><option selected="selected" value="false">false</option>';
|
53 |
+
break;
|
54 |
+
default:
|
55 |
+
$html = '<option value="true">true</option><option selected="selected" value="false">false</option>';
|
56 |
+
break;
|
57 |
+
}
|
58 |
+
return $html;
|
59 |
+
}
|
60 |
+
|
61 |
+
/**
|
62 |
+
* Displays administrator menu with configuration.
|
63 |
+
*/
|
64 |
+
function flowplayer_page() {
|
65 |
+
//initialize the class:
|
66 |
+
$fp = new flowplayer();
|
67 |
+
include dirname( __FILE__ ) . '/../view/admin.php';
|
68 |
+
}
|
69 |
+
|
70 |
+
/**
|
71 |
+
* Checks for errors regarding access to configuration file. Displays errors if any occur.
|
72 |
+
* @param object $fp Flowplayer class object.
|
73 |
+
*/
|
74 |
+
function flowplayer_check_errors($fp){
|
75 |
+
$html = '';
|
76 |
+
// config file checks, exists, readable, writeable
|
77 |
+
$conf_file = realpath(dirname(__FILE__)).'/wpfp.conf';
|
78 |
+
if(!file_exists($conf_file)){
|
79 |
+
$html .= '<h3 style="font-weight: bold; color: #ff0000">'.$conf_file.' Does not exist please create it</h3>';
|
80 |
+
} elseif(!is_readable($conf_file)){
|
81 |
+
$html .= '<h3 style="font-weight: bold; color: #ff0000">'.$conf_file.' is not readable please check file permissions</h3>';
|
82 |
+
} elseif(!is_writable($conf_file)){
|
83 |
+
$html .= '<h3 style="font-weight: bold; color: #ff0000">'.$conf_file.' is not writable please check file permissions</h3>';
|
84 |
+
}
|
85 |
+
}
|
86 |
+
|
87 |
+
|
88 |
+
?>
|
controller/frontend.php
ADDED
@@ -0,0 +1,103 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Needed includes
|
5 |
+
*/
|
6 |
+
include dirname( __FILE__ ) . '/../models/flowplayer.php';
|
7 |
+
include dirname( __FILE__ ) . '/../models/flowplayer-frontend.php';
|
8 |
+
|
9 |
+
/**
|
10 |
+
* WP Hooks
|
11 |
+
*/
|
12 |
+
add_action('wp_head', 'flowplayer_head');
|
13 |
+
add_action('the_content', 'flowplayer_content');
|
14 |
+
add_action('wp_footer','flowplayer_display_scripts');
|
15 |
+
// Addition for 0.9.15
|
16 |
+
add_action('widget_text','flowplayer_content');
|
17 |
+
|
18 |
+
/**
|
19 |
+
* END WP Hooks
|
20 |
+
*/
|
21 |
+
|
22 |
+
$GLOBALS['scripts'] = array();
|
23 |
+
|
24 |
+
/**
|
25 |
+
* Replaces the flowplayer tags in post content by players and fills the $GLOBALS['scripts'] array.
|
26 |
+
* @param string Content to be parsed
|
27 |
+
* @return string Modified content string
|
28 |
+
*/
|
29 |
+
function flowplayer_content( $content ) {
|
30 |
+
|
31 |
+
$content_matches = array();
|
32 |
+
preg_match_all('/\[flowplayer\ [^\]]+\]/i', $content, $content_matches);
|
33 |
+
|
34 |
+
// process all found tags
|
35 |
+
foreach ($content_matches[0] as $tag) {
|
36 |
+
$ntag = str_replace("\'",''',$tag);
|
37 |
+
|
38 |
+
// search for URL
|
39 |
+
preg_match("/src='([^']*?)'/i",$ntag,$tmp);
|
40 |
+
if( $tmp[1] == NULL ) {
|
41 |
+
preg_match_all("/src=([^,\s\]]*)/i",$ntag,$tmp);
|
42 |
+
$media = $tmp[1][0];
|
43 |
+
}
|
44 |
+
else
|
45 |
+
$media = $tmp[1];
|
46 |
+
|
47 |
+
// width and heigth
|
48 |
+
preg_match("/width=(\d*)/i",$ntag,$width);
|
49 |
+
preg_match("/height=(\d*)/i",$ntag,$height);
|
50 |
+
|
51 |
+
if( $width[1] != NULL)
|
52 |
+
$arguments['width'] = $width[1];
|
53 |
+
if( $height[1] != NULL)
|
54 |
+
$arguments['height'] = $height[1];
|
55 |
+
|
56 |
+
// search for popup in quotes
|
57 |
+
preg_match("/popup='([^']*?)'/i",$ntag,$tmp);
|
58 |
+
$arguments['popup'] = $tmp[1];
|
59 |
+
|
60 |
+
// search for splash image
|
61 |
+
preg_match("/splash='([^']*?)'/i",$ntag,$tmp);
|
62 |
+
if( $tmp[1] == NULL ) {
|
63 |
+
preg_match_all("/splash=([^,\s\]]*)/i",$ntag,$tmp);
|
64 |
+
$arguments['splash'] = $tmp[1][0];
|
65 |
+
}
|
66 |
+
else
|
67 |
+
$arguments['splash'] = $tmp[1];
|
68 |
+
|
69 |
+
if (trim($media) != '') {
|
70 |
+
// build new player
|
71 |
+
$fp = new flowplayer_frontend();
|
72 |
+
$new_player = $fp->build_min_player($media,$arguments);
|
73 |
+
$content = str_replace($tag, $new_player['html'],$content);
|
74 |
+
$GLOBALS['scripts'][] = $new_player['script'];
|
75 |
+
}
|
76 |
+
}
|
77 |
+
|
78 |
+
return $content;
|
79 |
+
}
|
80 |
+
|
81 |
+
|
82 |
+
/**
|
83 |
+
* Prints flowplayer javascript content to the bottom of the page.
|
84 |
+
*/
|
85 |
+
function flowplayer_display_scripts() {
|
86 |
+
if (!empty($GLOBALS['scripts'])) {
|
87 |
+
echo "\n<script defer=\"defer\" type=\"text/javascript\">\n<!--\n\n";
|
88 |
+
foreach ($GLOBALS['scripts'] as $scr) {
|
89 |
+
echo $scr;
|
90 |
+
}
|
91 |
+
echo "\n\n//-->\n</script>\n";
|
92 |
+
}
|
93 |
+
}
|
94 |
+
|
95 |
+
/**
|
96 |
+
* This is the template tag. Use the standard Flowplayer shortcodes
|
97 |
+
*/
|
98 |
+
|
99 |
+
function flowplayer($shortcode) {
|
100 |
+
echo apply_filters('the_content',$shortcode);
|
101 |
+
}
|
102 |
+
|
103 |
+
?>
|
css/flowplayer.css
ADDED
@@ -0,0 +1,101 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.flowplayer_container
|
2 |
+
{
|
3 |
+
background: #0D0D0D url('../images/finished_bg.png') repeat-x;
|
4 |
+
display: block;
|
5 |
+
position: relative;
|
6 |
+
border: solid 1px black;
|
7 |
+
margin: 0 auto 0 auto !important;
|
8 |
+
padding: 0 !important;
|
9 |
+
text-align: center !important;
|
10 |
+
}
|
11 |
+
|
12 |
+
.flowplayer_container:hover
|
13 |
+
{
|
14 |
+
text-decoration: none;
|
15 |
+
}
|
16 |
+
|
17 |
+
/* SPLASH IMAGE */
|
18 |
+
img.splash
|
19 |
+
{
|
20 |
+
position: absolute;
|
21 |
+
top: 0 !important;
|
22 |
+
left: 0 !important;
|
23 |
+
width: 100%;
|
24 |
+
height: 100%;
|
25 |
+
cursor: pointer;
|
26 |
+
background: none;
|
27 |
+
border: none;
|
28 |
+
margin: 0 !important;
|
29 |
+
padding: 0 !important;
|
30 |
+
}
|
31 |
+
|
32 |
+
.splash_play_button
|
33 |
+
{
|
34 |
+
position: relative;
|
35 |
+
margin: auto !important;
|
36 |
+
cursor: pointer;
|
37 |
+
background: none;
|
38 |
+
border: none;
|
39 |
+
padding: 0 !important;
|
40 |
+
}
|
41 |
+
|
42 |
+
/* POPUP */
|
43 |
+
.popup_contents
|
44 |
+
{
|
45 |
+
visibility: hidden;
|
46 |
+
position: absolute;
|
47 |
+
top: -9999em;
|
48 |
+
left: -9999em;
|
49 |
+
}
|
50 |
+
|
51 |
+
.flowplayer_popup
|
52 |
+
{
|
53 |
+
position: absolute;
|
54 |
+
top: 10%;
|
55 |
+
left: 10%;
|
56 |
+
text-align: left;
|
57 |
+
width: 70%;
|
58 |
+
height: 60%;
|
59 |
+
background: #454545;
|
60 |
+
border: solid 1px #C0C0C0;
|
61 |
+
color: #FFFFFF;
|
62 |
+
padding: 5%;
|
63 |
+
z-index: 999;
|
64 |
+
}
|
65 |
+
|
66 |
+
.wpfp_custom_popup
|
67 |
+
{
|
68 |
+
margin: 0;
|
69 |
+
padding: 0;
|
70 |
+
}
|
71 |
+
|
72 |
+
.wpfp_custom_popup a, .wpfp_custom_popup a:hover, .wpfp_custom_popup a:visited, .wpfp_custom_popup a:active
|
73 |
+
{
|
74 |
+
color: white;
|
75 |
+
text-decoration: none;
|
76 |
+
}
|
77 |
+
|
78 |
+
.flowplayer_popup a, .flowplayer_popup a img
|
79 |
+
{
|
80 |
+
margin: auto !important;
|
81 |
+
cursor: pointer;
|
82 |
+
background: none !important;
|
83 |
+
border: none;
|
84 |
+
padding: 0 !important;
|
85 |
+
}
|
86 |
+
|
87 |
+
.wpfp_custom_popup input
|
88 |
+
{
|
89 |
+
width: 80%;
|
90 |
+
margin: 5px;
|
91 |
+
}
|
92 |
+
|
93 |
+
.popup_controls
|
94 |
+
{
|
95 |
+
text-align: center;
|
96 |
+
font-size: 100%;
|
97 |
+
}
|
98 |
+
|
99 |
+
|
100 |
+
|
101 |
+
|
flowplayer.php
ADDED
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?PHP
|
2 |
+
/*
|
3 |
+
Plugin Name: FV Wordpress Flowplayer
|
4 |
+
Plugin URI: http://foliovision.com/seo-tools/wordpress/plugins/fv-wordpress-flowplayer
|
5 |
+
Description: Embed videos (FLV, H.264, and MP4) into posts or pages. Uses modified version of flowplayer (with removed FP logo and copyright notice).
|
6 |
+
Version: 0.9.17
|
7 |
+
Author: Foliovision
|
8 |
+
Author URI: http://foliovision.com/
|
9 |
+
*/
|
10 |
+
|
11 |
+
|
12 |
+
if(is_admin()) {
|
13 |
+
/**
|
14 |
+
* If administrator is logged, loads the controller for backend.
|
15 |
+
*/
|
16 |
+
include( dirname( __FILE__ ) . '/controller/backend.php' );
|
17 |
+
} else {
|
18 |
+
/**
|
19 |
+
* If administrator is not logged, loads the controller for frontend.
|
20 |
+
*/
|
21 |
+
include( dirname( __FILE__ ) . '/controller/frontend.php' );
|
22 |
+
}
|
23 |
+
|
24 |
+
|
25 |
+
?>
|
flowplayer/example.flv
ADDED
Binary file
|
flowplayer/flowplayer.controls.swf
ADDED
Binary file
|
flowplayer/flowplayer.min.js
ADDED
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* flowplayer.js 3.0.3. The Flowplayer API
|
3 |
+
*
|
4 |
+
* Copyright 2008 Flowplayer Oy
|
5 |
+
*
|
6 |
+
* This file is part of Flowplayer.
|
7 |
+
*
|
8 |
+
* Flowplayer is free software: you can redistribute it and/or modify
|
9 |
+
* it under the terms of the GNU General Public License as published by
|
10 |
+
* the Free Software Foundation, either version 3 of the License, or
|
11 |
+
* (at your option) any later version.
|
12 |
+
*
|
13 |
+
* Flowplayer is distributed in the hope that it will be useful,
|
14 |
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
15 |
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
16 |
+
* GNU General Public License for more details.
|
17 |
+
*
|
18 |
+
* You should have received a copy of the GNU General Public License
|
19 |
+
* along with Flowplayer. If not, see <http://www.gnu.org/licenses/>.
|
20 |
+
*
|
21 |
+
* Version: 3.0.3 - Wed Jan 07 2009 13:22:30 GMT-0000 (GMT+00:00)
|
22 |
+
*/
|
23 |
+
(function(){function log(args){console.log("$f.fireEvent",[].slice.call(args));}function clone(obj){if(!obj||typeof obj!='object'){return obj;}var temp=new obj.constructor();for(var key in obj){if(obj.hasOwnProperty(key)){temp[key]=clone(obj[key]);}}return temp;}function each(obj,fn){if(!obj){return;}var name,i=0,length=obj.length;if(length===undefined){for(name in obj){if(fn.call(obj[name],name,obj[name])===false){break;}}}else{for(var value=obj[0];i<length&&fn.call(value,i,value)!==false;value=obj[++i]){}}return obj;}function el(id){return document.getElementById(id);}function extend(to,from,skipFuncs){if(to&&from){each(from,function(name,value){if(!skipFuncs||typeof value!='function'){to[name]=value;}});}}function select(query){var index=query.indexOf(".");if(index!=-1){var tag=query.substring(0,index)||"*";var klass=query.substring(index+1,query.length);var els=[];each(document.getElementsByTagName(tag),function(){if(this.className&&this.className.indexOf(klass)!=-1){els.push(this);}});return els;}}function stopEvent(e){e=e||window.event;if(e.preventDefault){e.stopPropagation();e.preventDefault();}else{e.returnValue=false;e.cancelBubble=true;}return false;}function bind(to,evt,fn){to[evt]=to[evt]||[];to[evt].push(fn);}function makeId(){return"_"+(""+Math.random()).substring(2,10);}var Clip=function(json,index,player){var self=this;var cuepoints={};var listeners={};self.index=index;if(typeof json=='string'){json={url:json};}extend(this,json,true);each(("Begin*,Start,Pause*,Resume*,Seek*,Stop*,Finish*,LastSecond,Update,BufferFull,BufferEmpty,BufferStop").split(","),function(){var evt="on"+this;if(evt.indexOf("*")!=-1){evt=evt.substring(0,evt.length-1);var before="onBefore"+evt.substring(2);self[before]=function(fn){bind(listeners,before,fn);return self;};}self[evt]=function(fn){bind(listeners,evt,fn);return self;};if(index==-1){if(self[before]){player[before]=self[before];}if(self[evt]){player[evt]=self[evt];}}});extend(this,{onCuepoint:function(points,fn){if(arguments.length==1){cuepoints.embedded=[null,points];return self;}if(typeof points=='number'){points=[points];}var fnId=makeId();cuepoints[fnId]=[points,fn];if(player.isLoaded()){player._api().fp_addCuepoints(points,index,fnId);}return self;},update:function(json){extend(self,json);if(player.isLoaded()){player._api().fp_updateClip(json,index);}var conf=player.getConfig();var clip=(index==-1)?conf.clip:conf.playlist[index];extend(clip,json,true);},_fireEvent:function(evt,arg1,arg2,target){if(evt=='onLoad'){each(cuepoints,function(key,val){if(val[0]){player._api().fp_addCuepoints(val[0],index,key);}});return false;}if(index!=-1){target=self;}if(evt=='onCuepoint'){var fn=cuepoints[arg1];if(fn){return fn[1].call(player,target,arg2);}}if(evt=='onStart'||evt=='onUpdate'){extend(target,arg1);if(!target.duration){target.duration=arg1.metaData.duration;}else{target.fullDuration=arg1.metaData.duration;}}var ret=true;each(listeners[evt],function(){ret=this.call(player,target,arg1,arg2);});return ret;}});if(json.onCuepoint){var arg=json.onCuepoint;self.onCuepoint.apply(self,typeof arg=='function'?[arg]:arg);delete json.onCuepoint;}each(json,function(key,val){if(typeof val=='function'){bind(listeners,key,val);delete json[key];}});if(index==-1){player.onCuepoint=this.onCuepoint;}};var Plugin=function(name,json,player,fn){var listeners={};var self=this;var hasMethods=false;if(fn){extend(listeners,fn);}each(json,function(key,val){if(typeof val=='function'){listeners[key]=val;delete json[key];}});extend(this,{animate:function(props,speed,fn){if(!props){return self;}if(typeof speed=='function'){fn=speed;speed=500;}if(typeof props=='string'){var key=props;props={};props[key]=speed;speed=500;}if(fn){var fnId=makeId();listeners[fnId]=fn;}if(speed===undefined){speed=500;}json=player._api().fp_animate(name,props,speed,fnId);return self;},css:function(props,val){if(val!==undefined){var css={};css[props]=val;props=css;}json=player._api().fp_css(name,props);extend(self,json);return self;},show:function(){this.display='block';player._api().fp_showPlugin(name);return self;},hide:function(){this.display='none';player._api().fp_hidePlugin(name);return self;},toggle:function(){this.display=player._api().fp_togglePlugin(name);return self;},fadeTo:function(o,speed,fn){if(typeof speed=='function'){fn=speed;speed=500;}if(fn){var fnId=makeId();listeners[fnId]=fn;}this.display=player._api().fp_fadeTo(name,o,speed,fnId);this.opacity=o;return self;},fadeIn:function(speed,fn){return self.fadeTo(1,speed,fn);},fadeOut:function(speed,fn){return self.fadeTo(0,speed,fn);},getName:function(){return name;},_fireEvent:function(evt,arg){if(evt=='onUpdate'){var json=player._api().fp_getPlugin(name);if(!json){return;}extend(self,json);delete self.methods;if(!hasMethods){each(json.methods,function(){var method=""+this;self[method]=function(){var a=[].slice.call(arguments);var ret=player._api().fp_invoke(name,method,a);return ret=='undefined'?self:ret;};});hasMethods=true;}}var fn=listeners[evt];if(fn){fn.call(self,arg);if(evt.substring(0,1)=="_"){delete listeners[evt];}}}});};function Player(wrapper,params,conf){var
|
24 |
+
self=this,api=null,html,commonClip,playlist=[],plugins={},listeners={},playerId,apiId,playerIndex,activeIndex,swfHeight,wrapperHeight;extend(self,{id:function(){return playerId;},isLoaded:function(){return(api!==null);},getParent:function(){return wrapper;},hide:function(all){if(all){wrapper.style.height="0px";}if(api){api.style.height="0px";}return self;},show:function(){wrapper.style.height=wrapperHeight+"px";if(api){api.style.height=swfHeight+"px";}return self;},isHidden:function(){return api&&parseInt(api.style.height,10)===0;},load:function(fn){if(!api&&self._fireEvent("onBeforeLoad")!==false){each(players,function(){this.unload();});html=wrapper.innerHTML;flashembed(wrapper,params,{config:conf});if(fn){fn.cached=true;bind(listeners,"onLoad",fn);}}return self;},unload:function(){try{if(api&&api.fp_isFullscreen()){}}catch(error){return;}if(api&&html.replace(/\s/g,'')!==''&&!api.fp_isFullscreen()&&self._fireEvent("onBeforeUnload")!==false){api.fp_close();wrapper.innerHTML=html;self._fireEvent("onUnload");api=null;}return self;},getClip:function(index){if(index===undefined){index=activeIndex;}return playlist[index];},getCommonClip:function(){return commonClip;},getPlaylist:function(){return playlist;},getPlugin:function(name){var plugin=plugins[name];if(!plugin&&self.isLoaded()){var json=self._api().fp_getPlugin(name);if(json){plugin=new Plugin(name,json,self);plugins[name]=plugin;}}return plugin;},getScreen:function(){return self.getPlugin("screen");},getControls:function(){return self.getPlugin("controls");},getConfig:function(copy){return copy?clone(conf):conf;},getFlashParams:function(){return params;},loadPlugin:function(name,url,props,fn){if(typeof props=='function'){fn=props;props={};}var fnId=fn?makeId():"_";self._api().fp_loadPlugin(name,url,props,fnId);var arg={};arg[fnId]=fn;var p=new Plugin(name,null,self,arg);plugins[name]=p;return p;},getState:function(){return api?api.fp_getState():-1;},play:function(clip){function play(){if(clip!==undefined){self._api().fp_play(clip);}else{self._api().fp_play();}}if(api){play();}else{self.load(function(){play();});}return self;},getVersion:function(){var js="flowplayer.js 3.0.3";if(api){var ver=api.fp_getVersion();ver.push(js);return ver;}return js;},_api:function(){if(!api){throw"Flowplayer "+self.id()+" not loaded. Try moving your call to player's onLoad event";}return api;},_dump:function(){console.log(listeners);},setClip:function(clip){self.setPlaylist([clip]);},getIndex:function(){return playerIndex;}});each(("Click*,Load*,Unload*,Keypress*,Volume*,Mute*,Unmute*,PlaylistReplace,Fullscreen*,FullscreenExit,Error").split(","),function(){var name="on"+this;if(name.indexOf("*")!=-1){name=name.substring(0,name.length-1);var name2="onBefore"+name.substring(2);self[name2]=function(fn){bind(listeners,name2,fn);return self;};}self[name]=function(fn){bind(listeners,name,fn);return self;};});each(("pause,resume,mute,unmute,stop,toggle,seek,getStatus,getVolume,setVolume,getTime,isPaused,isPlaying,startBuffering,stopBuffering,isFullscreen,reset,close,setPlaylist").split(","),function(){var name=this;self[name]=function(arg){if(!api){return self;}var ret=(arg===undefined)?api["fp_"+name]():api["fp_"+name](arg);return ret=='undefined'?self:ret;};});self._fireEvent=function(evt,arg0,arg1,arg2){if(conf.debug){log(arguments);}if(!api&&evt=='onLoad'&&arg0=='player'){api=api||el(apiId);swfHeight=api.clientHeight;each(playlist,function(){this._fireEvent("onLoad");});each(plugins,function(name,p){p._fireEvent("onUpdate");});commonClip._fireEvent("onLoad");}if(evt=='onLoad'&&arg0!='player'){return;}if(evt=='onError'){if(typeof arg0=='string'||(typeof arg0=='number'&&typeof arg1=='number')){arg0=arg1;arg1=arg2;}}if(evt=='onContextMenu'){each(conf.contextMenu[arg0],function(key,fn){fn.call(self);});return;}if(evt=='onPluginEvent'){var name=arg0.name||arg0;var p=plugins[name];if(p){p._fireEvent("onUpdate",arg0);p._fireEvent(arg1);}return;}if(evt=='onPlaylistReplace'){playlist=[];var index=0;each(arg0,function(){playlist.push(new Clip(this,index++,self));});}var ret=true;if(arg0===0||(arg0&&arg0>=0&&arg0<playlist.length)){activeIndex=arg0;var clip=playlist[arg0];if(clip){ret=clip._fireEvent(evt,arg1,arg2);}if(!clip||ret!==false){ret=commonClip._fireEvent(evt,arg1,arg2,clip);}}var i=0;each(listeners[evt],function(){ret=this.call(self,arg0,arg1);if(this.cached){listeners[evt].splice(i,1);}if(ret===false){return false;}i++;});return ret;};function init(){if($f(wrapper)){$f(wrapper).getParent().innerHTML="";playerIndex=$f(wrapper).getIndex();players[playerIndex]=self;}else{players.push(self);playerIndex=players.length-1;}wrapperHeight=parseInt(wrapper.style.height,10)||wrapper.clientHeight;if(typeof params=='string'){params={src:params};}playerId=wrapper.id||"fp"+makeId();apiId=params.id||playerId+"_api";params.id=apiId;conf.playerId=playerId;if(typeof conf=='string'){conf={clip:{url:conf}};}conf.clip=conf.clip||{};if(wrapper.getAttribute("href",2)&&!conf.clip.url){conf.clip.url=wrapper.getAttribute("href",2);}commonClip=new Clip(conf.clip,-1,self);conf.playlist=conf.playlist||[conf.clip];var index=0;each(conf.playlist,function(){var clip=this;if(typeof clip=='object'&&clip.length){clip=""+clip;}if(!clip.url&&typeof clip=='string'){clip={url:clip};}each(conf.clip,function(key,val){if(clip[key]===undefined&&typeof val!='function'){clip[key]=val;}});conf.playlist[index]=clip;clip=new Clip(clip,index,self);playlist.push(clip);index++;});each(conf,function(key,val){if(typeof val=='function'){bind(listeners,key,val);delete conf[key];}});each(conf.plugins,function(name,val){if(val){plugins[name]=new Plugin(name,val,self);}});if(!conf.plugins||conf.plugins.controls===undefined){plugins.controls=new Plugin("controls",null,self);}params.bgcolor=params.bgcolor||"#000000";params.version=params.version||[9,0];params.expressInstall='http://www.flowplayer.org/swf/expressinstall.swf';function doClick(e){if(!self.isLoaded()&&self._fireEvent("onBeforeClick")!==false){self.load();}return stopEvent(e);}html=wrapper.innerHTML;if(html.replace(/\s/g,'')!==''){if(wrapper.addEventListener){wrapper.addEventListener("click",doClick,false);}else if(wrapper.attachEvent){wrapper.attachEvent("onclick",doClick);}}else{if(wrapper.addEventListener){wrapper.addEventListener("click",stopEvent,false);}self.load();}}if(typeof wrapper=='string'){flashembed.domReady(function(){var node=el(wrapper);if(!node){throw"Flowplayer cannot access element: "+wrapper;}else{wrapper=node;init();}});}else{init();}}var players=[];function Iterator(arr){this.length=arr.length;this.each=function(fn){each(arr,fn);};this.size=function(){return arr.length;};}window.flowplayer=window.$f=function(){var instance=null;var arg=arguments[0];if(!arguments.length){each(players,function(){if(this.isLoaded()){instance=this;return false;}});return instance||players[0];}if(arguments.length==1){if(typeof arg=='number'){return players[arg];}else{if(arg=='*'){return new Iterator(players);}each(players,function(){if(this.id()==arg.id||this.id()==arg||this.getParent()==arg){instance=this;return false;}});return instance;}}if(arguments.length>1){var swf=arguments[1];var conf=(arguments.length==3)?arguments[2]:{};if(typeof arg=='string'){if(arg.indexOf(".")!=-1){var instances=[];each(select(arg),function(){instances.push(new Player(this,clone(swf),clone(conf)));});return new Iterator(instances);}else{var node=el(arg);return new Player(node!==null?node:arg,swf,conf);}}else if(arg){return new Player(arg,swf,conf);}}return null;};extend(window.$f,{fireEvent:function(id,evt,a0,a1,a2){var p=$f(id);return p?p._fireEvent(evt,a0,a1,a2):null;},addPlugin:function(name,fn){Player.prototype[name]=fn;return $f;},each:each,extend:extend});if(document.all){window.onbeforeunload=function(){$f("*").each(function(){if(this.isLoaded()){this.close();}});};}if(typeof jQuery=='function'){jQuery.prototype.flowplayer=function(params,conf){if(!arguments.length||typeof arguments[0]=='number'){var arr=[];this.each(function(){var p=$f(this);if(p){arr.push(p);}});return arguments.length?arr[arguments[0]]:new Iterator(arr);}return this.each(function(){$f(this,clone(params),conf?clone(conf):{});});};}})();(function(){var jQ=typeof jQuery=='function';function isDomReady(){if(domReady.done){return false;}var d=document;if(d&&d.getElementsByTagName&&d.getElementById&&d.body){clearInterval(domReady.timer);domReady.timer=null;for(var i=0;i<domReady.ready.length;i++){domReady.ready[i].call();}domReady.ready=null;domReady.done=true;}}var domReady=jQ?jQuery:function(f){if(domReady.done){return f();}if(domReady.timer){domReady.ready.push(f);}else{domReady.ready=[f];domReady.timer=setInterval(isDomReady,13);}};function extend(to,from){if(from){for(key in from){if(from.hasOwnProperty(key)){to[key]=from[key];}}}return to;}function concatVars(vars){var out="";for(var key in vars){if(vars[key]){out+=[key]+'='+asString(vars[key])+'&';}}return out.substring(0,out.length-1);}function asString(obj){switch(typeOf(obj)){case'string':obj=obj.replace(new RegExp('(["\\\\])','g'),'\\$1');obj=obj.replace(/^\s?(\d+)%/,"$1pct");return'"'+obj+'"';case'array':return'['+map(obj,function(el){return asString(el);}).join(',')+']';case'function':return'"function()"';case'object':var str=[];for(var prop in obj){if(obj.hasOwnProperty(prop)){str.push('"'+prop+'":'+asString(obj[prop]));}}return'{'+str.join(',')+'}';}return String(obj).replace(/\s/g," ").replace(/\'/g,"\"");}function typeOf(obj){if(obj===null||obj===undefined){return false;}var type=typeof obj;return(type=='object'&&obj.push)?'array':type;}if(window.attachEvent){window.attachEvent("onbeforeunload",function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};});}function map(arr,func){var newArr=[];for(var i in arr){if(arr.hasOwnProperty(i)){newArr[i]=func(arr[i]);}}return newArr;}function getEmbedCode(p,c){var html='<embed type="application/x-shockwave-flash" ';if(p.id){extend(p,{name:p.id});}for(var key in p){if(p[key]!==null){html+=key+'="'+p[key]+'"\n\t';}}if(c){html+='flashvars=\''+concatVars(c)+'\'';}html+='/>';return html;}function getObjectCode(p,c,embeddable){var html='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ';html+='width="'+p.width+'" height="'+p.height+'"';if(!p.id&&document.all){p.id="_"+(""+Math.random()).substring(5);}if(p.id){html+=' id="'+p.id+'"';}html+='>';if(document.all){p.src+=((p.src.indexOf("?")!=-1?"&":"?")+Math.random());}html+='\n\t<param name="movie" value="'+p.src+'" />';var e=extend({},p);e.id=e.width=e.height=e.src=null;for(var k in e){if(e[k]!==null){html+='\n\t<param name="'+k+'" value="'+e[k]+'" />';}}if(c){html+='\n\t<param name="flashvars" value=\''+concatVars(c)+'\' />';}if(embeddable){html+=getEmbedCode(p,c);}html+="</object>";return html;}function getFullHTML(p,c){return getObjectCode(p,c,true);}function getHTML(p,c){var isNav=navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length;return(isNav)?getEmbedCode(p,c):getObjectCode(p,c);}window.flashembed=function(root,userParams,flashvars){var params={src:'#',width:'100%',height:'100%',version:null,onFail:null,expressInstall:null,debug:false,allowfullscreen:true,allowscriptaccess:'always',quality:'high',type:'application/x-shockwave-flash',pluginspage:'http://www.adobe.com/go/getflashplayer'};if(typeof userParams=='string'){userParams={src:userParams};}extend(params,userParams);var version=flashembed.getVersion();var required=params.version;var express=params.expressInstall;var debug=params.debug;if(typeof root=='string'){var el=document.getElementById(root);if(el){root=el;}else{domReady(function(){flashembed(root,userParams,flashvars);});return;}}if(!root){return;}if(!required||flashembed.isSupported(required)){params.onFail=params.version=params.expressInstall=params.debug=null;root.innerHTML=getHTML(params,flashvars);return root.firstChild;}else if(params.onFail){var ret=params.onFail.call(params,flashembed.getVersion(),flashvars);if(ret===true){root.innerHTML=ret;}}else if(required&&express&&flashembed.isSupported([6,65])){extend(params,{src:express});flashvars={MMredirectURL:location.href,MMplayerType:'PlugIn',MMdoctitle:document.title};root.innerHTML=getHTML(params,flashvars);}else{if(root.innerHTML.replace(/\s/g,'')!==''){}else{root.innerHTML="<h2>Flash version "+required+" or greater is required</h2>"+"<h3>"+(version[0]>0?"Your version is "+version:"You have no flash plugin installed")+"</h3>"+"<p>Download latest version from <a href='"+params.pluginspage+"'>here</a></p>";}}return root;};extend(window.flashembed,{getVersion:function(){var version=[0,0];if(navigator.plugins&&typeof navigator.plugins["Shockwave Flash"]=="object"){var _d=navigator.plugins["Shockwave Flash"].description;if(typeof _d!="undefined"){_d=_d.replace(/^.*\s+(\S+\s+\S+$)/,"$1");var _m=parseInt(_d.replace(/^(.*)\..*$/,"$1"),10);var _r=/r/.test(_d)?parseInt(_d.replace(/^.*r(.*)$/,"$1"),10):0;version=[_m,_r];}}else if(window.ActiveXObject){try{var _a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{_a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");version=[6,0];_a.AllowScriptAccess="always";}catch(ee){if(version[0]==6){return;}}try{_a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(eee){}}if(typeof _a=="object"){_d=_a.GetVariable("$version");if(typeof _d!="undefined"){_d=_d.replace(/^\S+\s+(.*)$/,"$1").split(",");version=[parseInt(_d[0],10),parseInt(_d[2],10)];}}}return version;},isSupported:function(version){var now=flashembed.getVersion();var ret=(now[0]>version[0])||(now[0]==version[0]&&now[1]>=version[1]);return ret;},domReady:domReady,asString:asString,getHTML:getHTML,getFullHTML:getFullHTML});if(jQ){jQuery.prototype.flashembed=function(params,flashvars){return this.each(function(){flashembed(this,params,flashvars);});};}})();
|
flowplayer/flowplayer.swf
ADDED
Binary file
|
flowplayer/style.css
ADDED
@@ -0,0 +1,41 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
|
2 |
+
body {
|
3 |
+
background-color:#fff;
|
4 |
+
font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;
|
5 |
+
text-align:center;
|
6 |
+
}
|
7 |
+
|
8 |
+
#page {
|
9 |
+
background-color:#efefef;
|
10 |
+
width:600px;
|
11 |
+
margin:50px auto;
|
12 |
+
padding:20px 150px 20px 50px;
|
13 |
+
min-height:600px;
|
14 |
+
border:2px solid #fff;
|
15 |
+
outline:1px solid #ccc;
|
16 |
+
text-align:left;
|
17 |
+
}
|
18 |
+
|
19 |
+
h1, h2 {
|
20 |
+
letter-spacing:-1px;
|
21 |
+
color:#2D5AC3;
|
22 |
+
font-weight:normal;
|
23 |
+
margin-bottom:-10px;
|
24 |
+
}
|
25 |
+
|
26 |
+
h1 {
|
27 |
+
font-size:22px;
|
28 |
+
}
|
29 |
+
|
30 |
+
h2 {
|
31 |
+
font-size:18px;
|
32 |
+
}
|
33 |
+
|
34 |
+
.less {
|
35 |
+
color:#999;
|
36 |
+
font-size:12px;
|
37 |
+
}
|
38 |
+
|
39 |
+
a {
|
40 |
+
color:#295c72;
|
41 |
+
}
|
images/finished_bg.png
ADDED
Binary file
|
images/play.png
ADDED
Binary file
|
images/replay.png
ADDED
Binary file
|
images/share.png
ADDED
Binary file
|
js/flowPlayer.js
ADDED
@@ -0,0 +1,449 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
* FlowPlayer external configuration file.
|
3 |
+
*
|
4 |
+
* NOTE! This file is only needed if you don't want to include all configuration
|
5 |
+
* in the embedding HTML file. Please see the installation instructions at
|
6 |
+
* http://flowpalyer.org
|
7 |
+
*
|
8 |
+
* Copyright 2005-2008 Anssi Piirainen
|
9 |
+
*
|
10 |
+
* All settings defined in this file can be alternatively defined in the
|
11 |
+
* embedding HTML object tag (as flashvars variables). Values defined in the
|
12 |
+
* object tag override values defined in this file. You could use this
|
13 |
+
* config file to provide defaults for multiple player instances that
|
14 |
+
* are used in a Web site. Individual instances can be then customized
|
15 |
+
* with their embedding HTML.
|
16 |
+
*
|
17 |
+
* Note that you should probably remove all the comments from this file
|
18 |
+
* before using it. That way the file will be smaller and will load faster.
|
19 |
+
*/
|
20 |
+
{
|
21 |
+
/*
|
22 |
+
* Instructs the player to load the configuration from an external config file.
|
23 |
+
* This can be a abosulte URL or a relative url (relative to the HTML page
|
24 |
+
* where the player is embedded).
|
25 |
+
*/
|
26 |
+
// configFileName: 'flowPlayer.js',
|
27 |
+
|
28 |
+
/*
|
29 |
+
* Instructs the player to load the configuration from a RTMP server.
|
30 |
+
* The player connects to the server listening in the address specified
|
31 |
+
* by this URL and calls a method 'getStreamPlayerConfig' that should return a
|
32 |
+
* valid FP configuration object.
|
33 |
+
*/
|
34 |
+
// rtmpConfigUrl: 'rtmp://localhost/myapp',
|
35 |
+
|
36 |
+
/*
|
37 |
+
* A param value to be passed to getStreamPlayerConfig(). A value 'foobar'
|
38 |
+
* will make the player to call getStreamPlayerConfig('foobsr')
|
39 |
+
*/
|
40 |
+
// rtmpConfigParam: 'anssi',
|
41 |
+
|
42 |
+
/*
|
43 |
+
* Name of the video file. Used if only one video is shown.
|
44 |
+
*
|
45 |
+
* Note for testing locally: Specify an empty baseURL '', if you want to load
|
46 |
+
* the video from your local disk from the directory that contains
|
47 |
+
* FlowPlayer.swf. In this case the videoFile parameter value should start
|
48 |
+
* with a slash, for example '/video.flv'.
|
49 |
+
*
|
50 |
+
* See also: 'baseURL' that affects this variable
|
51 |
+
*/
|
52 |
+
// videoFile: 'honda_accord.flv',
|
53 |
+
|
54 |
+
/*
|
55 |
+
* Clip to be used if the file specified with 'videoFile' or any of the clips in the playlist
|
56 |
+
* was not found. The missing video clips are replaced by this clip. This can be
|
57 |
+
* an image or a FLV clip. Typically this will contain an image/video saying
|
58 |
+
* "the video you requested cannot be found.....".
|
59 |
+
*
|
60 |
+
* The syntax for the value is the same is with the clips in a playlist
|
61 |
+
* including the possibility to have start/end and duration properties.
|
62 |
+
*
|
63 |
+
* See also: 'baseURL' that affects this variable
|
64 |
+
*/
|
65 |
+
noVideoClip: { url: 'main_clickToPlay.jpg', duration: 10 },
|
66 |
+
//noVideoClip: { url: 'MiltonFriedmanonLimi.flv' },
|
67 |
+
|
68 |
+
/*
|
69 |
+
* Playlist is used to publish several videos using one player instance.
|
70 |
+
* You can also have images in the playlist. The playback pauses in the
|
71 |
+
* image unless a 'duration' property is given for the image:
|
72 |
+
|
73 |
+
* * The clips in the playlist may have following properties:
|
74 |
+
*
|
75 |
+
* name: Name for the clip to be shown in the playlist view. If this is
|
76 |
+
* not given, the clip will be hidden from the view.
|
77 |
+
*
|
78 |
+
* url: The URL used to load the clip.
|
79 |
+
*
|
80 |
+
* type: One of 'video', 'flv', 'swf', 'jpg'. Optional, determined from the URL's filename extension
|
81 |
+
* if that is present. 'video' means a video file in any format supported by Flash.
|
82 |
+
* 'flv' is present here for backward compatibility, use 'video' in new FlowPlayer installations
|
83 |
+
* now. Defaults to 'video' if the extension is not present in the URL.
|
84 |
+
*
|
85 |
+
* start: The start time (seconds) from where to start the playback. A nonzero
|
86 |
+
* value can only be used when using a streaming server!!
|
87 |
+
* end: The end time (seconds) where to stop the playback.
|
88 |
+
*
|
89 |
+
* duration: The duration the image is to be shown. If not given the playback
|
90 |
+
* pauses when the image is reached in the list.
|
91 |
+
*
|
92 |
+
* protected: (true/false) Apply inlinine linking protection for this clip?
|
93 |
+
* Optional, defaults to false.
|
94 |
+
*
|
95 |
+
* linkUrl: Associates a hyperlink pointing to the specified URL. The linked
|
96 |
+
* document will be opened to the browser when the clip area is clicked.
|
97 |
+
* Specifying this parameter will replace the normal pause/resume behavior
|
98 |
+
* that is associated to clicking the display area. If you specify an empty
|
99 |
+
* linkUrl '' the pause/resume behavior is disabled but no hyperlink
|
100 |
+
* is created.
|
101 |
+
* linkWindow: Specifies the name of the browser window or frame into which to load
|
102 |
+
* the linked document. Can be a custom name or one of presets: '_blank',
|
103 |
+
* '_parent', '_self', '_top'. (optional, defaults to '_blank')
|
104 |
+
*
|
105 |
+
* controlEnabled: (true/false) Enable transport control buttons for this clip?
|
106 |
+
* Optional, defaults to true.
|
107 |
+
*
|
108 |
+
* allowResize: (true/false) Allow resizing this clip according to the menu selection.
|
109 |
+
* Optional, defaults to true.
|
110 |
+
*
|
111 |
+
* overlay: A filename pointing to an image that will be placed on top of this image clip. This
|
112 |
+
* is only applicable to image clips (jpg or png files). Essentially this layers two images
|
113 |
+
* on top of each other. Typically the image on top is a big play button that is used on
|
114 |
+
* top of an image taken from the main movie.
|
115 |
+
*
|
116 |
+
* overlayId: ID that specifies a built-in overlay to be used. Currently the player supports
|
117 |
+
* one built-in overlay with ID 'play'. It renders a large play button with mouse hover color change.
|
118 |
+
* You can use this on top of image clips (one clip with both the 'url' property and
|
119 |
+
* 'overlayId' property).
|
120 |
+
* You can also specify a clip that only has this ID. In that
|
121 |
+
* case you should place it immediately before or after a FLV clip. This overlay-only
|
122 |
+
* clip is then rendered on top of the first or the last frame of the FLV video.
|
123 |
+
*
|
124 |
+
* live: (true/false) Is this a live stream (played from a media server)?
|
125 |
+
*
|
126 |
+
* showOnLoadBegin: (true/false) If true, make this clip visible when the fist bits have been loaded.
|
127 |
+
* If false, do not show this clip (show the background instead) before the buffer is filled
|
128 |
+
* and the playback starts. Optional, defaults to true.
|
129 |
+
*
|
130 |
+
* maxPlayCount: The maximum play count for this clip. The clip is removed from the playlist when
|
131 |
+
* the playcount reaches this amount.
|
132 |
+
*
|
133 |
+
* suggestedClipsInfoUrl: URL used to fetch suggestions (related videos) information from the server
|
134 |
+
*
|
135 |
+
* See also: 'baseURL' is prefixed with each URL
|
136 |
+
*/
|
137 |
+
playList: [
|
138 |
+
{ url: 'main_clickToPlay.jpg' },
|
139 |
+
{ name: 'Honda Accord', url: '!honda_accord.flv' },
|
140 |
+
{ name: 'River', url: 'river.flv' },
|
141 |
+
{ name: 'Ounasvaara', url: 'ounasvaara.flv' }
|
142 |
+
],
|
143 |
+
|
144 |
+
/*
|
145 |
+
* Specifies wether the playlist control buttons should be shown in the player SWF component or not.
|
146 |
+
* Optional, defaults to the value of showPlayList.
|
147 |
+
*/
|
148 |
+
showPlayListButtons: true,
|
149 |
+
|
150 |
+
/*
|
151 |
+
* Streaming server connection URL.
|
152 |
+
* You don't need this with lighttpd, just use the streamingServer setting (see below) with it.
|
153 |
+
*/
|
154 |
+
// streamingServerURL: 'rtmp://localahost:oflaDemo',
|
155 |
+
|
156 |
+
/*
|
157 |
+
* baseURL specifies the URL that is appended in front of different file names
|
158 |
+
* given in this file.
|
159 |
+
*
|
160 |
+
* You don't need to specify this at all if you place the video next to
|
161 |
+
* the player SWF file on the Web server (to be available under the same URL path).
|
162 |
+
*/
|
163 |
+
// baseURL: 'http://flowplayer.sourceforge.net/video',
|
164 |
+
|
165 |
+
|
166 |
+
/*
|
167 |
+
* What kind of streaming server? Available options: 'fms', 'red5', 'lighttpd'
|
168 |
+
*/
|
169 |
+
// streamingServer: 'fms',
|
170 |
+
|
171 |
+
/*
|
172 |
+
* Specifies whether thumbnail information is contained in the FLV's cue point
|
173 |
+
* metadata. Cue points can be injected into the FLV file using
|
174 |
+
* for example Flvtool2. See the FlowPlayer web site for more info.
|
175 |
+
* (optional, defaults to false)
|
176 |
+
*
|
177 |
+
* See also: cuePoints below for an alternative way of specifying thumb metadata
|
178 |
+
*/
|
179 |
+
// thumbsOnFLV: true,
|
180 |
+
|
181 |
+
/*
|
182 |
+
* Thumbnails specific to cue points. Use this if you don't want to
|
183 |
+
* embed thumbnail metadata into the FLV's cue points.
|
184 |
+
* If you have thumbNails defined here you should have thumbsOnFLV: false !
|
185 |
+
* thumb times are given in seconds
|
186 |
+
*/
|
187 |
+
// thumbs: [
|
188 |
+
// { thumbNail: 'Thumb1.jpg', time: 10 },
|
189 |
+
// { thumbNail: 'Thumb2.jpg', time: 24 },
|
190 |
+
// { thumbNail: 'Thumb3.jpg', time: 54 },
|
191 |
+
// { thumbNail: 'Thumb4.jpg', time: 74 },
|
192 |
+
// { thumbNail: 'Thumb5.jpg', time: 94 },
|
193 |
+
// { thumbNail: 'Thumb6.jpg', time: 110 }
|
194 |
+
// ],
|
195 |
+
// Location of the thumbnail files
|
196 |
+
// thumbLocation: 'http://www.kolumbus.fi/apiirain/video',
|
197 |
+
|
198 |
+
/*
|
199 |
+
* 'autoPlay' variable defines whether playback begins immediately or not.
|
200 |
+
*
|
201 |
+
* Note that currently with red5 you should not have false in autoPlay
|
202 |
+
* when you specify a nonzero starting position for the video clip. This is because red5
|
203 |
+
* does not send FLV metadata when the playback starts from a nonzero value.
|
204 |
+
*
|
205 |
+
* (optional, defaults to true)
|
206 |
+
*/
|
207 |
+
autoPlay: true,
|
208 |
+
|
209 |
+
/*
|
210 |
+
* 'autoBuffering' specifies wheter to start loading the video stream into
|
211 |
+
* buffer memory immediately. Only meaningful if 'autoPlay' is set to
|
212 |
+
* false. (optional, defaults to true)
|
213 |
+
*/
|
214 |
+
autoBuffering: true,
|
215 |
+
|
216 |
+
/*
|
217 |
+
* 'startingBufferLength' specifies the video buffer length to be used to kick
|
218 |
+
* off the playback. This is used in the beginning of the playback and every time
|
219 |
+
* after the player has ran out of buffer memory.
|
220 |
+
* More info at: http://www.progettosinergia.com/flashvideo/flashvideoblog.htm#031205
|
221 |
+
* (optional, defaults to the value of 'bufferLength' setting)
|
222 |
+
*
|
223 |
+
* see also: bufferLength
|
224 |
+
*/
|
225 |
+
// startingBufferLength: 5,
|
226 |
+
|
227 |
+
/*
|
228 |
+
* 'bufferLength' specifies the video buffer length in seconds. This is used
|
229 |
+
* after the playback has started with the initial buffer length. You should
|
230 |
+
* use an arbitrary large value here to ensure stable playback.
|
231 |
+
* (optional, defaults to 10 seconds)
|
232 |
+
*
|
233 |
+
* see also: startingBufferLength
|
234 |
+
*/
|
235 |
+
bufferLength: 20,
|
236 |
+
|
237 |
+
/*
|
238 |
+
* 'loop' defines whether the playback should loop to the first clip after
|
239 |
+
* all clips in the playlist have been shown. It is used as the
|
240 |
+
* default state of the toggle button that controls looping. (optional,
|
241 |
+
* defaults to true)
|
242 |
+
*/
|
243 |
+
loop: true,
|
244 |
+
|
245 |
+
/*
|
246 |
+
* Rewind back to the fist clip in the playlist when end of the list has been reached?
|
247 |
+
* This option only has effect if loop is false (please see loop variable above).
|
248 |
+
* (optional, defaults to false)
|
249 |
+
*/
|
250 |
+
autoRewind: true,
|
251 |
+
|
252 |
+
/*
|
253 |
+
* Specifies wether the loop toggle button should be shown in the player SWF component or not.
|
254 |
+
* Optional, defaults to false.
|
255 |
+
*/
|
256 |
+
// showLoopButton: true,
|
257 |
+
|
258 |
+
/*
|
259 |
+
* Specifies the height to be allocated for the video display. This is the
|
260 |
+
* maximum height available for the different resizing options.
|
261 |
+
*/
|
262 |
+
videoHeight: 320,
|
263 |
+
|
264 |
+
/*
|
265 |
+
* Specifies the width for the control buttons area. Optiona, defaults to the
|
266 |
+
* width setting used in the embedding code.
|
267 |
+
*/
|
268 |
+
// controlsWidth: 480,
|
269 |
+
|
270 |
+
/*
|
271 |
+
* Specifies how the video is scaled initially. This can be then changed by
|
272 |
+
* the user through the menu. (optional, defaults to 'fit')
|
273 |
+
* Possible values:
|
274 |
+
* 'fit' Fit to window by preserving the aspect ratios encoded in the FLV metadata.
|
275 |
+
* This is the default behavior.
|
276 |
+
* 'half' Half size (preserves aspect ratios)
|
277 |
+
* 'orig' Use the dimensions encoded in FLV. If the video is too big for the
|
278 |
+
* available space the video is scaled as if using the 'fit' option.
|
279 |
+
* 'scale' Scale the video to fill all available space for the video. Ignores
|
280 |
+
* the dimensions in metadata.
|
281 |
+
*
|
282 |
+
*/
|
283 |
+
initialScale: 'fit',
|
284 |
+
|
285 |
+
/*
|
286 |
+
* Specifies if the menu containing the size options should be shown or not.
|
287 |
+
* (optional, defaults to true)
|
288 |
+
// showMenu: false,
|
289 |
+
|
290 |
+
/*
|
291 |
+
* 'hideControls' if set to true, hides all buttons and the progress bar
|
292 |
+
* leaving only the video showing (optional, defaults to false)
|
293 |
+
*/
|
294 |
+
hideControls: false,
|
295 |
+
|
296 |
+
/*
|
297 |
+
* URL that specifies a base URL that points to a folder containing
|
298 |
+
* images used to skin the player. You must specify this if you intend
|
299 |
+
* to load external button images (see 'loadButtonImages' below).
|
300 |
+
*/
|
301 |
+
skinImagesBaseURL: 'http://flowplayer.sourceforge.net/resources'
|
302 |
+
|
303 |
+
/*
|
304 |
+
* Will button images be loaded from external files, or will images embedded
|
305 |
+
* in the player SWF component be used? Set this to false if you want to "skin"
|
306 |
+
* the buttons. Optional, defaults to true.
|
307 |
+
*
|
308 |
+
* NOTE: If you set this to false, you need to have the skin images available
|
309 |
+
* on the server! Otherwise the player will not show up at all or will show
|
310 |
+
* up corrupted.
|
311 |
+
*
|
312 |
+
* See also: 'skinImagesBaseURL' that affects this variable
|
313 |
+
*/
|
314 |
+
// useEmbeddedButtonImages: false,
|
315 |
+
|
316 |
+
/*
|
317 |
+
* 'splashImageFile' specifies an image file to be used as a splash image.
|
318 |
+
* This is useful if 'autoPlay' is set to false and you want to show a
|
319 |
+
* welcome image before the video is played. Should be in JPG format. The
|
320 |
+
* value of 'baseURL' is used similarily as with the video file name and
|
321 |
+
* therefore the video and the image files should be placed in the Web
|
322 |
+
* server next to each other.
|
323 |
+
*
|
324 |
+
* NOTE: If you set a value for this, you need to have the splash image available
|
325 |
+
* on the server! Otherwise the player will not show up at all or will show
|
326 |
+
* up corrupted.
|
327 |
+
*
|
328 |
+
* NOTE2: You can also specify the splash in a playlist. This is just
|
329 |
+
* an alternative way of doing it. It was preserved for backward compatibility.
|
330 |
+
*
|
331 |
+
* See also: 'baseURL' that affects this variable
|
332 |
+
*/
|
333 |
+
// splashImageFile: 'main_clickToPlay.jpg',
|
334 |
+
|
335 |
+
/*
|
336 |
+
* Should the splash image be scaled to fit the entire video area? If false,
|
337 |
+
* the image will be centered. Optional, defaults to false.
|
338 |
+
*/
|
339 |
+
// scaleSplash: false,
|
340 |
+
|
341 |
+
/*
|
342 |
+
* 'progressBarColor1' defines the color of the progress bar at the bottom
|
343 |
+
* and top edges. Specified in hexadecimal triplet form indicating the RGB
|
344 |
+
* color component values. (optional)
|
345 |
+
*/
|
346 |
+
// progressBarColor1: 0xFFFFFF,
|
347 |
+
|
348 |
+
|
349 |
+
/*
|
350 |
+
* 'progressBarColor2' defines the color in the middle of the progress bar.
|
351 |
+
* The value of this and 'progressBarColor1' variables define the gradient
|
352 |
+
* color fill of the progress bar. (optional)
|
353 |
+
*/
|
354 |
+
// progressBarColor2: 0xDDFFDD,
|
355 |
+
|
356 |
+
/*
|
357 |
+
* 'bufferBarColor1' defines the color of the buffer size indicator bar at the bottom
|
358 |
+
* and top edges. (optional)
|
359 |
+
*/
|
360 |
+
// bufferBarColor1: 0xFFFFFF,
|
361 |
+
|
362 |
+
|
363 |
+
/*
|
364 |
+
* 'bufferBarColor2' defines the color of the buffer size indicator bar in the middle
|
365 |
+
* of the bar. (optional)
|
366 |
+
*/
|
367 |
+
// bufferBarColor2: 0xDDFFDD,
|
368 |
+
|
369 |
+
/*
|
370 |
+
* 'progressBarBorderColor1' defines the color of the progress bar's border at the bottom
|
371 |
+
* and top edges. (optional)
|
372 |
+
*/
|
373 |
+
// progressBarBorderColor1: 0xDDDDDD,
|
374 |
+
|
375 |
+
|
376 |
+
/*
|
377 |
+
* 'progressBarBorderColor2' defines the color of the progress bar's border in the middle
|
378 |
+
* of the bar. (optional)
|
379 |
+
*/
|
380 |
+
// progressBarBorderColor2: 0xEEEEEE,
|
381 |
+
|
382 |
+
/*
|
383 |
+
* 'bufferingAnimationColor' defines the color of the moving bars used in the buffering
|
384 |
+
* animation. (optional)
|
385 |
+
*/
|
386 |
+
// bufferingAnimationColor: 0x0000FF,
|
387 |
+
|
388 |
+
/*
|
389 |
+
* 'controlsAreaBorderColor' defines the color of the border behind buttons and progress bar
|
390 |
+
* (optional)
|
391 |
+
*/
|
392 |
+
// controlsAreaBorderColor: 0x1234,
|
393 |
+
|
394 |
+
/*
|
395 |
+
* 'timeDisplayFontColor' defines the color of the progress/duration time display
|
396 |
+
* (optional)
|
397 |
+
*/
|
398 |
+
// timeDisplayFontColor: 0xAABBCC,
|
399 |
+
|
400 |
+
/*
|
401 |
+
* Height of the progress bar. (optional)
|
402 |
+
*/
|
403 |
+
// progressBarHeight: 10,
|
404 |
+
|
405 |
+
/*
|
406 |
+
* Height of the progress bar area. (optional)
|
407 |
+
*/
|
408 |
+
// progressBarAreaHeight: 10,
|
409 |
+
|
410 |
+
/*
|
411 |
+
* Name of the authentication code file name that is used to prevent inline linking
|
412 |
+
* of video and image files. This can be a complete URL or just a file name relative
|
413 |
+
* to the location from where the player is loaded. (optional, defaults to flowplayer_auth.txt)
|
414 |
+
*/
|
415 |
+
// authFileName: 'http://www.mytube.org/authCode.txt',
|
416 |
+
|
417 |
+
/*
|
418 |
+
* The URL pointing to a sctipt that opens the player full screen.
|
419 |
+
* If this is not configured explicitly, the default script,
|
420 |
+
* http://flowplayer.sourceforge.net/fullscreen.js, is used.
|
421 |
+
*/
|
422 |
+
// fullScreenScriptURL: 'http://mysite.org/fullscreen.js'
|
423 |
+
|
424 |
+
/**
|
425 |
+
* Specifies which menu items will be show. This is an array that contains a boolean
|
426 |
+
* value for each of the items. By default shows them all except "full screen".
|
427 |
+
*/
|
428 |
+
// menuItems[
|
429 |
+
// true, // show 'Fit to window'
|
430 |
+
// true, // show 'Half size'
|
431 |
+
// true, // show 'Original size'
|
432 |
+
// true, // show 'Fill window'
|
433 |
+
// true, // show 'Full screen'
|
434 |
+
// false // hide 'Embed...'
|
435 |
+
// ],
|
436 |
+
|
437 |
+
|
438 |
+
/*
|
439 |
+
* Specifies wether the full screen button should be shown in the player SWF component or not.
|
440 |
+
* Optional, defaults to true.
|
441 |
+
*/
|
442 |
+
// showFullScreenButton: false,
|
443 |
+
|
444 |
+
/*
|
445 |
+
* Use the Flash 9 native full screen mode.
|
446 |
+
*/
|
447 |
+
// useNativeFullScreen: true,
|
448 |
+
}
|
449 |
+
|
js/jscolor/arrow.gif
ADDED
Binary file
|
js/jscolor/cross.gif
ADDED
Binary file
|
js/jscolor/hs.png
ADDED
Binary file
|
js/jscolor/hv.png
ADDED
Binary file
|
js/jscolor/jscolor.js
ADDED
@@ -0,0 +1,830 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* jscolor, JavaScript Color Picker
|
3 |
+
*
|
4 |
+
* @version 1.2.3
|
5 |
+
* @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License
|
6 |
+
* @author Honza Odvarko <honza@odvarko.cz>
|
7 |
+
* @created 2008-06-15
|
8 |
+
* @updated 2009-02-25
|
9 |
+
* @link http://jscolor.com
|
10 |
+
*/
|
11 |
+
|
12 |
+
|
13 |
+
var jscolor = {
|
14 |
+
|
15 |
+
|
16 |
+
dir : '', // location of jscolor directory (leave empty to autodetect)
|
17 |
+
bindClass : 'color', // class name
|
18 |
+
binding : true, // automatic binding via <input class="...">
|
19 |
+
preloading : true, // use image preloading?
|
20 |
+
|
21 |
+
|
22 |
+
install : function() {
|
23 |
+
jscolor.addEvent(window, 'load', jscolor.init)
|
24 |
+
},
|
25 |
+
|
26 |
+
|
27 |
+
init : function() {
|
28 |
+
if(jscolor.binding) {
|
29 |
+
jscolor.bind()
|
30 |
+
}
|
31 |
+
if(jscolor.preloading) {
|
32 |
+
jscolor.preload()
|
33 |
+
}
|
34 |
+
},
|
35 |
+
|
36 |
+
|
37 |
+
getDir : function() {
|
38 |
+
if(!jscolor.dir) {
|
39 |
+
var detected = jscolor.detectDir()
|
40 |
+
jscolor.dir = detected!=false ? detected : 'jscolor/'
|
41 |
+
}
|
42 |
+
return jscolor.dir
|
43 |
+
},
|
44 |
+
|
45 |
+
|
46 |
+
detectDir : function() {
|
47 |
+
var base = location.href
|
48 |
+
|
49 |
+
var e = document.getElementsByTagName('base')
|
50 |
+
for(var i=0; i<e.length; i++) {
|
51 |
+
if(e[i].href) base = e[i].href
|
52 |
+
}
|
53 |
+
|
54 |
+
var e = document.getElementsByTagName('script')
|
55 |
+
for(var i=0; i<e.length; i++) {
|
56 |
+
if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
|
57 |
+
var src = new jscolor.URI(e[i].src)
|
58 |
+
var srcAbs = src.toAbsolute(base)
|
59 |
+
srcAbs.path = srcAbs.path.replace(/[^\/]+$/, '') // remove filename
|
60 |
+
delete srcAbs.query
|
61 |
+
delete srcAbs.fragment
|
62 |
+
return srcAbs.toString()
|
63 |
+
}
|
64 |
+
}
|
65 |
+
return false
|
66 |
+
},
|
67 |
+
|
68 |
+
|
69 |
+
bind : function() {
|
70 |
+
var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i')
|
71 |
+
var e = document.getElementsByTagName('input')
|
72 |
+
for(var i=0; i<e.length; i++) {
|
73 |
+
var m
|
74 |
+
if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
|
75 |
+
var prop = {}
|
76 |
+
if(m[3]) {
|
77 |
+
try {
|
78 |
+
eval('prop='+m[3])
|
79 |
+
} catch(eInvalidProp) {}
|
80 |
+
}
|
81 |
+
e[i].color = new jscolor.color(e[i], prop)
|
82 |
+
}
|
83 |
+
}
|
84 |
+
},
|
85 |
+
|
86 |
+
|
87 |
+
preload : function() {
|
88 |
+
for(var fn in jscolor.imgRequire) {
|
89 |
+
jscolor.loadImage(fn)
|
90 |
+
}
|
91 |
+
},
|
92 |
+
|
93 |
+
|
94 |
+
images : {
|
95 |
+
pad : [ 181, 101 ],
|
96 |
+
sld : [ 16, 101 ],
|
97 |
+
cross : [ 15, 15 ],
|
98 |
+
arrow : [ 7, 11 ]
|
99 |
+
},
|
100 |
+
|
101 |
+
|
102 |
+
imgRequire : {},
|
103 |
+
imgLoaded : {},
|
104 |
+
|
105 |
+
|
106 |
+
requireImage : function(filename) {
|
107 |
+
jscolor.imgRequire[filename] = true
|
108 |
+
},
|
109 |
+
|
110 |
+
|
111 |
+
loadImage : function(filename) {
|
112 |
+
if(!jscolor.imgLoaded[filename]) {
|
113 |
+
jscolor.imgLoaded[filename] = new Image()
|
114 |
+
jscolor.imgLoaded[filename].src = jscolor.getDir()+filename
|
115 |
+
}
|
116 |
+
},
|
117 |
+
|
118 |
+
|
119 |
+
fetchElement : function(mixed) {
|
120 |
+
return typeof(mixed) == 'string' ? document.getElementById(mixed) : mixed
|
121 |
+
},
|
122 |
+
|
123 |
+
|
124 |
+
addEvent : function(el, evnt, func) {
|
125 |
+
if(el.addEventListener) {
|
126 |
+
return el.addEventListener(evnt, func, false)
|
127 |
+
} else if(el.attachEvent) {
|
128 |
+
return el.attachEvent('on'+evnt, func)
|
129 |
+
} else {
|
130 |
+
return false
|
131 |
+
}
|
132 |
+
},
|
133 |
+
|
134 |
+
|
135 |
+
fireEvent : function(el, evnt) {
|
136 |
+
if(!el) {
|
137 |
+
return false
|
138 |
+
} else if(document.createEventObject) {
|
139 |
+
var ev = document.createEventObject()
|
140 |
+
return el.fireEvent('on'+evnt, ev)
|
141 |
+
} else if(document.createEvent) {
|
142 |
+
var ev = document.createEvent('HTMLEvents')
|
143 |
+
ev.initEvent(evnt, true, true)
|
144 |
+
return el.dispatchEvent(ev)
|
145 |
+
} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
|
146 |
+
return el['on'+evnt]()
|
147 |
+
} else {
|
148 |
+
return false
|
149 |
+
}
|
150 |
+
},
|
151 |
+
|
152 |
+
|
153 |
+
getElementPos : function(e) {
|
154 |
+
var e1=e, e2=e
|
155 |
+
var x=0, y=0
|
156 |
+
if(e1.offsetParent) {
|
157 |
+
do {
|
158 |
+
x += e1.offsetLeft
|
159 |
+
y += e1.offsetTop
|
160 |
+
} while(e1 = e1.offsetParent)
|
161 |
+
}
|
162 |
+
while((e2 = e2.parentNode) && e2.nodeName != 'BODY') {
|
163 |
+
x -= e2.scrollLeft
|
164 |
+
y -= e2.scrollTop
|
165 |
+
}
|
166 |
+
return [x, y]
|
167 |
+
},
|
168 |
+
|
169 |
+
|
170 |
+
getElementSize : function(e) {
|
171 |
+
return [e.offsetWidth, e.offsetHeight]
|
172 |
+
},
|
173 |
+
|
174 |
+
|
175 |
+
getMousePos : function(e) {
|
176 |
+
if(!e) e = window.event
|
177 |
+
if(typeof e.pageX == 'number') {
|
178 |
+
return [e.pageX, e.pageY]
|
179 |
+
} else if(typeof e.clientX == 'number') {
|
180 |
+
return [
|
181 |
+
e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
|
182 |
+
e.clientY + document.body.scrollTop + document.documentElement.scrollTop
|
183 |
+
]
|
184 |
+
}
|
185 |
+
},
|
186 |
+
|
187 |
+
|
188 |
+
getViewPos : function() {
|
189 |
+
if(typeof window.pageYOffset == 'number') {
|
190 |
+
return [window.pageXOffset, window.pageYOffset]
|
191 |
+
} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
|
192 |
+
return [document.body.scrollLeft, document.body.scrollTop]
|
193 |
+
} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
|
194 |
+
return [document.documentElement.scrollLeft, document.documentElement.scrollTop]
|
195 |
+
} else {
|
196 |
+
return [0, 0]
|
197 |
+
}
|
198 |
+
},
|
199 |
+
|
200 |
+
|
201 |
+
getViewSize : function() {
|
202 |
+
if(typeof window.innerWidth == 'number') {
|
203 |
+
return [window.innerWidth, window.innerHeight]
|
204 |
+
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
|
205 |
+
return [document.body.clientWidth, document.body.clientHeight]
|
206 |
+
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
|
207 |
+
return [document.documentElement.clientWidth, document.documentElement.clientHeight]
|
208 |
+
} else {
|
209 |
+
return [0, 0]
|
210 |
+
}
|
211 |
+
},
|
212 |
+
|
213 |
+
|
214 |
+
URI : function(uri) { // See RFC3986
|
215 |
+
|
216 |
+
this.scheme = null
|
217 |
+
this.authority = null
|
218 |
+
this.path = ''
|
219 |
+
this.query = null
|
220 |
+
this.fragment = null
|
221 |
+
|
222 |
+
this.parse = function(uri) {
|
223 |
+
var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/)
|
224 |
+
this.scheme = m[3] ? m[2] : null
|
225 |
+
this.authority = m[5] ? m[6] : null
|
226 |
+
this.path = m[7]
|
227 |
+
this.query = m[9] ? m[10] : null
|
228 |
+
this.fragment = m[12] ? m[13] : null
|
229 |
+
return this
|
230 |
+
}
|
231 |
+
|
232 |
+
this.toString = function() {
|
233 |
+
var result = ''
|
234 |
+
if(this.scheme != null) result = result + this.scheme + ':'
|
235 |
+
if(this.authority != null) result = result + '//' + this.authority
|
236 |
+
if(this.path != null) result = result + this.path
|
237 |
+
if(this.query != null) result = result + '?' + this.query
|
238 |
+
if(this.fragment != null) result = result + '#' + this.fragment
|
239 |
+
return result
|
240 |
+
}
|
241 |
+
|
242 |
+
this.toAbsolute = function(base) {
|
243 |
+
var base = new jscolor.URI(base)
|
244 |
+
var r = this
|
245 |
+
var t = new jscolor.URI
|
246 |
+
|
247 |
+
if(base.scheme == null) return false
|
248 |
+
|
249 |
+
if(r.scheme != null && r.scheme.toLowerCase() == base.scheme.toLowerCase()) {
|
250 |
+
r.scheme = null
|
251 |
+
}
|
252 |
+
|
253 |
+
if(r.scheme != null) {
|
254 |
+
t.scheme = r.scheme
|
255 |
+
t.authority = r.authority
|
256 |
+
t.path = removeDotSegments(r.path)
|
257 |
+
t.query = r.query
|
258 |
+
} else {
|
259 |
+
if(r.authority != null) {
|
260 |
+
t.authority = r.authority
|
261 |
+
t.path = removeDotSegments(r.path)
|
262 |
+
t.query = r.query
|
263 |
+
} else {
|
264 |
+
if(r.path == '') {
|
265 |
+
t.path = base.path
|
266 |
+
if(r.query != null) {
|
267 |
+
t.query = r.query
|
268 |
+
} else {
|
269 |
+
t.query = base.query
|
270 |
+
}
|
271 |
+
} else {
|
272 |
+
if(r.path.substr(0,1) == '/') {
|
273 |
+
t.path = removeDotSegments(r.path)
|
274 |
+
} else {
|
275 |
+
if(base.authority != null && base.path == '') {
|
276 |
+
t.path = '/'+r.path
|
277 |
+
} else {
|
278 |
+
t.path = base.path.replace(/[^\/]+$/,'')+r.path
|
279 |
+
}
|
280 |
+
t.path = removeDotSegments(t.path)
|
281 |
+
}
|
282 |
+
t.query = r.query
|
283 |
+
}
|
284 |
+
t.authority = base.authority
|
285 |
+
}
|
286 |
+
t.scheme = base.scheme
|
287 |
+
}
|
288 |
+
t.fragment = r.fragment
|
289 |
+
|
290 |
+
return t
|
291 |
+
}
|
292 |
+
|
293 |
+
function removeDotSegments(path) {
|
294 |
+
var out = ''
|
295 |
+
while(path) {
|
296 |
+
if(path.substr(0,3)=='../' || path.substr(0,2)=='./') {
|
297 |
+
path = path.replace(/^\.+/,'').substr(1)
|
298 |
+
} else if(path.substr(0,3)=='/./' || path=='/.') {
|
299 |
+
path = '/'+path.substr(3)
|
300 |
+
} else if(path.substr(0,4)=='/../' || path=='/..') {
|
301 |
+
path = '/'+path.substr(4)
|
302 |
+
out = out.replace(/\/?[^\/]*$/, '')
|
303 |
+
} else if(path=='.' || path=='..') {
|
304 |
+
path = ''
|
305 |
+
} else {
|
306 |
+
var rm = path.match(/^\/?[^\/]*/)[0]
|
307 |
+
path = path.substr(rm.length)
|
308 |
+
out = out + rm
|
309 |
+
}
|
310 |
+
}
|
311 |
+
return out
|
312 |
+
}
|
313 |
+
|
314 |
+
if(uri) {
|
315 |
+
this.parse(uri)
|
316 |
+
}
|
317 |
+
|
318 |
+
},
|
319 |
+
|
320 |
+
|
321 |
+
/*
|
322 |
+
* Usage example:
|
323 |
+
* var myColor = new jscolor.color(myInputElement)
|
324 |
+
*/
|
325 |
+
|
326 |
+
color : function(target, prop) {
|
327 |
+
|
328 |
+
|
329 |
+
this.required = true // refuse empty values?
|
330 |
+
this.adjust = true // adjust value to uniform notation?
|
331 |
+
this.hash = false // prefix color with # symbol?
|
332 |
+
this.caps = true // uppercase?
|
333 |
+
this.valueElement = target // value holder
|
334 |
+
this.styleElement = target // where to reflect current color
|
335 |
+
this.hsv = [0, 0, 1] // read-only 0-6, 0-1, 0-1
|
336 |
+
this.rgb = [1, 1, 1] // read-only 0-1, 0-1, 0-1
|
337 |
+
|
338 |
+
this.pickerOnfocus = true // display picker on focus?
|
339 |
+
this.pickerMode = 'HSV' // HSV | HVS
|
340 |
+
this.pickerPosition = 'bottom' // left | right | top | bottom
|
341 |
+
this.pickerFace = 10 // px
|
342 |
+
this.pickerFaceColor = 'ThreeDFace' // CSS color
|
343 |
+
this.pickerBorder = 1 // px
|
344 |
+
this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight' // CSS color
|
345 |
+
this.pickerInset = 1 // px
|
346 |
+
this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow' // CSS color
|
347 |
+
this.pickerZIndex = 10000
|
348 |
+
|
349 |
+
|
350 |
+
for(var p in prop) this[p] = prop[p]
|
351 |
+
|
352 |
+
|
353 |
+
this.hidePicker = function() {
|
354 |
+
if(isPickerOwner()) {
|
355 |
+
removePicker()
|
356 |
+
}
|
357 |
+
}
|
358 |
+
|
359 |
+
|
360 |
+
this.showPicker = function() {
|
361 |
+
if(!isPickerOwner()) {
|
362 |
+
var tp = jscolor.getElementPos(target) // target pos
|
363 |
+
var ts = jscolor.getElementSize(target) // target size
|
364 |
+
var vp = jscolor.getViewPos() // view pos
|
365 |
+
var vs = jscolor.getViewSize() // view size
|
366 |
+
var ps = [ // picker size
|
367 |
+
2*this.pickerBorder + 4*this.pickerInset + 2*this.pickerFace + jscolor.images.pad[0] + 2*jscolor.images.arrow[0] + jscolor.images.sld[0],
|
368 |
+
2*this.pickerBorder + 2*this.pickerInset + 2*this.pickerFace + jscolor.images.pad[1]
|
369 |
+
]
|
370 |
+
var a, b, c
|
371 |
+
switch(this.pickerPosition.toLowerCase()) {
|
372 |
+
case 'left': a=1; b=0; c=-1; break
|
373 |
+
case 'right':a=1; b=0; c=1; break
|
374 |
+
case 'top': a=0; b=1; c=-1; break
|
375 |
+
default: a=0; b=1; c=1; break
|
376 |
+
}
|
377 |
+
var l = (ts[b]+ps[b])/2
|
378 |
+
var pp = [ // picker pos
|
379 |
+
-vp[a]+tp[a]+ps[a] > vs[a] ?
|
380 |
+
(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
|
381 |
+
tp[a],
|
382 |
+
-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
|
383 |
+
(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
|
384 |
+
(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
|
385 |
+
]
|
386 |
+
drawPicker(pp[a], pp[b])
|
387 |
+
}
|
388 |
+
}
|
389 |
+
|
390 |
+
|
391 |
+
this.importColor = function() {
|
392 |
+
if(!valueElement) {
|
393 |
+
this.exportColor()
|
394 |
+
} else {
|
395 |
+
if(!this.adjust) {
|
396 |
+
if(!this.fromString(valueElement.value, leaveValue)) {
|
397 |
+
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor
|
398 |
+
styleElement.style.color = styleElement.jscStyle.color
|
399 |
+
this.exportColor(leaveValue | leaveStyle)
|
400 |
+
}
|
401 |
+
} else if(!this.required && /^\s*$/.test(valueElement.value)) {
|
402 |
+
valueElement.value = ''
|
403 |
+
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor
|
404 |
+
styleElement.style.color = styleElement.jscStyle.color
|
405 |
+
this.exportColor(leaveValue | leaveStyle)
|
406 |
+
|
407 |
+
} else if(this.fromString(valueElement.value)) {
|
408 |
+
// OK
|
409 |
+
} else {
|
410 |
+
this.exportColor()
|
411 |
+
}
|
412 |
+
}
|
413 |
+
}
|
414 |
+
|
415 |
+
|
416 |
+
this.exportColor = function(flags) {
|
417 |
+
if(!(flags & leaveValue) && valueElement) {
|
418 |
+
var value = this.toString()
|
419 |
+
if(this.caps) value = value.toUpperCase()
|
420 |
+
if(this.hash) value = '#'+value
|
421 |
+
valueElement.value = value
|
422 |
+
}
|
423 |
+
if(!(flags & leaveStyle) && styleElement) {
|
424 |
+
styleElement.style.backgroundColor = '#'+this.toString()
|
425 |
+
styleElement.style.color =
|
426 |
+
0.213 * this.rgb[0] +
|
427 |
+
0.715 * this.rgb[1] +
|
428 |
+
0.072 * this.rgb[2]
|
429 |
+
< 0.5 ? '#FFF' : '#000'
|
430 |
+
}
|
431 |
+
if(!(flags & leavePad) && isPickerOwner()) {
|
432 |
+
redrawPad()
|
433 |
+
}
|
434 |
+
if(!(flags & leaveSld) && isPickerOwner()) {
|
435 |
+
redrawSld()
|
436 |
+
}
|
437 |
+
}
|
438 |
+
|
439 |
+
|
440 |
+
this.fromHSV = function(h, s, v, flags) { // null = don't change
|
441 |
+
h<0 && (h=0) || h>6 && (h=6)
|
442 |
+
s<0 && (s=0) || s>1 && (s=1)
|
443 |
+
v<0 && (v=0) || v>1 && (v=1)
|
444 |
+
this.rgb = HSV_RGB(
|
445 |
+
h==null ? this.hsv[0] : (this.hsv[0]=h),
|
446 |
+
s==null ? this.hsv[1] : (this.hsv[1]=s),
|
447 |
+
v==null ? this.hsv[2] : (this.hsv[2]=v)
|
448 |
+
)
|
449 |
+
this.exportColor(flags)
|
450 |
+
}
|
451 |
+
|
452 |
+
|
453 |
+
this.fromRGB = function(r, g, b, flags) { // null = don't change
|
454 |
+
r<0 && (r=0) || r>1 && (r=1)
|
455 |
+
g<0 && (g=0) || g>1 && (g=1)
|
456 |
+
b<0 && (b=0) || b>1 && (b=1)
|
457 |
+
var hsv = RGB_HSV(
|
458 |
+
r==null ? this.rgb[0] : (this.rgb[0]=r),
|
459 |
+
g==null ? this.rgb[1] : (this.rgb[1]=g),
|
460 |
+
b==null ? this.rgb[2] : (this.rgb[2]=b)
|
461 |
+
)
|
462 |
+
if(hsv[0] != null) {
|
463 |
+
this.hsv[0] = hsv[0]
|
464 |
+
}
|
465 |
+
if(hsv[2] != 0) {
|
466 |
+
this.hsv[1] = hsv[1]
|
467 |
+
}
|
468 |
+
this.hsv[2] = hsv[2]
|
469 |
+
this.exportColor(flags)
|
470 |
+
}
|
471 |
+
|
472 |
+
|
473 |
+
this.fromString = function(hex, flags) {
|
474 |
+
var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)
|
475 |
+
if(!m) {
|
476 |
+
return false
|
477 |
+
} else {
|
478 |
+
if(m[1].length == 6) { // 6-char notation
|
479 |
+
this.fromRGB(
|
480 |
+
parseInt(m[1].substr(0,2),16) / 255,
|
481 |
+
parseInt(m[1].substr(2,2),16) / 255,
|
482 |
+
parseInt(m[1].substr(4,2),16) / 255,
|
483 |
+
flags
|
484 |
+
)
|
485 |
+
} else { // 3-char notation
|
486 |
+
this.fromRGB(
|
487 |
+
parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
|
488 |
+
parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
|
489 |
+
parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
|
490 |
+
flags
|
491 |
+
)
|
492 |
+
}
|
493 |
+
return true
|
494 |
+
}
|
495 |
+
}
|
496 |
+
|
497 |
+
|
498 |
+
this.toString = function() {
|
499 |
+
return (
|
500 |
+
(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
|
501 |
+
(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
|
502 |
+
(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
|
503 |
+
)
|
504 |
+
}
|
505 |
+
|
506 |
+
|
507 |
+
function RGB_HSV(r, g, b) {
|
508 |
+
var n = Math.min(Math.min(r,g),b)
|
509 |
+
var v = Math.max(Math.max(r,g),b)
|
510 |
+
var m = v - n
|
511 |
+
if(m == 0) return [ null, 0, v ]
|
512 |
+
var h = r==n ? 3+(b-g)/m : (g==n ? 5+(r-b)/m : 1+(g-r)/m)
|
513 |
+
return [ h==6?0:h, m/v, v ]
|
514 |
+
}
|
515 |
+
|
516 |
+
|
517 |
+
function HSV_RGB(h, s, v) {
|
518 |
+
if(h == null) return [ v, v, v ]
|
519 |
+
var i = Math.floor(h)
|
520 |
+
var f = i%2 ? h-i : 1-(h-i)
|
521 |
+
var m = v * (1 - s)
|
522 |
+
var n = v * (1 - s*f)
|
523 |
+
switch(i) {
|
524 |
+
case 6:
|
525 |
+
case 0: return [v,n,m]
|
526 |
+
case 1: return [n,v,m]
|
527 |
+
case 2: return [m,v,n]
|
528 |
+
case 3: return [m,n,v]
|
529 |
+
case 4: return [n,m,v]
|
530 |
+
case 5: return [v,m,n]
|
531 |
+
}
|
532 |
+
}
|
533 |
+
|
534 |
+
|
535 |
+
function removePicker() {
|
536 |
+
delete jscolor.picker.owner
|
537 |
+
document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB)
|
538 |
+
}
|
539 |
+
|
540 |
+
|
541 |
+
function drawPicker(x, y) {
|
542 |
+
if(!jscolor.picker) {
|
543 |
+
jscolor.picker = {
|
544 |
+
box : document.createElement('div'),
|
545 |
+
boxB : document.createElement('div'),
|
546 |
+
pad : document.createElement('div'),
|
547 |
+
padB : document.createElement('div'),
|
548 |
+
padM : document.createElement('div'),
|
549 |
+
sld : document.createElement('div'),
|
550 |
+
sldB : document.createElement('div'),
|
551 |
+
sldM : document.createElement('div')
|
552 |
+
}
|
553 |
+
for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
|
554 |
+
var seg = document.createElement('div')
|
555 |
+
seg.style.height = segSize+'px'
|
556 |
+
seg.style.fontSize = '1px'
|
557 |
+
seg.style.lineHeight = '0'
|
558 |
+
jscolor.picker.sld.appendChild(seg)
|
559 |
+
}
|
560 |
+
jscolor.picker.sldB.appendChild(jscolor.picker.sld)
|
561 |
+
jscolor.picker.box.appendChild(jscolor.picker.sldB)
|
562 |
+
jscolor.picker.box.appendChild(jscolor.picker.sldM)
|
563 |
+
jscolor.picker.padB.appendChild(jscolor.picker.pad)
|
564 |
+
jscolor.picker.box.appendChild(jscolor.picker.padB)
|
565 |
+
jscolor.picker.box.appendChild(jscolor.picker.padM)
|
566 |
+
jscolor.picker.boxB.appendChild(jscolor.picker.box)
|
567 |
+
}
|
568 |
+
|
569 |
+
var p = jscolor.picker
|
570 |
+
|
571 |
+
// recompute controls positions
|
572 |
+
posPad = [
|
573 |
+
x+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset,
|
574 |
+
y+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset ]
|
575 |
+
posSld = [
|
576 |
+
null,
|
577 |
+
y+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset ]
|
578 |
+
|
579 |
+
// controls interaction
|
580 |
+
p.box.onmouseup =
|
581 |
+
p.box.onmouseout = function() { target.focus() }
|
582 |
+
p.box.onmousedown = function() { abortBlur=true }
|
583 |
+
p.box.onmousemove = function(e) { holdPad && setPad(e); holdSld && setSld(e) }
|
584 |
+
p.padM.onmouseup =
|
585 |
+
p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change') } }
|
586 |
+
p.padM.onmousedown = function(e) { holdPad=true; setPad(e) }
|
587 |
+
p.sldM.onmouseup =
|
588 |
+
p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change') } }
|
589 |
+
p.sldM.onmousedown = function(e) { holdSld=true; setSld(e) }
|
590 |
+
|
591 |
+
// picker
|
592 |
+
p.box.style.width = 4*THIS.pickerInset + 2*THIS.pickerFace + jscolor.images.pad[0] + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] + 'px'
|
593 |
+
p.box.style.height = 2*THIS.pickerInset + 2*THIS.pickerFace + jscolor.images.pad[1] + 'px'
|
594 |
+
|
595 |
+
// picker border
|
596 |
+
p.boxB.style.position = 'absolute'
|
597 |
+
p.boxB.style.clear = 'both'
|
598 |
+
p.boxB.style.left = x+'px'
|
599 |
+
p.boxB.style.top = y+'px'
|
600 |
+
p.boxB.style.zIndex = THIS.pickerZIndex
|
601 |
+
p.boxB.style.border = THIS.pickerBorder+'px solid'
|
602 |
+
p.boxB.style.borderColor = THIS.pickerBorderColor
|
603 |
+
p.boxB.style.background = THIS.pickerFaceColor
|
604 |
+
|
605 |
+
// pad image
|
606 |
+
p.pad.style.width = jscolor.images.pad[0]+'px'
|
607 |
+
p.pad.style.height = jscolor.images.pad[1]+'px'
|
608 |
+
|
609 |
+
// pad border
|
610 |
+
p.padB.style.position = 'absolute'
|
611 |
+
p.padB.style.left = THIS.pickerFace+'px'
|
612 |
+
p.padB.style.top = THIS.pickerFace+'px'
|
613 |
+
p.padB.style.border = THIS.pickerInset+'px solid'
|
614 |
+
p.padB.style.borderColor = THIS.pickerInsetColor
|
615 |
+
|
616 |
+
// pad mouse area
|
617 |
+
p.padM.style.position = 'absolute'
|
618 |
+
p.padM.style.left = '0'
|
619 |
+
p.padM.style.top = '0'
|
620 |
+
p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px'
|
621 |
+
p.padM.style.height = p.box.style.height
|
622 |
+
p.padM.style.cursor = 'crosshair'
|
623 |
+
|
624 |
+
// slider image
|
625 |
+
p.sld.style.overflow = 'hidden'
|
626 |
+
p.sld.style.width = jscolor.images.sld[0]+'px'
|
627 |
+
p.sld.style.height = jscolor.images.sld[1]+'px'
|
628 |
+
|
629 |
+
// slider border
|
630 |
+
p.sldB.style.position = 'absolute'
|
631 |
+
p.sldB.style.right = THIS.pickerFace+'px'
|
632 |
+
p.sldB.style.top = THIS.pickerFace+'px'
|
633 |
+
p.sldB.style.border = THIS.pickerInset+'px solid'
|
634 |
+
p.sldB.style.borderColor = THIS.pickerInsetColor
|
635 |
+
|
636 |
+
// slider mouse area
|
637 |
+
p.sldM.style.position = 'absolute'
|
638 |
+
p.sldM.style.right = '0'
|
639 |
+
p.sldM.style.top = '0'
|
640 |
+
p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px'
|
641 |
+
p.sldM.style.height = p.box.style.height
|
642 |
+
try {
|
643 |
+
p.sldM.style.cursor = 'pointer'
|
644 |
+
} catch(eOldIE) {
|
645 |
+
p.sldM.style.cursor = 'hand'
|
646 |
+
}
|
647 |
+
|
648 |
+
// load images in optimal order
|
649 |
+
switch(modeID) {
|
650 |
+
case 0: var padImg = 'hs.png'; break
|
651 |
+
case 1: var padImg = 'hv.png'; break
|
652 |
+
}
|
653 |
+
p.padM.style.background = "url('"+jscolor.getDir()+"cross.gif') no-repeat"
|
654 |
+
p.sldM.style.background = "url('"+jscolor.getDir()+"arrow.gif') no-repeat"
|
655 |
+
p.pad.style.background = "url('"+jscolor.getDir()+padImg+"') 0 0 no-repeat"
|
656 |
+
|
657 |
+
// place pointers
|
658 |
+
redrawPad()
|
659 |
+
redrawSld()
|
660 |
+
|
661 |
+
jscolor.picker.owner = THIS
|
662 |
+
document.getElementsByTagName('body')[0].appendChild(p.boxB)
|
663 |
+
}
|
664 |
+
|
665 |
+
|
666 |
+
function redrawPad() {
|
667 |
+
// redraw the pad pointer
|
668 |
+
switch(modeID) {
|
669 |
+
case 0: var yComponent = 1; break
|
670 |
+
case 1: var yComponent = 2; break
|
671 |
+
}
|
672 |
+
var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1))
|
673 |
+
var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1))
|
674 |
+
jscolor.picker.padM.style.backgroundPosition =
|
675 |
+
(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
|
676 |
+
(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px'
|
677 |
+
|
678 |
+
// redraw the slider image
|
679 |
+
var seg = jscolor.picker.sld.childNodes
|
680 |
+
|
681 |
+
switch(modeID) {
|
682 |
+
case 0:
|
683 |
+
var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1)
|
684 |
+
for(var i=0; i<seg.length; i++) {
|
685 |
+
seg[i].style.backgroundColor = 'rgb('+
|
686 |
+
(rgb[0]*(1-i/seg.length)*100)+'%,'+
|
687 |
+
(rgb[1]*(1-i/seg.length)*100)+'%,'+
|
688 |
+
(rgb[2]*(1-i/seg.length)*100)+'%)'
|
689 |
+
}
|
690 |
+
break
|
691 |
+
case 1:
|
692 |
+
var rgb, s, c = [ THIS.hsv[2], 0, 0 ]
|
693 |
+
var i = Math.floor(THIS.hsv[0])
|
694 |
+
var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i)
|
695 |
+
switch(i) {
|
696 |
+
case 6:
|
697 |
+
case 0: rgb=[0,1,2]; break
|
698 |
+
case 1: rgb=[1,0,2]; break
|
699 |
+
case 2: rgb=[2,0,1]; break
|
700 |
+
case 3: rgb=[2,1,0]; break
|
701 |
+
case 4: rgb=[1,2,0]; break
|
702 |
+
case 5: rgb=[0,2,1]; break
|
703 |
+
}
|
704 |
+
for(var i=0; i<seg.length; i++) {
|
705 |
+
s = 1 - 1/(seg.length-1)*i
|
706 |
+
c[1] = c[0] * (1 - s*f)
|
707 |
+
c[2] = c[0] * (1 - s)
|
708 |
+
seg[i].style.backgroundColor = 'rgb('+
|
709 |
+
(c[rgb[0]]*100)+'%,'+
|
710 |
+
(c[rgb[1]]*100)+'%,'+
|
711 |
+
(c[rgb[2]]*100)+'%)'
|
712 |
+
}
|
713 |
+
break
|
714 |
+
}
|
715 |
+
}
|
716 |
+
|
717 |
+
|
718 |
+
function redrawSld() {
|
719 |
+
// redraw the slider pointer
|
720 |
+
switch(modeID) {
|
721 |
+
case 0: var yComponent = 2; break
|
722 |
+
case 1: var yComponent = 1; break
|
723 |
+
}
|
724 |
+
var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1))
|
725 |
+
jscolor.picker.sldM.style.backgroundPosition =
|
726 |
+
'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px'
|
727 |
+
}
|
728 |
+
|
729 |
+
|
730 |
+
function isPickerOwner() {
|
731 |
+
return jscolor.picker && jscolor.picker.owner == THIS
|
732 |
+
}
|
733 |
+
|
734 |
+
|
735 |
+
function blurTarget() {
|
736 |
+
if(valueElement == target) THIS.importColor()
|
737 |
+
if(THIS.pickerOnfocus) THIS.hidePicker()
|
738 |
+
}
|
739 |
+
|
740 |
+
|
741 |
+
function blurValue() {
|
742 |
+
if(valueElement != target) THIS.importColor()
|
743 |
+
}
|
744 |
+
|
745 |
+
|
746 |
+
function setPad(e) {
|
747 |
+
var posM = jscolor.getMousePos(e)
|
748 |
+
var x = posM[0]-posPad[0]
|
749 |
+
var y = posM[1]-posPad[1]
|
750 |
+
switch(modeID) {
|
751 |
+
case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break
|
752 |
+
case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break
|
753 |
+
}
|
754 |
+
}
|
755 |
+
|
756 |
+
|
757 |
+
function setSld(e) {
|
758 |
+
var posM = jscolor.getMousePos(e)
|
759 |
+
var y = posM[1]-posPad[1]
|
760 |
+
switch(modeID) {
|
761 |
+
case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break
|
762 |
+
case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break
|
763 |
+
}
|
764 |
+
}
|
765 |
+
|
766 |
+
|
767 |
+
var THIS = this
|
768 |
+
var modeID = this.pickerMode.toLowerCase()=='hvs' ? 1 : 0
|
769 |
+
var abortBlur = false
|
770 |
+
var
|
771 |
+
valueElement = jscolor.fetchElement(this.valueElement),
|
772 |
+
styleElement = jscolor.fetchElement(this.styleElement)
|
773 |
+
var
|
774 |
+
holdPad = false,
|
775 |
+
holdSld = false
|
776 |
+
var
|
777 |
+
posPad,
|
778 |
+
posSld
|
779 |
+
var
|
780 |
+
leaveValue = 1<<0,
|
781 |
+
leaveStyle = 1<<1,
|
782 |
+
leavePad = 1<<2,
|
783 |
+
leaveSld = 1<<3
|
784 |
+
|
785 |
+
// target
|
786 |
+
jscolor.addEvent(target, 'focus', function() {
|
787 |
+
if(THIS.pickerOnfocus) THIS.showPicker()
|
788 |
+
})
|
789 |
+
jscolor.addEvent(target, 'blur', function() {
|
790 |
+
if(!abortBlur) {
|
791 |
+
setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false }, 0)
|
792 |
+
} else {
|
793 |
+
abortBlur = false
|
794 |
+
}
|
795 |
+
})
|
796 |
+
|
797 |
+
// valueElement
|
798 |
+
if(valueElement) {
|
799 |
+
var updateField = function() {
|
800 |
+
THIS.fromString(valueElement.value, leaveValue)
|
801 |
+
}
|
802 |
+
jscolor.addEvent(valueElement, 'keyup', updateField)
|
803 |
+
jscolor.addEvent(valueElement, 'input', updateField)
|
804 |
+
jscolor.addEvent(valueElement, 'blur', blurValue)
|
805 |
+
valueElement.setAttribute('autocomplete', 'off')
|
806 |
+
}
|
807 |
+
|
808 |
+
// styleElement
|
809 |
+
if(styleElement) {
|
810 |
+
styleElement.jscStyle = {
|
811 |
+
backgroundColor : styleElement.style.backgroundColor,
|
812 |
+
color : styleElement.style.color
|
813 |
+
}
|
814 |
+
}
|
815 |
+
|
816 |
+
// require images
|
817 |
+
switch(modeID) {
|
818 |
+
case 0: jscolor.requireImage('hs.png'); break
|
819 |
+
case 1: jscolor.requireImage('hv.png'); break
|
820 |
+
}
|
821 |
+
jscolor.requireImage('cross.gif');
|
822 |
+
jscolor.requireImage('arrow.gif');
|
823 |
+
|
824 |
+
this.importColor()
|
825 |
+
}
|
826 |
+
|
827 |
+
}
|
828 |
+
|
829 |
+
|
830 |
+
jscolor.install()
|
js/pngfix.js
ADDED
@@ -0,0 +1,43 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
|
3 |
+
SCRIPT IS MODIFIED TO ONLY AFFECT PLAY BUTTON OF FV-WORDPRESS-FLOWPLAYER PLUGIN!
|
4 |
+
|
5 |
+
Correctly handle PNG transparency in Win IE 5.5 & 6.
|
6 |
+
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
|
7 |
+
|
8 |
+
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
|
9 |
+
<!--[if lt IE 7]>
|
10 |
+
<script defer type="text/javascript" src="pngfix.js"></script>
|
11 |
+
<![endif]-->
|
12 |
+
|
13 |
+
*/
|
14 |
+
|
15 |
+
var arVersion = navigator.appVersion.split("MSIE")
|
16 |
+
var version = parseFloat(arVersion[1])
|
17 |
+
|
18 |
+
if ((version >= 5.5) && (document.body.filters))
|
19 |
+
{
|
20 |
+
for(var i=0; i<document.images.length; i++)
|
21 |
+
{
|
22 |
+
var img = document.images[i]
|
23 |
+
var imgName = img.src.toUpperCase()
|
24 |
+
var imgClass = img.className;
|
25 |
+
if ((imgClass == "splash_play_button") && (imgName.substring(imgName.length-3, imgName.length) == "PNG"))
|
26 |
+
{
|
27 |
+
var imgID = (img.id) ? "id='" + img.id + "' " : ""
|
28 |
+
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
|
29 |
+
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
|
30 |
+
var imgStyle = "display:inline-block;" + img.style.cssText
|
31 |
+
if (img.align == "left") imgStyle = "float:left;" + imgStyle
|
32 |
+
if (img.align == "right") imgStyle = "float:right;" + imgStyle
|
33 |
+
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
|
34 |
+
var strNewHTML = "<span " + imgID + imgClass + imgTitle
|
35 |
+
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
|
36 |
+
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
|
37 |
+
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
|
38 |
+
img.outerHTML = strNewHTML
|
39 |
+
i = i-1
|
40 |
+
}
|
41 |
+
}
|
42 |
+
}
|
43 |
+
|
js/suggestions.js
ADDED
@@ -0,0 +1,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
clips: [
|
3 |
+
{ url: 'honda_accord.flv', name: 'Honda commercial', suggestedClipsInfoUrl: 'suggestions.js',
|
4 |
+
duration: 180, thumbnailUrl: 'Thumb1.jpg',
|
5 |
+
info: { viewed: 631, category: 'ads' } },
|
6 |
+
{ url: 'river.flv', name: 'Skiing in Rovaniemi', suggestedClipsInfoUrl: 'suggestions.js',
|
7 |
+
duration: 180, thumbnailUrl: 'Thumb2.jpg',
|
8 |
+
info: { viewed: 2, category: 'sports' } }
|
9 |
+
]
|
10 |
+
}
|
models/flowplayer-backend.php
ADDED
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Extension of original flowplayer class intended for administrator backend.
|
5 |
+
*/
|
6 |
+
class flowplayer_backend extends flowplayer
|
7 |
+
{
|
8 |
+
|
9 |
+
/**
|
10 |
+
* Displays elements that need to be added into head in administrator backend.
|
11 |
+
*/
|
12 |
+
function flowplayer_head() {
|
13 |
+
/**
|
14 |
+
* Standard JS and CSS same as for frontend
|
15 |
+
*/
|
16 |
+
include dirname( __FILE__ ) . '/../view/frontend-head.php';
|
17 |
+
/**
|
18 |
+
* Admin specific CSS and JS
|
19 |
+
*/
|
20 |
+
include dirname( __FILE__ ) . '/../view/backend-head.php';
|
21 |
+
}
|
22 |
+
|
23 |
+
|
24 |
+
}
|
25 |
+
|
26 |
+
?>
|
models/flowplayer-frontend.php
ADDED
@@ -0,0 +1,130 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
/**
|
4 |
+
* Extension of original flowplayer class intended for frontend.
|
5 |
+
*/
|
6 |
+
class flowplayer_frontend extends flowplayer
|
7 |
+
{
|
8 |
+
|
9 |
+
/**
|
10 |
+
* Builds the HTML and JS code of single flowplayer instance on a page/post.
|
11 |
+
* @param string $media URL or filename (in case it is in the /videos/ directory) of video file to be played.
|
12 |
+
* @param array $args Array of arguments (name => value).
|
13 |
+
* @return Returns array with 2 elements - 'html' => html code displayed anywhere on page/post, 'script' => javascript code displayed before </body> tag
|
14 |
+
*/
|
15 |
+
function build_min_player($media,$args = array()) {
|
16 |
+
|
17 |
+
// returned array with new player's html and javascript content
|
18 |
+
$ret = array('html' => '', 'script' => '');
|
19 |
+
|
20 |
+
if(strpos($media,'http://') === false) {
|
21 |
+
$media = VIDEO_PATH.$media;
|
22 |
+
}
|
23 |
+
|
24 |
+
// unique coe for this player
|
25 |
+
$hash = md5($media.$this->_salt());
|
26 |
+
|
27 |
+
// setting argument values
|
28 |
+
$width = 320;
|
29 |
+
$height = 240;
|
30 |
+
$popup = '';
|
31 |
+
if (isset($args['width'])) $width = $args['width'];
|
32 |
+
if (isset($args['height'])) $height = $args['height'];
|
33 |
+
|
34 |
+
// if allowed by configuration file, set the popup box js code and content
|
35 |
+
if ($this->conf['popupbox'] != 'false') {
|
36 |
+
if (isset($args['popup'])) {
|
37 |
+
$popup = $args['popup'];
|
38 |
+
//$popup = html_entity_decode(str_replace("_"," ",substr($popup,1,strlen($popup)-2)));
|
39 |
+
$popup = html_entity_decode( str_replace(''',"'",$popup ) );
|
40 |
+
} else {
|
41 |
+
$popup = '<div style="margin-top: 10px;">Would you like to replay the video or share the link to it with your friends?</div>';
|
42 |
+
}
|
43 |
+
$popup_controls = '<div class="popup_controls"><a title="Replay video" href="javascript:fp_replay(\''.$hash.'\');"><img src="'.RELATIVE_PATH.'/images/replay.png" alt="Replay video" /></a><a title="Share video" href="javascript:fp_share(\''.$hash.'\');"><img src="'.RELATIVE_PATH.'/images/share.png" alt="Share video" /></a></div>';
|
44 |
+
$popup_contents = "\n".'<div id="popup_contents_'.$hash.'" class="popup_contents">'.$popup_controls.'<div id="wpfp_'.$hash.'_custom_popup" class="wpfp_custom_popup">'.$popup.'</div></div>';
|
45 |
+
// replace href attribute by javascript function
|
46 |
+
$popup_contents = str_replace("href=\"","onClick=\"javascript:window.location=this.href\" href=\"",$popup_contents);
|
47 |
+
$popup_code = "
|
48 |
+
window.flowplayer('wpfp_$hash').onFinish(function() {
|
49 |
+
var fp = document.getElementById('wpfp_$hash');
|
50 |
+
var popup = document.createElement('div');
|
51 |
+
var popup_contents = document.getElementById('popup_contents_$hash');
|
52 |
+
popup.className = 'flowplayer_popup';
|
53 |
+
popup.id = 'wpfp_".$hash."_popup';
|
54 |
+
popup.innerHTML = popup_contents.innerHTML;
|
55 |
+
fp.appendChild(popup);
|
56 |
+
});
|
57 |
+
window.flowplayer('wpfp_$hash').onStart(function() {
|
58 |
+
var popup = document.getElementById('wpfp_".$hash."_popup');
|
59 |
+
var fp = document.getElementById('wpfp_$hash');
|
60 |
+
fp.removeChild(popup);
|
61 |
+
});
|
62 |
+
";
|
63 |
+
}
|
64 |
+
|
65 |
+
if (isset($args['splash']) && !empty($args['splash'])) {
|
66 |
+
if(strpos($args['splash'],'http://') === false) {
|
67 |
+
$splash_img = VIDEO_PATH.$args['splash'];
|
68 |
+
} else {
|
69 |
+
$splash_img = $args['splash'];
|
70 |
+
}
|
71 |
+
$splash = '<img src="'.$splash_img.'" alt="" class="splash" /><img width="83" height="83" src="'.RELATIVE_PATH.'/images/play.png" alt="" class="splash_play_button" style="top: '.round($height/2-45).'px;" />';
|
72 |
+
// overriding the "autoplay" configuration - video should start immediately after click on the splash image
|
73 |
+
$this->conf['autoplay'] = 'true';
|
74 |
+
}
|
75 |
+
|
76 |
+
|
77 |
+
|
78 |
+
// set the output JavaScript (which will be added to document head)
|
79 |
+
$ret['script'] = '
|
80 |
+
if (document.getElementById(\'wpfp_'.$hash.'\') != null) {
|
81 |
+
flowplayer("wpfp_'.$hash.'", {src: "'.PLAYER.'", wmode: \'opaque\'}, {
|
82 |
+
'.(isset($this->conf['key'])&&strlen($this->conf['key'])>0?'key:\''.$this->conf['key'].'\',':'').'
|
83 |
+
plugins: {
|
84 |
+
controls: {
|
85 |
+
autoHide: \'always\',
|
86 |
+
buttonOverColor: \''.$this->conf['buttonOverColor'].'\',
|
87 |
+
sliderColor: \''.$this->conf['sliderColor'].'\',
|
88 |
+
bufferColor: \''.$this->conf['bufferColor'].'\',
|
89 |
+
sliderGradient: \'none\',
|
90 |
+
progressGradient: \'medium\',
|
91 |
+
durationColor: \''.$this->conf['durationColor'].'\',
|
92 |
+
progressColor: \''.$this->conf['progressColor'].'\',
|
93 |
+
backgroundColor: \''.$this->conf['backgroundColor'].'\',
|
94 |
+
timeColor: \''.$this->conf['timeColor'].'\',
|
95 |
+
buttonColor: \''.$this->conf['buttonColor'].'\',
|
96 |
+
backgroundGradient: \'none\',
|
97 |
+
bufferGradient: \'none\',
|
98 |
+
opacity:1.0
|
99 |
+
}
|
100 |
+
},
|
101 |
+
clip: {
|
102 |
+
url: \''.$media.'\',
|
103 |
+
autoPlay: '.(isset($this->conf['autoplay'])?$this->conf['autoplay']:'false').',
|
104 |
+
autoBuffering: '.(isset($this->conf['autobuffer'])?$this->conf['autobuffer']:'false').'
|
105 |
+
},
|
106 |
+
canvas: {
|
107 |
+
backgroundColor:\''.$this->conf['canvas'].'\'
|
108 |
+
}
|
109 |
+
});
|
110 |
+
};
|
111 |
+
'.$popup_code;
|
112 |
+
|
113 |
+
// set the output HTML (which will be printed into document body)
|
114 |
+
$ret['html'] .= '<a id="wpfp_'.$hash.'" style="width:'.$width.'px; height:'.$height.'px;" class="flowplayer_container">'.$splash.'</a>'.$popup_contents;
|
115 |
+
|
116 |
+
// return new player's html and script
|
117 |
+
return $ret;
|
118 |
+
}
|
119 |
+
|
120 |
+
/**
|
121 |
+
* Displays the elements that need to be added to frontend.
|
122 |
+
*/
|
123 |
+
function flowplayer_head() {
|
124 |
+
include dirname( __FILE__ ) . '/../view/frontend-head.php';
|
125 |
+
}
|
126 |
+
|
127 |
+
|
128 |
+
}
|
129 |
+
|
130 |
+
?>
|
models/flowplayer.php
ADDED
@@ -0,0 +1,150 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
|
3 |
+
class flowplayer {
|
4 |
+
private $count = 0;
|
5 |
+
|
6 |
+
/**
|
7 |
+
* Relative URL path
|
8 |
+
*/
|
9 |
+
const RELATIVE_PATH = '';
|
10 |
+
/**
|
11 |
+
* Where videos should be stored
|
12 |
+
*/
|
13 |
+
const VIDEO_PATH = '';
|
14 |
+
/**
|
15 |
+
* Where the config file should be
|
16 |
+
*/
|
17 |
+
private $conf_path = '';
|
18 |
+
|
19 |
+
/**
|
20 |
+
* Configuration variables array
|
21 |
+
*/
|
22 |
+
public $conf = array();
|
23 |
+
|
24 |
+
/**
|
25 |
+
* Class constructor
|
26 |
+
*/
|
27 |
+
public function __construct() {
|
28 |
+
//set conf path
|
29 |
+
$this->conf_path = realpath(dirname(__FILE__)).'/../wpfp.conf';
|
30 |
+
//load conf data into stack
|
31 |
+
$this->_get_conf();
|
32 |
+
}
|
33 |
+
/**
|
34 |
+
* Gets configuration from cfg file.
|
35 |
+
*
|
36 |
+
* @return bool Returns false on failiure, true on success.
|
37 |
+
*/
|
38 |
+
private function _get_conf() {
|
39 |
+
//check file exists
|
40 |
+
if(file_exists($this->conf_path)) {
|
41 |
+
//open file for reading
|
42 |
+
$fp = fopen($this->conf_path,'r');
|
43 |
+
//check if failed to open
|
44 |
+
if(!$fp) {
|
45 |
+
error_log('Could not open '.$this->conf_path);
|
46 |
+
$return = false;
|
47 |
+
} else {
|
48 |
+
//read data
|
49 |
+
$data = fread($fp,filesize($this->conf_path));
|
50 |
+
//get each line
|
51 |
+
$tmp = explode("\n",$data);
|
52 |
+
//get each var
|
53 |
+
foreach($tmp as $key => $dat) {
|
54 |
+
//split from var:val
|
55 |
+
$data = explode(':', $dat);
|
56 |
+
//build into conf stack
|
57 |
+
$this->conf[$data[0]] = $data[1];
|
58 |
+
$return = true;
|
59 |
+
}
|
60 |
+
}
|
61 |
+
fclose($fp);
|
62 |
+
} else {
|
63 |
+
error_log("File does not exist: $this->conf_path, attempting to create");
|
64 |
+
//attempt to create file
|
65 |
+
if(touch($this->conf_path)) {
|
66 |
+
//everything is ok!
|
67 |
+
error_log($this->conf_path.' Created');
|
68 |
+
//read the data
|
69 |
+
$this->_get_conf();
|
70 |
+
} else {
|
71 |
+
//failed
|
72 |
+
error_log($this->conf_path.' Creation failed');
|
73 |
+
$return = false;
|
74 |
+
}
|
75 |
+
}
|
76 |
+
|
77 |
+
return $return;
|
78 |
+
}
|
79 |
+
/**
|
80 |
+
* Writes configuration into file.
|
81 |
+
*/
|
82 |
+
public function _set_conf() {
|
83 |
+
//attempt to open file
|
84 |
+
$fp = fopen($this->conf_path,'w');
|
85 |
+
|
86 |
+
if(!$fp) {
|
87 |
+
error_log('Could not open '.$this->conf_path.' for writing');
|
88 |
+
} else {
|
89 |
+
//file is opened for editing!
|
90 |
+
$str = ''; //setup holder var
|
91 |
+
//loop post data
|
92 |
+
foreach($_POST as $key => $data) {
|
93 |
+
|
94 |
+
//do not want to record the submit value in the config file
|
95 |
+
if($key != "submit") {
|
96 |
+
// if we have a colour in value, add a #
|
97 |
+
if (strlen($data) == 6) $data = '#'.$data;
|
98 |
+
$str .= $key.':'.strtolower($data)."\n";
|
99 |
+
}
|
100 |
+
}
|
101 |
+
//comit data
|
102 |
+
$len = strlen($str);
|
103 |
+
//check lenght
|
104 |
+
if($len > 0) {
|
105 |
+
//attempt write
|
106 |
+
$write = fwrite($fp, $str, $len);
|
107 |
+
//report if failed to error_log
|
108 |
+
if(!$write) {
|
109 |
+
error_log('Could not write to '.$this->conf_path);
|
110 |
+
}
|
111 |
+
} else {
|
112 |
+
//report 0 length write attempt
|
113 |
+
error_log('Caught attempt to write 0 length to config file, aborted');
|
114 |
+
}
|
115 |
+
fclose($fp);
|
116 |
+
}
|
117 |
+
}
|
118 |
+
/**
|
119 |
+
* Salt function - returns pseudorandom string hash.
|
120 |
+
* @return Pseudorandom string hash.
|
121 |
+
*/
|
122 |
+
public function _salt() {
|
123 |
+
$salt = substr(md5(uniqid(rand(), true)), 0, 10);
|
124 |
+
return $salt;
|
125 |
+
}
|
126 |
+
|
127 |
+
|
128 |
+
}
|
129 |
+
|
130 |
+
/**
|
131 |
+
* Defines some needed constants and loads the right flowplayer_head() function.
|
132 |
+
*/
|
133 |
+
function flowplayer_head() {
|
134 |
+
// define needed constants
|
135 |
+
if (!defined('RELATIVE_PATH')) {
|
136 |
+
define('RELATIVE_PATH', get_option('siteurl').'/wp-content/plugins/fv-wordpress-flowplayer');
|
137 |
+
define('PLAYER', RELATIVE_PATH.'/flowplayer/flowplayer.swf');
|
138 |
+
$vid = 'http://'.$_SERVER['SERVER_NAME'];
|
139 |
+
if (dirname($_SERVER['PHP_SELF']) != '/') $vid .= dirname($_SERVER['PHP_SELF']);
|
140 |
+
define('VIDEO_PATH', $vid.'/videos/');
|
141 |
+
}
|
142 |
+
// call the right function for displaying CSS and JS links
|
143 |
+
if (class_exists('flowplayer_frontend')) {
|
144 |
+
flowplayer_frontend::flowplayer_head();
|
145 |
+
} else {
|
146 |
+
flowplayer_backend::flowplayer_head();
|
147 |
+
}
|
148 |
+
}
|
149 |
+
|
150 |
+
?>
|
readme.txt
ADDED
@@ -0,0 +1,75 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
=== FV Wordpress Flowplayer ===
|
2 |
+
Contributors: FolioVision
|
3 |
+
Tags: video, flash, flowplayer
|
4 |
+
Requires at least: 2.0
|
5 |
+
Tested up to: 2.9.1
|
6 |
+
Stable tag: 0.9.17
|
7 |
+
|
8 |
+
Embed videos (FLV, H.264, and MP4) into posts or pages. Uses modified version of flowplayer (with removed FP logo and copyright notice).
|
9 |
+
|
10 |
+
== Description ==
|
11 |
+
|
12 |
+
FV Wordpress Flowplayer plugin is a free, easy-to-use, and complete solution for embedding FLV or MP4 videos into your posts or pages.
|
13 |
+
|
14 |
+
* Plugin is completely non-commercial. It contains modified opensource version of Flowplayer 3.1.3, with removed FP logo and copyright notice.
|
15 |
+
* Supported video formats are FLV, H.264, and MP4. Multiple videos can be displayed in ope post or page.
|
16 |
+
* Default options for all the embedded videos can be set in comprehensive administration menu.
|
17 |
+
* It is loosely based on Wordpress Flowplayer plugin. However, there are several improvements:
|
18 |
+
|
19 |
+
1. Doesn't use jQuery, so there will be no future conflicts with other plugins.
|
20 |
+
2. Usage is simpler and forgiving, making the plugin easier to use.
|
21 |
+
3. It will never display any annoying flowplayer logos or copyrights over your videos.
|
22 |
+
4. Allows user to display clickable splash screen at the beginning of video (which not only looks good, but improves the performance significantly).
|
23 |
+
5. Allows user to display popup box after the video ends, with any HTML content (clickable links, images, styling, etc.)
|
24 |
+
|
25 |
+
== Installation ==
|
26 |
+
|
27 |
+
There aren't any special requirements for FV Wordpress Flowplayer to work, and you don't need to install any additional plugins.
|
28 |
+
|
29 |
+
1. Download and unpack zip archive containing the plugin.
|
30 |
+
2. Upload the fv-wordpress-flowplayer directory into wp-content/plugins/ directory of your wordpress installation.
|
31 |
+
3. Make sure, that configuration file wpfp.conf is writable.
|
32 |
+
4. Go into Wordpress plugins setup in Wordpress administration interface and activate FV Wordpress Flowplayer plugin.
|
33 |
+
5. Optionally, if you want to embed videos denoted just by their filename, you can create the /videos/ directory located directly in the root of your domain and place your videos there. Otherwise, you would have to type in a complete URL of video files.
|
34 |
+
|
35 |
+
== Screenshots ==
|
36 |
+
|
37 |
+
1. Post containing modified flowplayer playing a video.
|
38 |
+
2. Adding three players with different arguments into a post.
|
39 |
+
3. Configuration menu for administrators.
|
40 |
+
|
41 |
+
== Changelog ==
|
42 |
+
|
43 |
+
= 0.9.17 =
|
44 |
+
* minor bug fixes
|
45 |
+
|
46 |
+
= 0.9.16 =
|
47 |
+
* minor bug fixes
|
48 |
+
|
49 |
+
= 0.9.15 =
|
50 |
+
* support for widget use and template use
|
51 |
+
|
52 |
+
= 0.9.14 =
|
53 |
+
* Added a possibility to forbid the popup boxes.
|
54 |
+
* Some output validation.
|
55 |
+
* Minor visual improvements.
|
56 |
+
|
57 |
+
= 0.9.13 =
|
58 |
+
* Added "Replay" and "Share" buttons to the popup box after video finishes.
|
59 |
+
* Some performance tweaks concerning popup box.
|
60 |
+
|
61 |
+
= 0.9.12 =
|
62 |
+
* First stable version ready to be published.
|
63 |
+
* Removed farbtastic colour picker using jQuery from settings menu. Substituted by jscolor.
|
64 |
+
|
65 |
+
== Configuration ==
|
66 |
+
|
67 |
+
Once the plugin is uploaded and activated, there will be a submenu of settings menu called FV Wordpress Flowplayer. In that submenu, you can modify following settings:
|
68 |
+
|
69 |
+
* AutoPlay - decides whether the video starts playing automatically, when the page/post is displayed.
|
70 |
+
* AutoBuffering - decides whether te video starts buffering automatically, when the page/post is displayed. If AutoPlay is set to true, you can ignore this setting.
|
71 |
+
* Popup Box - decides whether a popup box with "replay" and "share" buttons will be displayed when video ends.
|
72 |
+
* Colors of all the parts of flowplayer instances on page/post (controlbar, canvas, sliders, buttons, mouseover buttons, time and total time, progress and buffer sliders).
|
73 |
+
|
74 |
+
On the right side of this screen, you can see the current visual configuration of flowplayer. If you click Apply Changes button, this player's looks refreshes.
|
75 |
+
|
screenshot-1.png
ADDED
Binary file
|
screenshot-2.png
ADDED
Binary file
|
screenshot-3.png
ADDED
Binary file
|
view/admin.php
ADDED
@@ -0,0 +1,168 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Displays administrator backend.
|
4 |
+
*/
|
5 |
+
?>
|
6 |
+
<div class="wrap">
|
7 |
+
<table>
|
8 |
+
<tr>
|
9 |
+
<td style="width: 450px;">
|
10 |
+
<form id="wpfp_options" method="post" action="">
|
11 |
+
<div id="icon-options-general" class="icon32"></div>
|
12 |
+
<h2>FV Wordpress Flowplayer</h2>
|
13 |
+
<?php echo flowplayer_check_errors($fp); ?>
|
14 |
+
<h3>Default Flowplayer Options:</h3>
|
15 |
+
<table>
|
16 |
+
<tr>
|
17 |
+
<td>AutoPlay: </td>
|
18 |
+
<td>
|
19 |
+
<select name="autoplay">
|
20 |
+
<?php echo flowplayer_bool_select($fp->conf['autoplay']); ?>
|
21 |
+
</select>
|
22 |
+
</td>
|
23 |
+
</tr>
|
24 |
+
<tr style="position: absolute; top: -9999em; left: -9999em;">
|
25 |
+
<td>Commercial License Key: </td>
|
26 |
+
<td>
|
27 |
+
<input type="text" size="20" name="key" id="key" value="<?php echo $fp->conf['key']; ?>" />
|
28 |
+
</td>
|
29 |
+
</tr>
|
30 |
+
<tr>
|
31 |
+
<td>Auto Buffering:</td>
|
32 |
+
<td><select name="autobuffer">
|
33 |
+
|
34 |
+
<?php echo flowplayer_bool_select($fp->conf['autobuffer']); ?>
|
35 |
+
|
36 |
+
</select></td>
|
37 |
+
</tr>
|
38 |
+
<tr>
|
39 |
+
<td>Popup Box:</td>
|
40 |
+
<td><select name="popupbox">
|
41 |
+
|
42 |
+
<?php echo flowplayer_bool_select($fp->conf['popupbox']); ?>
|
43 |
+
|
44 |
+
</select></td>
|
45 |
+
</tr>
|
46 |
+
|
47 |
+
<?php echo include dirname( __FILE__ ) . '/../view/colours.php'; ?>
|
48 |
+
|
49 |
+
<tr>
|
50 |
+
<td>
|
51 |
+
</td>
|
52 |
+
<td>
|
53 |
+
<input type="submit" name="submit" class="button-primary" value="Apply Changes" style="margin-top: 2ex;"/>
|
54 |
+
</td>
|
55 |
+
</tr>
|
56 |
+
|
57 |
+
<tr>
|
58 |
+
<td colspan="2" style="text-align: justify;">
|
59 |
+
<h3>Description:</h3>
|
60 |
+
<ul>
|
61 |
+
<li>FV Wordpress Flowplayer is a completely non-commercial solution for embedding video on Wordpress websites.</li>
|
62 |
+
<li>It contains opensource version of Flowplayer, with removed logo and copyright notice. </li>
|
63 |
+
<li>Supported video formats are <strong>FLV</strong>, <strong>H.264</strong>, and <strong>MP4</strong>. Multiple videos can be displayed in ope post or page.</li>
|
64 |
+
<li>Default options for all the embedded videos can be set in the menu above.</li>
|
65 |
+
</ul>
|
66 |
+
<h3>Usage:</h3>
|
67 |
+
<p>
|
68 |
+
To embed video "example.flv", simply include the following code inside any post or page:
|
69 |
+
<code>[flowplayer src=example.flv]</code>
|
70 |
+
</p>
|
71 |
+
<p>
|
72 |
+
<code>src</code> is the only compulsory parameter, specifying the video file. Its value can be either a full URL of the file,
|
73 |
+
or just a filename, if it is located in the /videos/ directory in the root of the web.
|
74 |
+
</p>
|
75 |
+
<h4>Optional parameters:</h4>
|
76 |
+
<ul style="text-align: left;">
|
77 |
+
<li><code>width</code> and <code>height</code> specify the dimensions of played video in pixels. If they are not set, the default size is 320x240.<br/>
|
78 |
+
<i>Example</i>:<br/><code>[flowplayer src=example.flv, width=640, height=480]</code></li>
|
79 |
+
<li><code>splash</code> parameter can be used to display a custom splash image before the video is started. Just like in case of <code>src</code>
|
80 |
+
parameter, its value can be either complete URL, or filename of an image located in /videos/ folder.<br/>
|
81 |
+
<i>Example</i>:<br/><code>[flowplayer src=example.flv, splash=image.jpg]</code></li>
|
82 |
+
<li><code>popup</code> parameter can be used to display any HTML code after the video finishes (ideal for advertisment or links to similar videos).
|
83 |
+
Content you want to display must be between simgle quotes (<code>''</code>).<br/>
|
84 |
+
<i>Example</i>:<br/><code>[flowplayer src=example.flv, popup='<p>some HTML content</p>']</code></li>
|
85 |
+
</ul>
|
86 |
+
</td>
|
87 |
+
<td></td>
|
88 |
+
</tr>
|
89 |
+
</table>
|
90 |
+
</form>
|
91 |
+
</td>
|
92 |
+
<td style="padding: 3em; vertical-align: top;">
|
93 |
+
<a id="player" class="flowplayer_div" style="display:block;width:400px;height:300px;"></a>
|
94 |
+
</td>
|
95 |
+
</tr>
|
96 |
+
</table>
|
97 |
+
|
98 |
+
<script defer="defer" language="Javascript" type="text/javascript">
|
99 |
+
|
100 |
+
//load player
|
101 |
+
$f("player", "<?php echo PLAYER; ?>", {
|
102 |
+
<?php echo (isset($fp->conf['key'])&&strlen($fp->conf['key'])>0?'key:\''.$fp->conf['key'].'\',':''); ?>
|
103 |
+
plugins: {
|
104 |
+
controls: {
|
105 |
+
buttonOverColor: '<?php echo $fp->conf['buttonOverColor']; ?>',
|
106 |
+
sliderColor: '<?php echo $fp->conf['sliderColor']; ?>',
|
107 |
+
bufferColor: '<?php echo $fp->conf['bufferColor']; ?>',
|
108 |
+
sliderGradient: 'none',
|
109 |
+
progressGradient: 'medium',
|
110 |
+
durationColor: '<?php echo $fp->conf['durationColor']; ?>',
|
111 |
+
progressColor: '<?php echo $fp->conf['progressColor']; ?>',
|
112 |
+
backgroundColor: '<?php echo $fp->conf['backgroundColor']; ?>',
|
113 |
+
timeColor: '<?php echo $fp->conf['timeColor']; ?>',
|
114 |
+
buttonColor: '<?php echo $fp->conf['buttonColor']; ?>',
|
115 |
+
backgroundGradient: 'none',
|
116 |
+
bufferGradient: 'none',
|
117 |
+
opacity:1.0
|
118 |
+
}
|
119 |
+
},
|
120 |
+
clip: {
|
121 |
+
url:'<?php echo RELATIVE_PATH; ?>/flowplayer/example.flv',
|
122 |
+
autoPlay: '<?php if (isset($fp->conf["autoplay"])) { echo $fp->conf["autoplay"]; } else { echo "false"; } ?>',
|
123 |
+
autoBuffering: '<?php if (isset($fp->conf["autobuffer"])) { echo $fp->conf["autobuffer"]; } else { echo "false"; } ?>'
|
124 |
+
},
|
125 |
+
|
126 |
+
|
127 |
+
<?php
|
128 |
+
if($fp->conf['logoenable'] == 'true'){
|
129 |
+
echo 'logo: {url: \'http://'.$fp->conf['logo'].'\', fullscreenOnly: '.$fp->conf['fullscreenonly'].', displayTime: 0, linkUrl: \'http://'.$fp->conf['logolink'].'\'},';
|
130 |
+
}
|
131 |
+
?>
|
132 |
+
|
133 |
+
canvas: {
|
134 |
+
backgroundColor:'<?php echo $fp->conf["canvas"]; ?>'
|
135 |
+
},
|
136 |
+
onLoad: function() {
|
137 |
+
$(":input[name=tgt]").removeAttr("disabled");
|
138 |
+
},
|
139 |
+
onUnload: function() {
|
140 |
+
$(":input[name=tgt]").attr("disabled", true);
|
141 |
+
}
|
142 |
+
});
|
143 |
+
|
144 |
+
</script>
|
145 |
+
|
146 |
+
</div>
|
147 |
+
|
148 |
+
<?php
|
149 |
+
if(isset($_POST['submit'])) {
|
150 |
+
/**
|
151 |
+
* Write the configuration into file, if the form was submitted.
|
152 |
+
*/
|
153 |
+
$fp->_set_conf();
|
154 |
+
/**
|
155 |
+
* Refresh the page.
|
156 |
+
*/
|
157 |
+
?>
|
158 |
+
<script type="text/JavaScript">
|
159 |
+
<!--
|
160 |
+
window.location = window.location;
|
161 |
+
// -->
|
162 |
+
</script>
|
163 |
+
<?php
|
164 |
+
}
|
165 |
+
?>
|
166 |
+
|
167 |
+
|
168 |
+
|
view/backend-head.php
ADDED
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Displays metatags for administrator backend.
|
4 |
+
*/
|
5 |
+
?>
|
6 |
+
<!-- FV Flowplayer For Wordpress ADMIN Javascript Start -->
|
7 |
+
<script type="text/javascript" src="<?php echo RELATIVE_PATH; ?>/js/jscolor/jscolor.js"></script>
|
8 |
+
<script type="text/javascript" src="<?php echo RELATIVE_PATH; ?>/flowplayer/flowplayer.min.js"></script>
|
9 |
+
<link rel="stylesheet" href="<?php echo RELATIVE_PATH; ?>/css/flowplayer.css" type="text/css" media="screen" />
|
10 |
+
<!-- FV Flowplayer For Wordpress ADMIN Javascript END -->
|
11 |
+
|
view/colours.php
ADDED
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Displays input elements for color settings form.
|
4 |
+
*/
|
5 |
+
?>
|
6 |
+
<tr>
|
7 |
+
<td></td>
|
8 |
+
<td><input type="hidden" name="tgt" id="tgt" value="backgroundColor" /></td>
|
9 |
+
</tr>
|
10 |
+
<tr>
|
11 |
+
<td><label for="backgroundColor">controlbar</label></td>
|
12 |
+
<td><input class="color" type="text" name="backgroundColor" id="backgroundColor" value="<?php echo $fp->conf['backgroundColor']; ?>" /></td>
|
13 |
+
</tr>
|
14 |
+
<tr>
|
15 |
+
<td><label for="canvas">canvas</label></td>
|
16 |
+
<td><input class="color" type="text" name="canvas" id="canvas" value="<?php echo $fp->conf['canvas']; ?>" /></td>
|
17 |
+
</tr>
|
18 |
+
<tr>
|
19 |
+
<td><label for="sliderColor">sliders</label></td>
|
20 |
+
<td><input class="color" type="text" name="sliderColor" id="sliderColor" value="<?php echo $fp->conf['sliderColor']; ?>" /></td>
|
21 |
+
</tr>
|
22 |
+
<tr>
|
23 |
+
<td><label for="buttonColor">buttons</label></td>
|
24 |
+
<td><input class="color" type="text" name="buttonColor" id="buttonColor" value="<?php echo $fp->conf['buttonColor']; ?>" /></td>
|
25 |
+
</tr>
|
26 |
+
<tr>
|
27 |
+
<td><label for="buttonOverColor">mouseover</label></td>
|
28 |
+
<td><input class="color" type="text" name="buttonOverColor" id="buttonOverColor" value="<?php echo $fp->conf['buttonOverColor']; ?>" /></td>
|
29 |
+
</tr>
|
30 |
+
<tr>
|
31 |
+
<td><label for="durationColor">total time</label></td>
|
32 |
+
<td><input class="color" type="text" name="durationColor" id="durationColor" value="<?php echo $fp->conf['durationColor']; ?>" /></td>
|
33 |
+
</tr>
|
34 |
+
<tr>
|
35 |
+
<td><label for="timeColor">time</label></td>
|
36 |
+
<td><input class="color" type="text" name="timeColor" id="timeColor" value="<?php echo $fp->conf['timeColor']; ?>" /></td>
|
37 |
+
</tr>
|
38 |
+
<tr>
|
39 |
+
<td><label for="progressColor">progress</label></td>
|
40 |
+
<td><input class="color" type="text" name="progressColor" id="progressColor" value="<?php echo $fp->conf['progressColor']; ?>" /></td>
|
41 |
+
</tr>
|
42 |
+
<tr>
|
43 |
+
<td><label for="bufferColor">buffer</label></td>
|
44 |
+
<td><input class="color" type="text" name="bufferColor" id="bufferColor" value="<?php echo $fp->conf['bufferColor']; ?>" /></td>
|
45 |
+
</tr>
|
46 |
+
|
view/frontend-head.php
ADDED
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Displays metatags for frontend.
|
4 |
+
*/
|
5 |
+
?>
|
6 |
+
<script type="text/javascript" src="<?php echo RELATIVE_PATH; ?>/flowplayer/flowplayer.min.js"></script>
|
7 |
+
<link rel="stylesheet" href="<?php echo RELATIVE_PATH; ?>/css/flowplayer.css" type="text/css" media="screen" />
|
8 |
+
<!--[if lt IE 7.]>
|
9 |
+
<script defer type="text/javascript" src="<?php echo RELATIVE_PATH; ?>/js/pngfix.js"></script>
|
10 |
+
<![endif]-->
|
11 |
+
<script type="text/javascript">
|
12 |
+
/*<![CDATA[*/
|
13 |
+
function fp_replay(hash) {
|
14 |
+
var fp = document.getElementById('wpfp_'+hash);
|
15 |
+
var popup = document.getElementById('wpfp_'+hash+'_popup');
|
16 |
+
fp.removeChild(popup);
|
17 |
+
flowplayer('wpfp_'+hash).play();
|
18 |
+
}
|
19 |
+
|
20 |
+
function fp_share(hash) {
|
21 |
+
var cp = document.getElementById('wpfp_'+hash+'_custom_popup');
|
22 |
+
cp.innerHTML = '<div style="margin-top: 10px; text-align: center;"><label for="permalink" style="color: white;">Permalink to this page:</label><input onclick="this.select();" id="permalink" name="permalink" type="text" value="<?php echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>" /></div>';
|
23 |
+
}
|
24 |
+
/*]]>*/
|
25 |
+
</script>
|
26 |
+
|
wpfp.conf
ADDED
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
autoplay:false
|
2 |
+
key:false
|
3 |
+
autobuffer:false
|
4 |
+
popupbox:true
|
5 |
+
tgt:backgroundcolor
|
6 |
+
backgroundColor:#1b1b1d
|
7 |
+
canvas:#ffffff
|
8 |
+
sliderColor:#2e2e2e
|
9 |
+
buttonColor:#454545
|
10 |
+
buttonOverColor:#ffffff
|
11 |
+
durationColor:#ffffff
|
12 |
+
timeColor:#ededed
|
13 |
+
progressColor:#707070
|
14 |
+
bufferColor:#4d4d4d
|
wpfp.conf.default
ADDED
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
autoplay:false
|
2 |
+
key:false
|
3 |
+
autobuffer:false
|
4 |
+
popupbox:true
|
5 |
+
tgt:backgroundcolor
|
6 |
+
backgroundColor:#1b1b1d
|
7 |
+
canvas:#ffffff
|
8 |
+
sliderColor:#2e2e2e
|
9 |
+
buttonColor:#454545
|
10 |
+
buttonOverColor:#ffffff
|
11 |
+
durationColor:#ffffff
|
12 |
+
timeColor:#ededed
|
13 |
+
progressColor:#707070
|
14 |
+
bufferColor:#4d4d4d
|