基于jPlayer三分屏的制作方法

 <!-- 控制面板 -->
 <!-- width: 959px; margin-left: -320px; -->
 <div id="controller" class="jp-interface" style="border: 1px solid #009be3;"&gt;
  <div class="jp-progress"&gt;
   <div class="jp-seek-bar"&gt;
    <div class="jp-play-bar"&gt;</div>
   </div>
  </div>
  <div class="jp-current-time"&gt;</div>
  <div class="jp-duration"&gt;</div>
  <div class="jp-controls-holder"&gt;
   <div class="jp-controls"&gt;
    <button class="jp-play"&gt;play</button>
    <button class="jp-stop"&gt;stop</button>
   </div>
   <div class="jp-volume-controls"&gt;
    <button class="jp-mute"&gt;mute</button>
    <button class="jp-volume-max"&gt;max volume</button>
    <div class="jp-volume-bar"&gt;
     <div class="jp-volume-bar-value"&gt;</div>
    </div>
   </div>
   <div class="jp-toggles"&gt;
    <button class="jp-full-screen"&gt;full screen</button>
   </div>
  </div>
  <div class="jp-details"&gt;
   <div class="jp-title" aria-label="title"&gt;</div>
  </div>
 </div>
</div>

$(document).ready(function() {
// 实例化第一个视频
$("#jquery_jplayer_1").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: "640px",height: "360px",cssClass: "jp-video-360p"
},useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,remainingDuration: true,toggleDuration: true
});

// 实例化第二个视频
$("#jquery_jplayer_2").jPlayer({
ready: function() {
$(this).jPlayer("setMedia",size: {
width: "320px",height: "180px",toggleDuration: true
});

// 实例化第三个视频
$("#jquery_jplayer_3").jPlayer({
ready: function() {
$(this).jPlayer("setMedia",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);
}