Web Media Player-experience with JW player

Some time ago to do a Web site project, asking to be able to play video, music, the past has not really touched. Just today in the jar wandering, found that there are comrades interested in this area, and then put these sorted out, at the same time they can also review.

The player needs to meet the following requirements:

1. Support all major browsers

2. Can interact with the player, the player must provide the necessary API

3. Customizable appearance to facilitate later expansion

4. Supports FLV, MP3, MP4 formats, supporting playlists

5. Detailed Help documentation instructions to facilitate developers to use

Demand is everything, we have no conditions to have to bite the bullet to create conditions strong ~ ~ ~. So crazy Baidu Google, found a lot of third-party players. Because my e-wen is really not good, at first I want to find a domestic. However, find to find, found that there is a charge. So had to embark on the road of unpatriotic, can only find a foreign. In the search, combined with the views of predecessors, finally chose the JW Player. Search for foreign resources or Google to force Ah, whether you believe it or not, anyway, I am the letter:).

JW player is a very good web media player that supports H.264 (. mp4,. mov,. f4v), FLV (. flv), 3GPP (. 3gp,. 3g2), OGG Theora (. ogv) and WEBM (. webm) Video formats, MP3 (. mp3), AAC (. AAC,. m4a), OGG Vorbis (. OGG) and WAV (. wav) audio, as well as SWF and picture (gif, JPG, PNG), and YouTube video format.

Support for HTML5, with a very rich plug-in available (partly charged, such as an advertising plugin).

The latest version of JW player is 5.7, official website: http://www.longtailvideo.com/players/jw-flv-player/?search=Playlist

End of the nonsense, now start the subject. The exciting is that JW player is very handy to use, and here's a look at the basic usage of JW player. The first step is to download the latest player from the website

The above two options are not selected, viral is a JW player's plug-in, do video sharing, need not need to do. Enter the mailbox to download.

After the download is complete, unzip out there are 8 files, the following figure:

Jwplayer.js and player.swf are core documents that must be introduced into the two files.

The JW Player Quick Start guide.pdf is a help document that is more detailed. second step experience with JW Player (basic usage)

1. Refer to the necessary JS file in the page Head area (I am accustomed to using jquery, so introduce, use the other frame to change this part) [HTML] view plain copy <script src= "js/ Jquery/jquery-1.6.2.js "type=" Text/javascript "></script> <script src=" js/plugins/mediaplayer-5.7/ Jwplayer.js "type=" Text/javascript "></script>

2. HTML structure is as follows [HTML] view plain copy <div id= "container" ></div> <input type= "button" CLA  ss= "Player-play" value= "Play"/> <input type= "button" class= "Player-stop" value= "Stop"/> <input type= "button" class= "Player-status" value= "Get Status"/> <input type= "button" class= "Player-current" value= "Current play seconds"/> <inpu T type= button "class=" Player-goto "value=" to 30th second playback "/> <input type=" button "class=" Player-length "value=" Video Length (sec ) "/>

3. Initialize player, complete control logic [HTML] View plain copy <script type= "Text/javascript" >       var thePlayer;   //Save the current player for Operation        $ (function ()  {            theplayer = jwplayer (' container '). Setup ({                flashplayer:  ' js/plugins/mediaplayer-5.7/ player.swf ',               file:  ' js /plugins/mediaplayer-5.7/video.mp4 ',                width: 500,                height: 350,                dock: false          &nbsp.});                       //play   pause             $ ('. Player-play '). Click (function ()  {                if  (theplayer.getstate ()  !=  ' PLAYING ')  {                    theplayer.play (true);                    this.value =  ' suspend ';                } else {                    theplayer.play (false);                    this.value =   ' Play ';   &NBSP;&NBSP;&Nbsp;         }          &NBSP;&NBSP});                       //Stop            $ ('. Player-stop ') ). Click (function ()  { theplayer.stop ()  });                       //Access Status             $ ('. Player-status '). Click (function ()  {                var state = theplayer.getstate ();               var msg;                switch  (state)  {                    case  ' buffering ':                         msg =  ' Loading ';                        break;                    case  ' PLAYING ':                        msg  =  ' playing ';                        break;                    case  ' paused ':                        msg =  ' suspend ';                         break;                    case  ' IDLE ':                        msg =  ' Stop ';                        break;                }                alert (msg);        &NBSP;&NBSP;&NBSP;&NBSP});                       //Get Playback Progress            $ ('. Player-current '). Click ( function ()  { alert (Theplayer.getposition ()) (&NBSP;});               //jumps to the specified location to play            $ ('. Player-goto '). Click (function ()  {                if  (theplayer.getstate ()  !=  ' PLAYING ')  {    //if it is not currently playing, Start player                    First  theplayer.play ();               }                theplayer.seek ( /) /start at the specified location (in seconds)           &nbsp});                       //Get video length             $ ('. Player-length '). Click (function ()  { alert (Theplayer.getduration ()); &NBSP});      &nbsp);   </script>  

This completes, and then the page runs to see the effect. Here's a screenshot:

For more detailed configuration and documentation, please refer to the official documentation for a very detailed description.

Official documents: HTTP://WWW.LONGTAILVIDEO.COM/SUPPORT/JW-PLAYER/JW-PLAYER-FOR-FLASH-V5

The first dispatch, there must be many deficiencies, I implore you to criticize, no communication will not progress