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

随机推荐

算法导论学习---红黑树具体解释之插入(C语言实现)
前面我们学习二叉搜索树的时候发如今一些情况下其高度不是非常均匀,甚至有时候会退化成一条长链,所以我们引用一些"平衡"的二叉搜索树.红黑树就是一种"平衡"的二叉搜 ...
开源自由 java CMS - FreeCMS2.0 举APP产生信息数据
项目地址:http://www.freeteam.cn/ 生成信息数据生成当前管理网站下同意移动APP訪问的栏目的信息页面. 从左側管理菜单点击生成信息数据进入. 您能够选择须要生成的栏目,然后点击 ...
poj 1975 Median Weight Bead（传递闭包 Floyd）
链接:poj 1975 题意:n个珠子,给定它们之间的重量关系.按重量排序.求确定肯定不排在中间的珠子的个数分析:由于n为奇数.中间为(n+1)/2,对于某个珠子.若有至少有(n+1)/2个珠子比它 ...
SQL Server高可用——日志传送（4-2）——部署
原文:SQL Server高可用--日志传送(4-2)--部署前文再续,书接上一回.本章演示一下日志传送的具体过程准备工作: 由于时间关系,已经装好了3台虚拟机,且同在一个域里面: SQL01:主 ...
iPhone&iPad DFU及恢复模式刷机、降级教程
再次提醒,刷机需慎重处理. http://blog.csdn.net/ztp800201/article/details/11980643 iphone一共同拥有三种工作模式,各自是正常模式,恢复模式 ...
SDL2来源分析7：演出（SDL_RenderPresent()）
===================================================== SDL源代码分析系列文章上市: SDL2源码分析1:初始化(SDL_Init()) SDL2 ...
Oracle 常见函数使用汇总
INSTR用法:INSTR(string,subString,position,ocurrence)解释:string:源字符串 subString:要查找的子字符串 positi ...
poj 1456 Supermarket(并查集维护区间)
题意:有一些货物,每一个货物有价值和卖出的截至日期,每天能够卖一个货物,问能卖出的最大价值是多少. 思路:算法不难想到,按价值降序排列.对于每一件货物,从deadline那天開始考虑.假设哪天空 ...
Shell编程入门(再版)(在)
简单的演示样本Shell规划演示样例1. #!/bin/bash #This is to show what a shell script looks like echo "Our fir ...
Unity3D根据游戏的发展Terrain Toolkit地形生产
今天我们继续给我Unity3D游戏开发系列.今天我们来通过Terrain Toolkit为了使地形. 虽然Unity3D它为我们提供了一个地形渲染工具,我们发现,这个地形绘制工具并不能满足我们的 ...

CKPlayer的列表框的demo

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

随机推荐

热门专题