首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jPlayer三分屏的制作方法

Posted in Javascript onDecember 21, 2016

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

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

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

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

首先是css文件夹，这里为了方便，某些文件也放到css文件夹里了：

基于jPlayer三分屏的制作方法

然后是js文件夹：

基于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.monday.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="css/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
 </head>
<body>
<div class="wrapper">
 <div class="left-wrapper" style="float: left; width: 320px">
  <div id="jp_container_2" class="jp-video jp-video-360p">
   <div class="jp-type-single">
    <!-- 左上的屏幕 -->
    <div ondblclick="fullScreen()" id="jquery_jplayer_2" class="jp-jplayer"></div> 
    <!-- 左下的屏幕 -->
    <div ondblclick="fullScreen()" id="jquery_jplayer_3" class="jp-jplayer"></div>
   </div>
  </div> 
 </div>
 <div class="right-wrapper" style="float: left;">
  <div id="jp_container_1" class="jp-video jp-video-360p" style="border-bottom: none; border-left: none;">
   <div class="jp-type-single">
    <div ondblclick="fullScreen()" id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-gui" align="left">
     <div class="jp-video-play" style="margin-left: -160px">
      <button class="jp-video-play-icon">play</button>
     </div>
     
     <!-- 控制面板 -->
     <!-- width: 959px; margin-left: -320px; -->
     <div id="controller" class="jp-interface" style="border: 1px solid #009be3;">
      <div class="jp-progress">
       <div class="jp-seek-bar">
        <div class="jp-play-bar"></div>
       </div>
      </div>
      <div class="jp-current-time"> </div>
      <div class="jp-duration"> </div>
      <div class="jp-controls-holder">
       <div class="jp-controls">
        <button class="jp-play">play</button>
        <button class="jp-stop">stop</button>
       </div>
       <div class="jp-volume-controls">
        <button class="jp-mute">mute</button>
        <button class="jp-volume-max">max volume</button>
        <div class="jp-volume-bar">
         <div class="jp-volume-bar-value"></div>
        </div>
       </div>
       <div class="jp-toggles">
        <button class="jp-full-screen">full screen</button>
       </div>
      </div>
      <div class="jp-details">
       <div class="jp-title" aria-label="title"> </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</body>

</html>

新建一个test.js文件，下面是代码：

var flag = false;
var isFull = false;

$(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", {
    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_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); 
}

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

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

基于jPlayer三分屏的制作方法

- Author -

我叫乾乾

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
js封装成插件的步骤方法
Sep 11 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
js实现的简练高效拖拽功能示例
Dec 21 #Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 #Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 #Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 #Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 #Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 #Javascript
详解jQuery的表单验证插件--Validation
Dec 21 #Javascript
汇报材料(247) 闭幕词(9) 通知(159) 导游词(322) 慰问信(53) 报告(147) 开幕词(63) 工作总结(1972) 计划(88) 党团范文(807)
You might like
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
php实现记事本案例
2020/10/20 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
与jquery serializeArray()一起使用的函数，主要来方便提交表单
2011/01/31 Javascript
javascript学习笔记（二）数组和对象部分
2014/09/30 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
JavaScript折半查找（二分查找）算法原理与实现方法示例
2018/08/06 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python使用配置文件过程详解
2019/12/28 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python爬取抖音视频的实例分析
2021/01/19 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
土木工程实习生自我鉴定
2013/09/19 职场文书
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
质检部经理岗位职责
2014/02/19 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
2015年班干部工作总结
2015/04/29 职场文书
学校节水倡议书
2015/04/29 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript