FlowPlayer is an open source (GPL 3) Web video player. You can embed the player in your Web page, and if you are a developer, you can also freely customize and configure player-related parameters to achieve your desired playback. This article mainly introduces the use of FlowPlayer.
FlowPlayer supports the playback of FLV, SWF and other streaming media as well as picture files, which can play video files very smoothly and support custom configuration and extension.
1. Load Flowplayer.js
Add flowplayer.js between the head of the page where you want to play the video.
<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script>
You can download the latest version from Flowplyer official website: http://flowplayer.org/download/index.html
2. XHTML
Add the following code where you want to join the player:
<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>
Point the href attribute of the A tag to the video address you want to play, then set the style, width and height, and set the Display:block, and of course the key is to assign an ID to the a tag for the JS call.
Of course you can also specify only one div in the HTML, and then the JavaScript to control the playback address, such as:
<div id="player2" style="width:520px; height:330px"> </div>
3. Javascript
The JavaScript script call player is counted at the bottom of the page:
<script type="text/javascript">
flowplayer("player", "flowplayer-3.2.7.swf");
</script>
Using the FlowPlayer () function to call the player, the first parameter is the player ID, the second parameter is the path of the player, it is a flash file, make sure that the path of the player is correct.
If you do not call the video file using the a tag, but instead use the div to invoke it, the code is as follows:
flowplayer(
"player2",
"flowplayer-3.2.7.swf",{
clip: {
url: "flowplayer.flv",
autoPlay: false,
autoBuffering: true
}
}
);
The third argument to the FlowPlayer () function is that you can set multiple settings, which is the advanced one. The URL in the Clip method: represents the real address of the video file, AutoPlay: Indicates whether to play automatically, the default is true,autobuffering: Indicates whether to automatically buffer, that is, when the video file is set to not automatically play, the player still pre-download the contents of the video file.
FlowPlayer also supports playlists, as well as skin settings and many other advanced settings, specific settings, interested students can visit: http://flowplayer.org/documentation/configuration/index.html.
PS: The above demo page is someone else's, is not cracked version, the source code is the commercial version of the FlowPlayer, remove the video just start loading will display a few seconds of watermark and full screen logo
Source:demo4flowplayer.zip
Source:flowplayer-a free web video player