JPlayer three-point screen creation method based on jplayer

JPlayer three-point screen creation method based on jplayer

Three-ScreenIn this example, the three screens only play three videos at the same time in a player, but only one control panel needs to control them at the same time and require them to share a time track. This is just a simple simulation of the function, and there is no in-depth research.

First, you need to download jPlayer. jPlayer is a completely free and open-source jQuery multi-media library plug-in written in JavaScript. I think its biggest advantage is its compatibility and the page is concise and generous, I personally like it. JPlayer can download the latest version (http://www.jplayer.cn) to its official website ). The official website also has development documents and Demos, so it is easier to get started.

For simple video players and audio players, I will not go into details here. The Demo on the official website is quite good. Here I go straight to the topic.

First of all, introduce the relevant jPlayer files.

The first is the css folder. For convenience, some files are also placed in the css Folder:

Then the js Folder:

Because jPlayer is a plug-in jQuery, jquery's package is indispensable.

Create a test. jsp page with the following code:

<! DOCTYPE html> 
Create a new test. js file with the following code:
Var flag = false; var isFull = false; $ (document ). ready (function () {// instantiate the first video $ ("# jquery_jplayer_1 "). jPlayer ({ready: function () {$ (this ). jPlayer ("setMedia", {title: "This is video Title", M4 V: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",/* M4 V: "video/003. webm ", */poster:" http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png "}) ;}, swfPath :".. /.. /dist/jpl Ayer ", supplied:" m4v ", size: {width:" 640px ", height:" 360px ", cssClass:" jp-video-360p "}, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true}); // instantiate the second video $ ("# jquery_jplayer_2 "). jPlayer ({ready: function () {$ (this ). jPlayer ("setMedia", {title: "This is video Title", m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bu Nny_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 "}, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true}); // instantiate the third video $ ("# Jquery_jplayer_3 "). jPlayer ({ready: function () {$ (this ). jPlayer ("setMedia", {title: "This is video Title", M4 V: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",/* M4 V: "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-vid Eo-360p "}, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true}); // bind initialization event, it is used to initialize the control bar position $ ("# jquery_jplayer_1") during page loading "). bind ($. jPlayer. event. ready, function (event) {$ ("# controller" ).css ({width: "959px", margin: "0px 0px 0px-320px "});}); // bind the page size change event to set the control bar position $ ("# jquery_jplayer_1") when the page size changes "). bind ($. jPlayer. event. re Size, function (event) {if (! IsFull) {$ ("# controller" ).css ({width: "100%", margin: "0"}); isFull = true ;} else {$ ("# controller" ).css ({width: "959px", margin: "0px 0px 0px-320px"}); isFull = false ;}}); // bind a click event to control video playback and pause on the screen $ ('# jquery_jplayer_1, # jquery_jplayer_2, # jquery_jplayer_3 '). bind ("click", function () {var $ jplayer1 = $ ('# jquery_jplayer_1'); var $ jplayer2 = $ ('# jquery_jplayer_2 '); var $ jplayer3 = $ ('# jquery_jplayer_3'); var status = $ jplayer1.data ("jPlayer "). status; if (status. paused) {$ jplayer1.jPlayer ("play"); $ jplayer2.jPlayer ("play"); $ jplayer3.jPlayer ("play");} else {$ jplayer1.jPlayer ("pause "); $ jplayer2.jPlayer ("pause"); $ jplayer3.jPlayer ("pause") ;}}); // when you double-click the screen, the full screen function fullScreen () is displayed () {$ ("# jquery_jplayer_1 "). jPlayer ("option", "fullScreen", true );}
The above is all information. It should be noted that, when entering the full screen status, only the main screen enters the full screen, the other two small screens do not enter the full screen status.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.