A method of making a jplayer based on three-point screen _jquery

three-point screen , where the three-point screen is only in a player to play three video simultaneously, but requires only one control Panel to control them simultaneously, asking them to share a time orbit. This is just a simple simulation of the function, and there is no in-depth research.

First of all, need to download Jplayer,jplayer is a JavaScript write completely free and open source jquery Multimedia Library Plug-ins, I think his greatest advantage is compatibility, and the page is simple and generous, personally like. Jplayer can download the latest version (http://www.jplayer.cn) at its official website. and the official website has the development document and the demo, therefore still relatively easy to start.

About the simple video player and audio player here no longer repeat, the official website demo is very good, here goes straight to the topic.

First of all, of course, introduce jplayer related documents.

First is the CSS folder, here for convenience, some files are also placed in the CSS folder:

Then the JS folder:

Because Jplayer is a plugin in jquery, so the jquery package is natural.

Create a new test.jsp page with the following code:

<! DOCTYPE html>  

Create a new Test.js file, the following is code:

var flag = false;

var isfull = false; $ (document). Ready (function () {//Instantiate the first video $ ("#jquery_jplayer_1"). Jplayer ({ready:function () {$ (this). Jplayer ("se Tmedia ", {title:" This is the video title ", M4V:" HTTP://WWW.JPLAYER.ORG/VIDEO/M4V/BIG_BUCK_BUNNY_TRAILER.M4V ",/
  * M4V: "VIDEO/003.WEBM", * * Poster: "Http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"}); }, Swfpath: ". /.. /dist/jplayer ", supplied:" M4V ", size: {width:" 640px ", Height:" 360px ", CssClass:" jp-video-360p "}, US Estateclassskin:true, Autoblur:false, Smoothplaybar:true, Keyenabled:true, Remainingduration:true, ToggleDu
 
 Ration:true}); Instantiate the second video $ ("#jquery_jplayer_2"). Jplayer ({ready:function () {$ (this). Jplayer ("Setmedia", {title: "This is V
    Ideo Title ", M4V:" http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v ", * M4V:" VIDEO/003.WEBM ", * * Poster: "Http://www.jplayer.org/video/poster/Big_Buck_Bunny_TrailEr_480x270.png "}); }, Swfpath: ". /.. /dist/jplayer ", supplied:" M4V ", size: {width:" 320px ", Height:" 180px ", CssClass:" jp-video-360p "}, US Estateclassskin:true, Autoblur:false, Smoothplaybar:true, Keyenabled:true, Remainingduration:true, ToggleDu
 
 Ration:true}); Instantiate the third video $ ("#jquery_jplayer_3"). Jplayer ({ready:function () {$ (this). Jplayer ("Setmedia", {title: "This is V
    Ideo Title ", M4V:" http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v ", * M4V:" VIDEO/003.WEBM ", * *
  Poster: "Http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"}); }, Swfpath: ". /.. /dist/jplayer ", supplied:" M4V ", size: {width:" 320px ", Height:" 180px ", CssClass:" jp-video-360p "}, US Estateclassskin:true, Autoblur:false, Smoothplaybar:true, Keyenabled:true, Remainingduration:true, ToggleDu

 Ration:true}); Binding initialization event, which initializes the location of the control bar when the page is loaded $ ("#jquery_jplayer_1"). Bind ($.jplayer.evEnt.ready, function (event) {$ ("#controller"). CSS ({width: "959px", margin: "0px 0px 0px-320px"});
 
 }); Bound page Size Change event, when the page size changes, set the position of the control bar $ ("#jquery_jplayer_1"). Bind ($.jplayer.event.resize, function (event) {if!isfull
   {$ ("#controller"). CSS ({width: "100%", margin: "0"});
  Isfull = true;
   else {$ ("#controller"). CSS ({width: "959px", margin: "0px 0px 0px-320px"});
  Isfull = false;
 
 }
 });
  Binding order Click event, for clicking the screen control video playback and pausing $ (' #jquery_jplayer_1, #jquery_jplayer_2, #jquery_jplayer_3 '). Bind ("click", Function () {
  var $jplayer 1 = $ (' #jquery_jplayer_1 ');
  var $jplayer 2 = $ (' #jquery_jplayer_2 ');
  var $jplayer 3 = $ (' #jquery_jplayer_3 ');
  var status = $jplayer 1.data ("Jplayer"). Status;
   if (status.paused) {$jplayer 1.jPlayer ("Play");
   $jplayer 2.jPlayer ("Play");
  $jplayer 3.jPlayer ("Play");
   else {$jplayer 1.jPlayer ("pause");
   $jplayer 2.jPlayer ("pause");
  $jplayer 3.jPlayer ("pause");
}
 });

}); When you double-click the screen, go to full screen state function fullscreen () {$ ("#jquery_jplayer_1"). Jplayer ("option", "fullscreen", true);
 }

The above is all information, it should be noted that when entering Full-screen state, only the main screen into full screen, the other two small screens will not enter the full screen state.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.