基于jPlayer三分屏的制作方法

supplied: "m4v",
size: {
width: "320px",
height: "180px",
cssClass: "jp-video-360p"
},
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});

// 实例化第三个视频
$("#jquery_jplayer_3").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
title: "This is 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: "320px",
height: "180px",
cssClass: "jp-video-360p"
},
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});

// 绑定初始化事件，用于在页面加载的时候初始化控制条的位置
$("#jquery_jplayer_1").bind($.jPlayer.event.ready, function(event) {
$("#controller").css({
width: "959px",
margin: "0px 0px 0px -320px"
});
});

// 绑定页面大小变更事件，用于页面大小变化的时候，设置控制条的位置
$("#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;
}
});

// 绑定单击事件，用于单击屏幕控制视频的播放与暂停
$('#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");
}
});
});

// 双击屏幕时，进入全屏状态
function fullScreen() {
$("#jquery_jplayer_1").jPlayer("option", "fullScreen", true);
}

以上就是全部信息，需要注意的是，进入全屏状态的时候，只有主屏幕进入全屏，其它两个小的屏幕并不会进入全屏状态。