基于jPlayer三分屏的制作方法

三分屏，这里的三分屏只是在一个播放器里同时播放三个视频，但是要求只有一个控制面板同时控制它们，要求它们共享一个时间轨道。这次只是简单的模拟了一下功能，并没有深入的研究。

首先，需要下载jPlayer是一个Java脚本语言写的完全免费和开源的jQuery多媒体库插件，我觉得他最大的好处就是兼容性，并且页面也简洁大方，个人比较喜欢jPlayer。可到其官网下载最新版本(http://www.jplayer.cn)。并且官网有开发文档和演示，所以还是比较容易上手的。

关于简单的视频播放器和音频播放器这里不再赘述了，官网的演示挺好的，这里直奔主题。

首先当然是引入jPlayer相关文件。

首先是钢性铸铁文件夹，这里为了方便，某些文件也放到钢性铸铁文件夹里了：

然后是射流研究…文件夹：

因为jPlayer是在jQuery的插件，所以jquery的包自然也就少不了了。

新建一个test.jsp页面，下面是代码：

！DOCTYPE html html head meta charset=' utf-8 '/title jplayer Test/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /！-引入相关文件- link href='css/jplayer.blue。星期一。CSS“rel=”样式表type=' text/CSS '/script type=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http : CSS/jquery。jplayer。量滴js '/script script type=' text/JavaScript ' src=' http 3360 js ' width : 320 px ' div id=' jp _ container _ 2 ' class=' jp-video jp-video-360 p ' div class=' jp-type-single '！-左上的屏幕-div ond blclick='全屏()' id=' jquery _ jplayer _ 2 ' class=' jp-jplayer '/div！-左下的屏幕-div ondblclick='全屏()' id=' jquery _ jplayer _ 3 ' class=' jp-jplayer '/div/div/div class=' right-wrapper ' style=' float : left；div id=' jp _ container _ 1 ' class=' jp-video jp-video-360 p ' style=' border-bottom : none；边框-左侧：无div class=' jp-type-single ' div ond bl click='全屏()' id=' jquery _ jplayer _ 1 ' class=' jp-jplayer '/div class=' jp-GUI ' align=' left ' div class=' jp-video-play ' style=' margin-left :-160px ' button class=' jp-video-play-icon ' play/button/div！-控制面板- !-宽度： 959 px边距-左侧：-320像素；-div id=' controller ' class=' jp-interface ' style=' border : 1px solid # 009 be 3；div class=' jp-progress ' div class=' jp-seek-bar ' div class=' jp-play-bar '/div/div class=' jp-current-time '/div class=' jp-duration '/div class=' jp-controls-holder ' div class=' jp-controls '按钮class=' jp-play ' play/button class=' jp-stop ' stop/button/div class=' jp-volume-controls '按钮class=' jp-mute新建一个test.js文件，下面是代码：

定义变量标志=falsevar isFull=false$(文档)。就绪（函数(){ //实例化第一个视频$('#jquery_jplayer_1 ').jPlayer({ ready : function(){ $(this)).jPlayer('setMedia '，{ title: '这是视频标题'，m4v : ' http://www。jPlayer。org/video/m4v/Big _ Buck _ Bunny _预告片。m4v '，/* m4v: 'video/003.webm '，*/poster : ' http://www .jPlayer。组织/视频/海报/Big _ Buck _ Bunny _拖车_ 480 x270。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:实例化第二个视频$('#jquery_jplayer_2 ').jPlayer({ ready : function(){ $(this)).jPlayer('setMedia '，{ title: '这是视频标题'，m4v : ' http://www。jPlayer。org/video/m4v/Big _ Buck _ Bunny _预告片。m4v '，/* m4v: 'video/003.webm '，*/poster : ' http://www .jPlayer。组织/视频/海报/Big _ Buck _ Bunny _拖车_ 480 x270。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:实例化第三个视频$('#jquery_jplayer_3 ').jPlayer({ ready : function(){ $(this)).jPlayer('setMedia '，{ title: '这是视频标题'，m4v : ' http://www。jPlayer。org/video/m4v/Big _ Buck _ Bunny _预告片。m4v '，/* m4v: 'video/003.webm '，*/poster : ' http://www .jPlayer。组织/视频/海报/Big _ Buck _ Bunny _拖车_ 480 x270。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:绑定初始化事件，用于在页面加载的时候初始化控制条的位置$('#jquery_jplayer_1 ').bind($.jPlayer.event.ready，function(event) { $('#controller ')).css({ width: '959px '，margin : ' 0px 0px-320 px ' })；});//绑定页面大小变更事件，用于页面大小变化的时候，设置控制条的位置$('#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-320 px ' })；isFull=false } })；//绑定单击事件，用于单击屏幕控制视频的播放与暂停$('#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状态=$ jPlayer 1。数据(' jPlayer ').地位；if(状态。暂停){ $ jplayer 1。jplayer(' play ')；$ jplayer 2。jplayer(' play ')；$ jplayer 3。jplayer(' play ')；} else { $ jplayer 1。jplayer(' pause ')；$ jplayer 2。jplayer(' pause ')；$jplayer3.jPlayer('暂停');} });});//双击屏幕时，进入全屏状态函数全屏(){ $(' # jquery _ jplayer _ 1 ').jPlayer('选项','全屏，真)；}以上就是全部信息，需要注意的是，进入全屏状态的时候，只有主屏幕进入全屏，其它两个小的屏幕并不会进入全屏状态。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。