首页
所有分类
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 相关文章推荐
JavaScript访问样式表代码
Oct 15 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
关于ES6的六个小特性（二）
Feb 20 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 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
大脑(1) 毅力号(1) 陨石(1) 嘧啶碱基(2) RNA(2) NASA(1) 美国航天局(1) 火星(2) 富碳陨石(1) 数据(1)
You might like
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php简单的上传类分享
2016/05/15 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
参考：关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python实现log日志的示例代码
2018/04/28 Python
深入浅析Python中的迭代器
2019/06/04 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
德国便宜的宠物店：Brekz.de
2020/10/23 全球购物
同步和异步有何异同，在什么情况下分别使用他们？
2012/12/28 面试题
致铅球运动员广播稿精选
2014/01/12 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
总结Python常用的魔法方法
2021/05/25 Python
Python进行区间取值案例讲解
2021/08/02 Python