Flowplayer: Instalasi
Kebutuhan
Yang dibutuhkan adalah,
- Sebuah web server.
- Copy Flowplayer file di server.
- Copy video file di server
- Masukan Flowplayer di halaman web.
File Flowplayer
File yang perlu di letakan di web server
- flowplayer-3.2.7.swf, player;
- flowplayer.controls-3.2.5.swf, optional control bar
- flowplayer-3.2.6.min.js, api.
Cara cepat untuk test
http://your.server.com/flowplayer/example/index.html
If everything is working properly, a video playback should start. Place video files on your web server
We assume you have video files available already and you want to play them. To make them available, you must place them on your web site so your web pages can refer to them. How exactly to upload files to your web server depends on the server and the hosting company, but a common way is to use FTP (File Transfer Protocol) to transfer the video files from your home or office computer to the web server. There are many good and free FTP clients available. A nice one is WinSCP that lets you drag and drop files from your computer to the server.
Note that Flowplayer does not support all video formats. Flowplayer essentially supports all formats supported by Adobe Flash, as Flowplayer is a manager for a basic Adobe Flash player. See here for a discussion of video formats and conversion. Include Flowplayer in your web pages
To have your web pages play videos with Flowplayer, you must embed Flowplayer in those pages. For each page there are the following steps:
1. Include file flowplayer-3.2.6.min.js in the web page 2. Load the player with one JavaScript statement 3. Place the link to your video file in a href
Step 1: To include file flowplayer-3.2.6.min.js in the web page you place the following tag in the HEAD section of your web page:
<script src="path/to/the/flowplayer-3.2.6.min.js"></script>
Step 2: To place the link to your video file in the web page, the simplest way is to use the following A tag on your web page. The video will automatically play there:
<a href="http://www.mywebsite.com/myVideo.flv" style="display:block;width:425px;height:300px;" id="player"> </a>
Step 3: Finally, to load the player on the A tag just described, you place the following script in your page, following the A tag:
<script language="JavaScript"> flowplayer("player", "path/to/the/flowplayer-3.2.7.swf"); </script>
The result: So a complete functional web page that plays videos with Flowplayer is:
<html> <head> <title>Wow! This is video</title> <script src="path/to/the/flowplayer-3.2.6.min.js"></script> </head> <body>
<a href="http://www.mywebsite.com/myVideo.flv" style="display:block;width:425px;height:300px;" id="player"> </a>
<script language="JavaScript"> flowplayer("player", "path/to/the/flowplayer-3.2.7.swf"); </script> </body> </html>
This minimal way to show video is discussed in more detail in the minimal installation demo. The demos page has many more examples of installing and customizing Flowplayer. What is next?
If you have installed Flowplayer and it is working, you may want to do more advanced things. Then there are the following topics for you to study:
* Configuration: All aspects of Flowplayer can be customized to your liking. The key to that is the configuration. In the examples on this page the configuration is not used; the default behavior is just fine. But you can provide a third argument to the flowplayer() function that can contain a lot of information to tell Flowplayer how to behave. With the configuration you can change the background color, have a different control bar, place a clock on the screen, have a splash image displayed, load playlists, have overlays and many more options. See the section on configuration for that and see the demos. * JavaScript API: With the configuration you can customize Flowplayer to your liking, but that is static, that is, you cannot change it after the player has been loaded. If you want to control the behavior of Flowplayer after it has been loaded, you must use the functions of the JavaScript API. For example, in interactive learning you can tell the video to pause at a specific point and launch a question page or information page. The use of the API by end users (you) is simple in nature and you only require a basic JavaScript knowledge. See the API documentation.
Local Installation
A local installation is where you run Flowplayer and your videos from your local hard disk.
The local installation works just as the installation for a web server; you place the distribution files on your hard disk, have your video files and embed the player in a web page from where you show your local videos.
There is just one thing different and that is the security settings of Flash. Normally Flash won't run videos from your hard disk and won't run the Flowplayer player object from your hard disk. So you must tell Flash it can trust your video location and trust the Flowplayer object. You do that by clicking this link which sends you to the Flash web site where your security settings are displayed and where you can change them to allow the locations on your hard disk. (Note: your security settings are stored local by Flash and are not stored at the Adobe or Macromedia website; it is just that the software to manage your settings run there.) In the panel you can select files or directories to trust. It is advised to allow the directory where your video files are stored and where the Flowplayer .swf objects are stored.