Based on FlowPlayer to create a free web video player with source code _javascript tips

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 are free to customize and configure player-related parameters to achieve the playback effect you want. This article mainly introduces the use of FlowPlayer.

View Demo Source Download

FlowPlayer supports streaming media such as FLV, SWF, and picture files, and can play video files very smoothly, supporting custom configurations and extensions.

1, loading Flowplayer.js

Add flowplayer.js between the head of the page where you want to play the video.

You can download the latest version of the Flowplyer official online: http://flowplayer.org/download/index.html

2, XHTML

Add the following code where you want to add the player:

<a href= "flowplayer.flv" style= "display:block;width:520px;height:330px" id= "Player" ></a>

Point the href attribute of a label to the video address that you want to play, and then set the style, width, and height, and set the Display:block, of course, the key is to give the a tag an ID, so that the JS call.

Of course, you can also specify a div in HTML and then control the playback address by JavaScript, such as:

<div id= "Player2" style= "width:520px; height:330px "> </div>

3. Javascript

The JavaScript script invocation player is counted at the bottom of the page:

<script type= "Text/javascript" > 
flowplayer ("Player", "flowplayer-3.2.7.swf"); 
</script>

Use the FlowPlayer () function to invoke the player, the first parameter is the player ID, the second parameter is the player's path, it is a flash file, make sure that the player's path is correct.

If you use a div to invoke a video file instead of using a label, the code is as follows:

FlowPlayer ( 
 "Player2", 
 "flowplayer-3.2.7.swf", { 
 clip: { 
 URL: "flowplayer.flv", 
 AutoPlay: False, 
 autobuffering:true 
 } 
 } 

The third parameter of the FlowPlayer () function can be set more than one, but it is an advanced setting. Clip URL: Represents the real address of the video file, AutoPlay: whether to play automatically, the default is true,autobuffering: whether automatic buffering, that is, when the video file is set to not automatically play, the player will still download the contents of the video file in advance.

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.