CKPlayer的列表框的demo

<!DOCTYPE html>
<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">
/*#a1 {
height: 400px;
width: 600px;
}*/

#nowTime {
line-height: 35px;
background-color: #EBEBEB;
height: 35px;
}
/* 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;
}

#mediaplayer_wrapper {
border: 1px solid #000;
margin-bottom: 35px;
}

.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;
}

#desic {
text-align: center;
padding: 10px 0;
width: 950px;
margin: 0 auto 31px;
color: #999;
}

#a1 {
width: 770px;
height: 480px;
float: left;
}
#a2, #a3 {
width: 10px;
height: 480px;
float: left;
background: #262626;
}
#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;
}

#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;
}

.bshare-custom {
position: absolute;
top: 123px;
right: 1px;
z-index: 2;
}
.mright {
float: left;
padding-left: 10px;
width: 234px;
line-height: 20px;
font-size: 12px;
}

.mright a {
text-decoration: none;
color: #06F;
}
</style>
</head>
<body>
<div class="top">
<div class="top_left"><a href="http://www.ckplayer.com/">ckplayer.com</a></div>
<div class="top_tab"><a href="http://www.ckplayer.com/">首页</a> | <a href="http://www.ckplayer.com/bbs/forum.php?mod=forumdisplay&fid=2">下载</a> | <a href="http://www.ckplayer.com/tool/">帮助手册</a> | <a href="http://www.ckplayer.com/article/19.htm">应用示例</a> | <a href="http://www.ckplayer.com/bbs/forum.php">论坛</a></div>
</div>
<div class="c_title">自动播放上次播放的示例</div>
<div class="clearfix">
<div id="a1"></div>
<div><img src="imags/1.jpg" onclick="mm();" id="a2" title="收起列表" /></div>
<div><img src="imags/1.jpg" onclick="mmm();" id="a3" style="display:none" title="展开列表" /></div>
<ul id="playerlist">
<li id="vli_0" onclick="playvideo(0)"><img src="data:images/1.jpg">霍比特人</li>
<li id="vli_1" onclick="playvideo(1)"><img src="data:images/2.jpg">海洋</li>
<li id="vli_2" onclick="playvideo(2)"><img src="data:images/3.jpg">快乐的大脚</li>
<li id="vli_3" onclick="playvideo(3)"><img src="data:images/4.jpg">超凡蜘蛛侠2</li>
<li id="vli_0" onclick="playvideo(0)"><img src="data:images/1.jpg">霍比特人</li>
<li id="vli_1" onclick="playvideo(1)"><img src="data:images/2.jpg">海洋</li>
<li id="vli_2" onclick="playvideo(2)"><img src="data:images/3.jpg">快乐的大脚</li>
<li id="vli_3" onclick="playvideo(3)"><img src="data:images/4.jpg">超凡蜘蛛侠2</li>
<li id="vli_0" onclick="playvideo(0)"><img src="data:images/1.jpg">霍比特人</li>
<li id="vli_1" onclick="playvideo(1)"><img src="data:images/2.jpg">海洋</li>
<li id="vli_2" onclick="playvideo(2)"><img src="data:images/3.jpg">快乐的大脚</li>
<li id="vli_3" onclick="playvideo(3)"><img src="data:images/4.jpg">超凡蜘蛛侠2</li>
</ul>
</div>

<script src="../flash/ckplayer/ckplayer.js"></script>
<script type="text/javascript">
function loadedHandler() {
if (CKobject.getObjectById('ckplayer_a1').getType()) {
CKobject.getObjectById('ckplayer_a1').videoPlay();
//CKobject.getObjectById('ckplayer_a1').addListener('play', playHandler);
}
else {
CKobject.getObjectById('ckplayer_a1').videoPlay();
//CKobject.getObjectById('ckplayer_a1').addListener('play', 'playHandler');
}
}
function playerstop() {
setTimeend();
CKobject.getObjectById('ckplayer_a1').videoPlay();
//alert('播放结束，正在播放结束广告');
}
function setTimeend() {//后置广告倒计时
nowD++;
if (nowD >= videoarr.length - 1) {
nowD = 0;
}
playvideo(nowD);
}
function mm() {
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;
//alert("dddd");
}
function mmm() {
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;
//alert("dddd");
}
var nowD = 0;//目前播放的视频的编号(在数组里的编号)
var frontTime = false;//前置广告倒计时是否在运行中
var frontHtime = false;//后置广告是否在进行中
var videoarr = new Array();//新建一个数组来存flash端视频地址，添加方法就像下面一样
videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-3.flv');
videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-1.flv');
videoarr.push('http://movie.ks.js.cn/flv/2011/11/8-1.flv');
videoarr.push('http://movie.ks.js.cn/flv/2014/04/24-2.flv');
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: 2,
//b: 0,
e: 0,
//i: '/static/images/letitgo.jpg',
loaded: 'loadedHandler',
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('../flash/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, video);
CKobject.embed('../flash/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n]);

}
// CKobject.embed('/ckplayer/6.6/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video);
playvideo(0);
</script>
<div class="explain_title">相关代码及说明</div>
<div class="exp">
原理：主要用css把列表框给显示出来，然后把所需要的路径给传给列表框，可以自动进行播放。
</div>
</body>

</html>

CKPlayer的列表框的demo的更多相关文章

ligerUI---ListBox(列表框可移动)
写在前面: 对于可移动的列表框,ligerui中也对其进行了封装,可以直接照着demo拿来用,不过那都是直接在页面上静态初始化的数据,那么如何从后台获取? 前面有了对ligerui的一些组件的使用经验 ...
JPasswordField密码框，JList列表框
[JPasswordField密码框] //导入Java类 import javax.swing.*; import java.awt.*; import java.awt.event.ActionE ...
下拉列表JComboBox，列表框JList
1.下拉列表JComboBox public class Demo extends JFrame { public Demo() { setBounds(100, 100, 200, 100); se ...
MFC编程入门之二十四（常用控件：列表框控件ListBox）
前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...
【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
Java——列表框：JList
import java.awt.Container; import java.awt.GridLayout; import java.awt.event.WindowAdapter; import j ...
列表框QListWidget类
QListWidget类也是GUI中常用的类,它从QListView下派生: class Q_GUI_EXPORT QListWidget : public QListView { Q_OBJECT ...
Swing列表框组件
public class JListTest extends JFrame{ private static final long serialVersionUID=1L; publ ...
列表框List Box
List Box/Check List Box ListBox窗口用来列出一系列的文本,每条文本占一行.创建一个列表窗口可以使用成员函数: BOOL CListBox::Create( LPCTSTR ...

随机推荐

2014年百度之星程序设计大赛 - 资格赛 1002 Disk Schedule（双调欧几里得旅行商问题）
Problem Description 有非常多从磁盘读取数据的需求,包含顺序读取.随机读取.为了提高效率,须要人为安排磁盘读取.然而,在现实中,这样的做法非常复杂.我们考虑一个相对简单的场景.磁盘有 ...
API访问客户端
API访问客户端(WebApiClient适用于MVC/WebForms/WinForm) 这几天没更新主要是因为没有一款合适的后端框架来支持我们的Web API项目Demo, 所以耽误了几天, 目前 ...
Redis集群方案及实现
在作出Redis群集解决方案,他跑了小半个.行表现得非常稳定在几乎相同的经历与大家分享,我写在前面的文章数据在线服务的一些探索经验,能够做为背景阅读应用我们的Redis集群主要承担了下面服务:1. ...
Oracle SQL操作计划基线总结（SQL Plan Baseline）
一.基础概念 Oracle 11g開始,提供了一种新的固定运行计划的方法,即SQL plan baseline,中文名SQL运行计划基线(简称基线),能够觉得是OUTLINE(大纲)或者SQL PRO ...
C++ 内部排序（一）
先讲两个概念,所谓内部排序,指待排序的节点均存储在内存中.所谓排序的稳定性,指排序后,值相等的两个元素原来相对的位置是否发生变化了.举个例子. 待排序列:3(1),1,5,3(2) 稳定排序:1,3 ...
Oracle数据表被drop后的恢复
对于被drop的表和索引,都会存放在回收站中(所以对于生产的数据库必须设置好回收站功能) 由于本次生成环境在drop掉已有的表后,又一次创建了很多的表,全部直接还原的话会提示原有对象存在,表名反复.当 ...
本人第一个android游戏《新连连看》上架
经过艰苦奋战了几天,本人的第一个android游戏<新连连看>最终完毕了第一个版本号,比較简陋.另一部分功能保留没有开放.等第二个版本号再上.用的libgdx框架.可能不是非常出名,可是本 ...
从JAR包中如何读取数据文件
还不是很懂.....待总结......
EXCEL 两人的建立Y轴
在本文中,EXCEL2013基于,操作的其他版本基本上相同模式原始数据和最后的结果如下面的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanloX2p ...
XML概要
早在两年前,我一直听说XML,但是,只是没有时间去研究它.也不知道它的作用,花了一些时间最近几天来学习他们的语言.是XML的一些简介希望能对各位同学有所帮助: XML是eXtensible Ma ...

CKPlayer的列表框的demo

CKPlayer的列表框的demo的更多相关文章

随机推荐

热门专题