富贵资源网

基于jPlayer三分屏的制作方法
站长资源 2024/11/13 佚名
3 1538
富贵资源网 Design By www.hznty.com

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

首先，需要下载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="/UploadFiles/2021-04-02/jquery.min.js">


新建一个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); 
}






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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com