flowplayer-a free web video player

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.