Ckplayer播放器播放视频
2024-05-29 19:01:20
CKplayer作为是非常好用的视频播放插件，但是目前我只能让他播放已经有的网络视频资源：
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>按列表显示框进行顺序自动播放-ckplayer应用示例</title><meta name="keywords" content="flv播放器,f4v,mp4,hlv,rtmp播放器,网页视频播放器,ckplayer官网,视频流,播放器" /><meta name="description" content="ckplayer(超酷网页视频播放器),支持http协议下的flv,f4v,mp4,支持rtmp视频流和rtmp视频回放，支持m3u8格式，是你做视频直播，视频点播的理想播放器 " /><meta name="author" content="ckplayer,超酷网页视频播放器" /><meta name="copyright" content="ckplayer,超酷网页视频播放器" /><script type="text/javascript" src="/static/js/jq1.9.1.js"></script><script type="text/javascript" src="/static/js/help.js"></script><link href="/static/css/example.css" rel="stylesheet" type="text/css"><style type="text/css">/* CSS Document */body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */form, fieldset, legend, button, /* form elements 表单元素 */th, td, /* table elements 表格元素 */img {border: medium none;margin: 0;padding: 0;}li, ol {list-style: none;vertical-align: bottom;}em {font-style: normal;}img {vertical-align: middle;}a, input, textarea, select, option, button, .logo, #icon_num li, #icon_num_top li, .blk_29 .LeftBotton, .blk_29 .RightBotton, #cal #cm .cell, .work_lcontent img, .work_detail img, .brow img {cursor: pointer;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}*html .clearfix {height: 1%;}* + html .clearfix {height: 1%;}.clearfix {display: inline-block;}/* Hide from IE Mac */.clearfix {display: block;}#playerlist a {text-decoration: none;outline: none;color: #FFF;}#a1 {width: 770px;height: 480px;float: left;}#a2, #a3 {width: 10px;height: 480px;float: left;color: #FFF;background-color: #666;line-height: 480px;cursor:pointer;}#playerlist {width: 190px;height: 480px;overflow: auto;float: left;background: #262626;font-size: 12px;}#playerlist li {list-style: none;height: 40px;line-height: 40px;padding-bottom: 2px;border-bottom: 1px solid #333;overflow: hidden;padding-left: 5px;cursor:pointer;}#playerlist li:last-child {border-bottom: none;}#playerlist li.crent {background: #1C1C1C;}#playerlist li.crent a {color: #FF7900;}#playerlist li a {display: block;color: #fff;}#playerlist li img {vertical-align: middle;height: 40px;margin: 0 20px 0 0;}</style></head>
<body>
<script type="text/javascript" src="/static/js/laycode/laycode2.js"></script>
<script src="ckplayer_6.6/ckplayer/ckplayer.js"></script><div class="clearfix"><div id="a1"></div><div id="a2" οnclick="Close();" title="收起列表">>></div><div id="a3" οnclick="Open();" style="display:none" title="展开列表"><<</div><ul id="playerlist" style="text-align: left;width: 250px"><s:bean id="sort" name="com.sdibt.lcc.comparator.SortComparatorCourse"></s:bean> <s:sort source="#allCourses" comparator="sort"> <s:iterator status="st"> <li id="vli_<s:property value='#st.index'/>" οnclick="playvideo(<s:property value='#st.index'/>)"><i class="glyphicon glyphicon-film" style="font-size:16px;color:orange;margin:10px"></i><font size="3" color="skyblue"> <s:property value="coureseName"/></font><i class="glyphicon glyphicon-bookmark" style="font-size:10px;color:orange;text-align: right;margin-left:30px"></i></li> </s:iterator></s:sort></ul>
</div><script type="text/javascript">function playerstop() {setTimeend();}function setTimeend() {//获取下一部视频的播放IDnowD++;if (nowD >= videoarr.length ) {nowD = 0;}playvideo(nowD);}function Close() {//关闭播放列表CKobject._K_('a2').style.display = 'none';CKobject._K_('playerlist').style.display = 'none';CKobject._K_('a3').style.display = 'block';CKobject._K_('a1').style.width = '970px';CKobject.getObjectById('ckplayer_a1').width = 970;}function Open() {//打开播放列表CKobject._K_('a2').style.display = 'block';CKobject._K_('playerlist').style.display = 'block';CKobject._K_('a3').style.display = 'none';CKobject._K_('a1').style.width = '770px';CKobject.getObjectById('ckplayer_a1').width = 770;}var nowD = 0;//目前播放的视频的编号(在数组里的编号)var frontTime = false;//前置广告倒计时是否在运行中var frontHtime = false;//后置广告是否在进行中var videoarr = new Array();//新建一个数组来存flash端视频地址，添加方法就像下面一样<%String coursestring=(String)session.getAttribute("courselocation"); String[] coursesarray=coursestring.split(";");System.out.print(coursesarray.length);for(int i=0;i<coursesarray.length;i++){ %>videoarr.push(<%=coursesarray[i]%>); <% }%>var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址，注意，因为本演示只有一种mp4文件，所以html5下所有用到的视频地址都是相同的，请见谅，另外，该数组是一个二维数组html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);function playvideo(n) {nowD = n;var flashvars = {f: videoarr[n],c: 0,p: 1,e: 0,my_url: encodeURIComponent(window.location.href)};for (i = 0; i < videoarr.length; i++) {//这里是用来改变右边列表背景色if (i != nowD) {CKobject._K_('vli_' + i).style.backgroundColor = '#262626';}else {CKobject._K_('vli_' + i).style.backgroundColor = '#DAF2FF';}}var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];CKobject.embed('ckplayer_6.6/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n]);}playvideo(0);
</script>
</body>
</html>也可以参考：在线调试
还有基于ckplayer6的实例：点击打开链接
源码：我等会看能不能上传
写完之后界面：
Ckplayer播放器播放视频相关推荐
- react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
- 播放器/短视频 SDK 架构设计，点播服务 (Demo)
在Android中,我们可以直接使用MediaRecord来进行录像,但是在很多适合MediaRecord并不能满足我们的需求,比如我们需要对录制的视频加水印或者其他处理后,所有的平台都按照同一的大小 ...
- Html5结合flash在所有主流播放器播放视频的方法
转自http://www.aimks.com/html5-combined-with-flash-method-in-all-mainstream-video.html Html5结合flash在所有 ...
- PotPlayer播放器播放MKV格式视频没有声音
问题描述: 最近想看纪录片<地球脉动II>,结果下载下来之后用PotPlayer播放器播放提示 无法播放,关闭提示之后视频正常播放但是没有声音,如图: 原因分析: 系统无法解码DST音频格 ...
- EasyNVR视频智能监控平台使用EasyWasmPlayer播放器播放录像文件几秒后卡顿问题排查
EasyNVR视频智能监控系统分为直播版本和录像版本,录像版本能够调取视频录像进行回看,用户可以根据自己需求进行选择. 大家知道在EasyNVR版本更新后,同时兼容了Easyplayer和EasyWa ...
- 计算机无法播放器,电脑自带播放器播放不了视频怎么办 几个步骤轻松解决
电脑自带播放器播放不了视频怎么办?虽然现在的很多用户都会从电脑网页上视频,但是还有不少的用户会下载视频来看,但是有用户发现使用自带播放器播放视频出现无法播放的情况,这是怎么回事?要如何操作才能解决呢? ...
- html给视频加音乐播放器,给视频加背景音乐 ppt如何添加视频加背景音乐－简单实现...
我们在使用PowerPoint(简称PPT)时,根据需求有时候需要加入视频和ppt如何添加视频加背景音乐的方法有很多,这里就说说简单实现的一种方法,还有比较实用的狸窝PPT转换器PPT转换视频的教程贴 ...
- android ffmpeg 仿剪映播放器 剪辑视频 预览条 快速精准抽帧
android ffmpeg 仿剪映播放器 剪辑视频 预览条 快速精准抽帧 由于本人想学习音视频相关的东西,所以找了剪映作为借鉴,通过仿照剪映的功能学习音视频相关的东西,所以有了这个项目 暂时这个项目 ...
- uniapp引入xgplayer(西瓜播放器)实现视频监控
开发背景 最近有个需求,需要在app中展示对应站房的实时监控画面,因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件 开发准备 因为是直播流就选择了flvjs, 项目安装x ...
- 如何通过API调用EasyPlayer.js播放器的视频实时录像功能？
我们在前期的文章介绍过关于流媒体播放器EasyPlayer.js已经实现了直播视频实时录像的功能,感兴趣的用户可以戳这篇文章进行了解:<H5网页播放器EasyPlayer.js如何实现直播视频实 ...
最新文章
- 浮动元素的display属性
- 《深入理解计算机系统》读书笔记六:整数表示
- 积分路径上有奇点的积分_复变函数导数与积分与级数
- 多线程编程2 - NSOperation
- linux wlan进程名称,linux无线网络配置无线网卡驱动安装与wlan802.11配置
- [css] 固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？
- sql时间小问题汇总
- 嵌入式Linux内核优化裁剪
- Clojure 学习入门（2）- eclipse 插件
- C/C++ Npcap包实现ARP欺骗
- GHO文件内IE主页的修改方法
- qiankun加载react子应用报错[import-html-entry] error occurs while executing normal script
- 新手建网站的步骤及注意事项
- 怎么关闭win7计算机一键还原系统,win7一键还原按哪个键_win7一键还原
- 计算机数据库基础知识填空题,数据库练习题（基础）
- 块矩阵（Block Matrix）、舒尔补（Schur complement）
- USACO 刷水记录
- 远程shell特洛伊木马病毒
- html转成cshtml通用篇
- js中的回调函数，什么是回调函数？