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

随机推荐

STM32 水晶不摇
刚刚得到一个新的董事会,该设备被编程为去,但执行地址不正确,没有进入c语言没有进入c语言,有可能是一个难以回答的问题狗,硬狗拆除检查以下四种情况 1.检查片内的功率是所有权利 2.检查晶体线短路 ...
StackExchange.Redis Client
StackExchange.Redis Client 这期我们来看StackExchange.Redis,这是redis 的.net客户端之一.Redis是一个开源的内存数据存储,可以用来做数据库,缓 ...
嵌入在网页上Flash媒体播放器（1）
做的项目,在不久的将来相关的Flash玩家使用,需要播放视频的网页上,不同的视频资源,需要不同的球员.基于使用稳定性.的嵌入式和嵌入式复杂性能的优点概括起来有两种方式(不同的玩家),视频资源也略有不同 ...
ADN中国队参加微软Kinect他赢得了全国比赛三等奖，我们的创意项目与团队Kinect于Naviswork虚拟之旅
以下是我的英语写了一个简短的总结,直接贴出来. 让我们知道我们在这参加Hackathon That's an exciting Hackathon for me and also China team ...
前框（一个）zTree 从数据库树形菜单动态加载
这些天做动态菜单使用此插件.现在有一个非常广泛的开源框架,最新QUI框架是菜单部分使用这个插件开发,因此,它是非常值获取深入的研究和探讨,通过使用非常丰富的感觉功能,己开发和编写,官网上有非常详尽的A ...
Data source rejected establishment of connection, message from server: "Too many connections"
错误叙述性说明: 測试一段时间没有不论什么问题.今天突然用户无法登录,报错如Data source rejected establishment of connection, message fro ...
quick-cocos2d-x教程8:程序框架内lib文件夹分析
lib文件夹是如今全部文件夹中最复杂的,包括了整个运行所需的库文件.我们简单看下,在开发初期,不须要深入到这个库里去研究 cocos2d-x 文件夹就是c++版的原始文件 framework_prec ...
hdu4770:Lights Against Dudely（回溯 + 修剪）
称号:hdu4770:Lights Against Dudely 题目大意:相同是n*m的矩阵代表room,房间相同也有脆弱和牢固之分,如今要求要保护脆弱的房间.须要将每一个脆弱的房间都照亮,可是牢固 ...
nettyclient异步获取数据
源代码见,以下主要是做个重要代码记录 http://download.csdn.net/detail/json20080301/8180351 NETTYclient获取数据採用的方式是异步获取数据, ...
ruby简单的基本 6
模像类似的模块,那里 class method 和 instance method.module 没有new不能生成对象的例子其中 class method 所谓的模块在模块化的方法,它能够直接调用 ...

CKPlayer的列表框的demo

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

随机推荐

热门专题