Create a free WEB video player based on Flowplayer with source code_javascript skills

Flowplayer is an open source (GPL 3) WEB video player. You can embed the player into your web page. If you are a developer, you can also freely customize and configure the relevant parameters of the player to achieve the playback effect you want. This article mainly introduces the use of Flowplayer.

View demo Source code download

Flowplayer supports playing streaming media such as flv, swf and image files. It can play video files very smoothly and supports custom configuration and expansion.

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 need to add 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 to be played, then set the style, width and height, and set display:block. Of course, the key is to specify an id for the a tag to facilitate JS calls.

Of course, you can also just specify a DIV in html, and then use Javascript to control the playback address, such as:

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

3. Javascript

Include javascript script at the bottom of the page to call the player:

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

Use the flowplayer() function to call the player. The first parameter is the id of the player, and the second parameter is the path of the player. It is a flash file. Make sure the path of the player is correct.

If instead of using a tag to call the video file, but using DIV to call it, 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 used for multiple settings, which is actually advanced settings. The url in the clip method: indicates the real address of the video file, autoPlay: indicates whether to automatically play, the default is true, autoBuffering: indicates whether to automatically buffer, that is, when the video file is set not to automatically play, the player still downloads the video file content in advance .

flowplayer also supports many advanced settings such as playlists and skin settings. For specific settings, interested students can visit: http://flowplayer.org/documentation/configuration/index.html.