flowplayer screenshot...펌.

Installation - three methods

1. Setup with flashembed.js

flashembed.js is a general purpose Flash embedding script developed by folks here at Flowplayer. It truly is the easiest and most flexible tool to insert Flash on your pages.

The biggest reason for using this method is the ease of use - mostly because you can supply flowplayer configuration direclty in JSON format. There are other benefits as well and you can read about them from documentation.

<!-- include flashembed -->
<script type="text/javascript" src="flashembed.js"></script>
<!-- setup a placeholder for your video -->
<div id="example"></div>
<!-- replace this placeholder with flash -->
<script>
flashembed("example", {
    src:'FlowPlayerLight.swf',
    width:400, 
    height:300
  },
  {config: {  
    autoPlay: false,
    videoFile: 'example.flv',
    initialScale: 'scale', 
    useNativeFullScreen: true
  }} 
);
</script>

That's it. Just make sure that your file paths are correct. FlowPlayerLight.swf is the player Flash component. You can change it to any of the components that are included in the distribution package; FlowPlayerDark.swf, FlowPlayerLight.swf, FlowPlayerClassic.swf or FlowPlayerLP.swf. Here the player is configured to play a video from file "example.flv". All configuration variables are introduced here.

NOTE: the container element must be loaded before you can replace it with Flash. This can be achieved in three ways.

1. insert your JavaScript code after the container
2. place JavaScript inside document.onLoad() function
3. place JavaScript inside jQuery's $(document).ready() function. (if using jQuery)

We recommend you to study various possibilities that flashembed.js script offers.

 

2. Setup with swfobject.js

SWFObject is very common library for inserting Flash on web pages. It is used very much an you may even have it already. Consider reading this document for more detailed information about using this library. Here are the steps.

1. Include swfobject.js JavaScript into your page

You can download latest version of the js file here.

  <script type="text/javascript" src="swfobject.js"></script>

2. Insert a placeholder for your video.

An unique ID must be supplied for the element.

  <div id="playerContainer"></div>

3. Write JavaScript that places your video into that placeholder

  var fo = new SWFObject(
    "FlowPlayerLight.swf", "FlowPlayer", "400", "250", "9", "#fff", true
  );
  fo.addVariable("config", "{videoFile: 'honda.flv'}");
  fo.write("playerContainer");

This script must be placed after the placeholder or it must be evaluated after the page loads.

 

3. Setup with object tag

This is the most primitive way to embed video on your site. This method works in most cases but does not give you the best cross browser support.

  <object data="FlowPlayerLight.swf" width="400" height="250"
    type="application/x-shockwave-flash">
    <param name="movie" value="FlowPlayerLight.swf" />
    <param name="flashvars" value="config={videoFile: 'honda.flv'}" />
  </object>

 

ving Screenshots

By clicking on the images you'll see the given configuration in action.

Highly glossy controlbar

controlBarGloss:'high',
controlBarBackgroundColor:'0x567890'

Reduced controlbar with black look

showVolumeSlider: false,
showMuteVolumeButton: false, 
showMenu: false, 
controlBarBackgroundColor: 0

Controls over video

showVolumeSlider: false,
controlsOverVideo: 'locked',
controlBarBackgroundColor: -1,
controlBarGloss: 'none' 

Controls over video with auto-hide

showVolumeSlider: false,
controlsOverVideo: 'ease',
controlBarBackgroundColor: -1,
controlBarGloss: 'low' 

Mimimalistic look

showStopButton: false, 
showScrubber: false, 
showVolumeSlider: false,
showMuteVolumeButton: false, 
showFullScreenButton: false, 
showMenu: false, 
controlsOverVideo: 'locked',
controlBarBackgroundColor: -1,
controlBarGloss: 'none' 

Solid controls and custom logo

Watermarks are supported in licenced version.

showVolumeSlider: false,
showMuteVolumeButton: false, 
showMenu: false, 
controlBarBackgroundColor: 0x555555,
controlBarGloss: 'none',
showWatermark:'always',
watermarkUrl:'img/acme-logo.png',
watermarkLinkUrl:'http://www.acme.org'