基于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('选项','全屏,真);}以上就是全部信息,需要注意的是,进入全屏状态的时候,只有主屏幕进入全屏,其它两个小的屏幕并不会进入全屏状态。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:基于jPlayer三分屏的制作方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。