Developing video playback Using the JW players player

Preface

Some time ago in a website project, asked to be able to play video online, music, this has not really touched before. Just today, wandering in the jar, found that there are comrades interested in this area, and then put these together under, 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 APIs

3. Customizable appearance, convenient for later expansion

4. Supports FLV, MP3, MP4 format, support playlist

5. Detailed Help document description, convenient for developers to use

Demand is everything, we have to bite the bullet to create conditions strong on the ~ ~ ~. So crazy Baidu Google, found a lot of third-party players. Because I am really not very well, the first to find a domestic. However, to find out, found that there is a charge. So had to embark on the road of not patriotic, can only find a foreign. In the search, combined with the opinions of predecessors, the final choice is JW Player. Search foreign resources or Google to force Ah, whether you believe it or not, anyway I believe:).

JW player is a very good web media Player with support for H. 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 formats.

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

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

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

None of the above two options, viral is a JW player plug-in, do video sharing, you need not to look at the office. Enter your email to download.

After the download is complete, extract 8 files, as shown below:

Jwplayer.js and player.swf are core files that must be introduced in these two files.

The JW Player Quick Start guide.pdf is a help document, which is also more detailed. Step Two experience JW Player (Basic usage)

1. Refer to the necessary JS file in the head area of the page (I'm accustomed to using jquery, so I've introduced, use other frameworks to change that part myself) [HTML] view plain copy print? <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> <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. The HTML structure is as follows [html]  view plain copy print? <div id= "Container" ></div>   <input type= "button"  class= "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= "currently playing seconds"  />    <input type= "button"  class= "Player-goto"  value= "go to 30th second play"  />   < Input type= "button"  class= "Player-length"  value= "video duration (seconds)"  />   <div id= " Container "></div> <input type=" button "class=" 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 playback seconds"/> <input tyPe= "button" class= "Player-goto" value= "go to 30th second play"/> <input type= "button" class= "Player-length" value= "video duration (seconds)"/ >

 

3. Initialize the player, complete the control logic [html]  view plain copy print? <script type= "Text/javascript" >       var theplayer;  / /Save 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 =  ' pause ';                } else {                     Theplayer.play (false);                    this.value =  ' Play ';               }           });                       //Stop             $ ('. Player-stop '). Click (function ()  { theplayer.stop ();  });                      // Get status            $ ('. Player-status '). Click (function ()  {                var state =  theplayer.getstate ();                var msg;               switch   (state)  {                   case   ' buffering ':                        msg =  ' loading in ';                        break;                   case  ' PLAYING ':                        msg =  ' playing ';                        break;                    case  ' PAUSED ':    &NBSP;&NBSP;&NBSp;                 msg  =  ' Pause ';                        break;                    case  ' IDLE ':                        msg =  ' Stop ' ;                        break;                }               alert (msg);            });             &nbSp         //Get playback Progress             $ ('. Player-current '). Click (function ()  { alert (Theplayer.getposition ());  });              //jump to a specified position play             $ ('. Player-goto '). Click (function ()  {