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 into your webpage. If you are a developer, you can also customize and configure player parameters to achieve the desired playback effect. This article describes how to use flowplayer.

Flowplayer supports playing FLV, SwF, and other streaming media and image files. It can play video files smoothly and supports custom configurations and extensions.

1. Load flowplayer. js

Add flowplayer. js to the head of the page for video playback.

 
<SCRIPT type = "text/JavaScript" src = "JS/flowplayer-3.2.6.min.js"> </SCRIPT>

You can go to flowplyer official website to download the latest version: http://flowplayer.org/download/index.html

2. XHTML

Add the following section where you want to join the player:Code:

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

Point the href attribute of tag a to the video address to be played, set the style, width and height, and set the display: block. Of course, the key is to specify an ID for tag, to facilitate JS calls.

Of course, you can also specify only one DIV in HTML, and then control the playback address by JavaScript, such:

<Div id = "player2" style = "width: 520px; Height: 330px"> </div>
3. Javascript

Calculate the 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 player ID, and the second parameter is the player path. It is a flash file and must ensure that the player path is correct.

If you use Div instead of calling a video file, 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 in multiple ways. In fact, it is an advanced setting. URL in the clip method: Specifies the actual address of the video file. autoplay: Indicates whether to play the video automatically. The default value is true. autobuffering: Indicates whether to buffer the video automatically, that is, when the video file is set to not automatically played, the player still downloads the video file content in advance.

Flowplayer also supports multiple advanced settings such as playlist and skin settings. For more information, see http://flowplayer.org/documentation/configuration/index.html.

[Http://www.helloweba.com/demo/flowplayer /]

 

Reprinted:

Http://www.helloweba.com/view-blog-154.html

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.