页面视频播放器

      前段时间做了一个视频培训系统,用到了页面播放器,在网上找到了一款不错的页面视频播放器,在这里和大家分享一下。

      ckplayer就是这款播放器的名字,到官网去下载源码,然后将解压的文件放到项目中,接着在页面配置一下就ok了.

      页面配置的代码

  <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
  <script type="text/javascript">
 var flashvars={
 f:"${pageContext.request.contextPath}/upload/${vname}",//视频地址
 //a:'',//调用时的参数,只有当s>0的时候有效
 //s:'0',//调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装)
 //c:'0',//是否读取文本配置,0不是,1是
 //x:'',//调用xml风格路径,为空的话将使用ckplayer.js的配置
 //i:'',//初始图片地址
 //d:'',//暂停时播放的广告,swf/图片
 //u:'',//暂停时如果是图片的话,加个链接地址
 //l:'',//视频开始前播放的广告,swf/图片/视频
 //r:'',//视频开始前播放图片/视频时加一个链接地址
 //t:'5',//视频开始前播放swf/图片时的时间
 e:'0',//视频结束后的动作,0是调用js函数,1是循环播放,2是暂停播放,3是调用视频推荐列表的插件
 v:'80',//默认音量,0-100之间
 p:'1',//视频默认0是暂停,1是播放
 h:'1',//播放http视频流时采用何种拖动方法,0是按关键帧,1是按关键时间点
 //q:'',//视频流拖动时参考函数,默认是start
 //m:'0',//默认是否采用点击播放按钮后再加载视频,0不是,1是,设置成1时不要有前置广告
 //g:'',//视频直接g秒开始播放
 //j:'',//视频提前j秒结束
 //k:'',//提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字
 //n:'',//提示点文字,跟k配合使用,如 提示点1|提示点2
 b:'0x000',//播放器的背景色,如果不设置的话将默认透明
  //w:'',//指定调用自己配置的文本文件,不指定将默认调用和播放器同名的txt文件
 //调用播放器的所有参数列表结束
 //以下为自定义的播放器参数用来在插件里引用的
 my_title:'',//视频标题
 my_url:'',//本页面地址
 my_summary:'',//视频介绍,请保持在一行文字,不要换行
 my_pic:''//分享的图片地址
 //调用自定义播放器参数结束
 };
 var params={bgcolor:'#000000',allowFullScreen:true,allowScriptAccess:'always'};//这里定义播放器的其它参数如背景色(跟flashvars中的b不同),是否支持全屏,是否支持交互
 var attributes={id:'ckplayer_a1',name:'ckplayer_a1'};
 //下面一行是调用播放器了,括号里的参数含义:(播放器文件,要显示在的div容器,宽,高,需要flash的版本,当用户没有该版本的提示,加载初始化参数,加载设置参数如背景,加载attributes参数,主要用来设置播放器的id)
 swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '9.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes); //播放器地址,容器id,宽,高,需要flash插件的版本,flashvars,params,attributes 
 //调用播放器结束
 

//这里是视频播放结束后调用的函数
 function playerstop(){
    var bt = document.getElementById("none");
       bt.style.display = "block";
 }
 
</script>

好了页面配置完成之后就可以使用了

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值