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

随机推荐

Ini文件帮助类
.ini文件是什么 .ini 文件是Initialization File的缩写,就是初始化文件.在Windows系统中,其是配置文件所采用的存储格式(主要是system.ini,win.ini,sy ...
Mysql 5.6 新特性
随笔,真的随笔,以后理解得更深了再修改. Index Condition Pushdown 更多的让存储引擎去处理Where语句中的条款,避免返回无关字段数据等: Multi-Range Re ...
winform正在使用dsoframer迅速"Unable to display the inactive document.Click here to reacitive the document."
于winform正在使用dsoframer 1.3加载word档,但在axFramerControl1.Open("NPOI.docx");于axFramerControl1控制显 ...
Serializable 作用
Serializable 作用序列化的attribute,是为了利用序列化的技术准备用于序列化的对象必须设置 [System.Serializable] 标签,该标签指示一个类能够序列化. 便于在 ...
HDU 1272 小希迷宫（并检查集合）
意甲冠军:被判处无向图无环和连接无处不在思考:并检查集合,trap 您可能有一个直接输入0 0 并且....合并的时候按某一个方向会爆栈,爆了好几次...下次考虑一下直接递归找祖先吧 #includ ...
阿里巴巴2014研发project师实习生面试经历
java研发project师的初面是在上周三进行的,终于结果到了晚上才出,而没有通过的则是一结束网上就更新了状态.之后阿里通知这周三,也就是今天进行二面. 凑巧的是今早被舍友吵醒,中午那个困啊,但没时 ...
java实现生产者消费者问题（转）
引言生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,如下图所示,生产者向空间里存放数据,而消费者取用数据,如果不加以协调可能会出现以下情况: 生产者消费者图 ...
如何出色的研究 RGSS3 （三）形式的调整的细节
在一个我们研究了添加到窗体方法的选择,这个问题来研究窗体类的细节. 所有形式的父类的 Window_Base 四个参数需要初始化. #--------------------------------- ...
ORA-00838: Specified value of MEMORY_TARGET is too small(转)
1. 测试环境OS: RHEL5U5(32bit)DB: Oracle 11.2.0.3.0(32bit) 2. 异常原因. 2.1 oracle 11g默认sga_target为0,如下图, O ...
彩色图像--色彩空间 YIQ 、YUV 、YCbCr 、YC1C2 和I1I2I3
学习DIP文章64天转载请注明文章出处:http://blog.csdn.net/tonyshengtan .出于尊重文章作者的劳动,转载请标明出处.文章代码已托管,欢迎共同开发:https://g ...

CKPlayer的列表框的demo

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

随机推荐

热门专题