-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvideoCourse.jsp
457 lines (406 loc) · 14.7 KB
/
videoCourse.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<title>中国企业在线-视频播放</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="css/base2.css" rel="stylesheet">
<link href="css/baseUI.css" rel="stylesheet">
<link href="css/play2.css" rel="stylesheet">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body id="play2">
<jsp:include page="head.jsp" flush="true" />
<!-- main -->
<div id="main" class="wrapper">
<!-- 视频播放模块 -->
<div class="mod-play">
<h2 class="title"><s:property value="courseDetail.couname"/></h2>
<!-- 播放区域 -->
<div class="p_area fl">
<s:if test="%{courseDetail.couvideourl==1}">
<div id="noPermission">
<p>对不起，该视频需要登录之后才能观看。<a id="J_login-now" href="#">马上登录</a></p>
<p>没有帐号？<a href="reg.jsp">马上注册</a></p>
</div>
</s:if>
<s:else>
<embed src="<s:property value="courseDetail.couvideourl"/>" quality="high" width="600" height="490" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>
<!--<script
src="http://union.bokecc.com/player?vid=1A029C9B04B74E9B9C33DC5901307461&siteid=96BC359D1BE46EA9&autoStart=true&width=600&height=490&playerid=BF73B0FF969BF52C&playertype=1"
type="text/javascript"></script>-->
</s:else>
</div>
<!-- 选集模块 -->
<div class="p_series fr">
<div class="pd">
<h3>选集</h3>
<ul class="series-list">
<s:iterator value="seriesCouList" status="status">
<s:if test="%{courseDetail.cousequence==cousequence}">
<li class="series-item curr"><a href="course!showCouDetail?couid=<s:property value="couid"/>"><s:property value="cousequence"/> </a></li>
</s:if>
<s:else>
<li class="series-item"><a href="course!showCouDetail?couid=<s:property value="couid"/>"><s:property value="cousequence"/> </a></li>
</s:else>
</s:iterator>
</ul>
</div>
</div>
</div>
<!-- end 视频播放模块 -->
<!-- 标签页区域 -->
<div class="tab fl">
<ul class="tab-nav">
<li class="curr"><a href="#">课程简介</a><i class="triangle"></i></li>
</ul>
<div class="tab-content">
<!-- 课程简介 -->
<div class="course-intro">
<div class="teacher-intro cf">
<div class="fl">
<img src="whimg/play2/ph-play2.jpg">
</div>
<ul class="fr">
<!-- <li>李某某</li>
<li>中国菁英联盟<span>首席顾问</span></li>
<li>中国MBA联盟<span>主 席</span></li>
<li>北京市东城区中小企业服务中心<span>特聘顾问</span></li> -->
<li><s:property value="teacherIntro.tname"/></li>
<s:property value="teacherIntro.tintro"/>
</ul>
</div>
<dl>
<dt>课程简介</dt>
<dd>
<s:property value="courseDetail.couprofile"/>
</dd>
</dl>
<!-- <dl>
<dt>课程大纲</dt>
<dd>
<p>1.什么是意愿</p>
<p>引用“空中跳板”的实例，介绍什么是意愿</p>
<p>2.意愿=欲望</p>
<p>授人以鱼不如授人以渔，授人以渔不如授人以欲。</p>
<p>有了欲望、意愿，人们可以主动寻求解决方案，自己做鱼杆，找鱼下勾。没有意愿，即便有金鱼杆，他不去钓鱼，也是枉然。</p>
</dd>
</dl> -->
</div>
</div>
</div>
<!-- end 标签页区域 -->
<!-- 热门推荐 -->
<div class="recommend fr">
<h2>热门推荐</h2>
<ul class="recommend-list">
<li class="recommend-item">
<a href="#">
<span class="hd"><img src="whimg/play2/recommend-1.jpg"></span>
<span class="course-name">简易化经营12招</span>
<span class="teacher">讲师：<em>严世华</em></span>
<span class="start"><i class="icon-start"></i>开始学习</span>
</a>
</li>
<li class="recommend-item">
<a href="#">
<span class="hd"><img src="whimg/play2/recommend-2.jpg"></span>
<span class="course-name">信任管理</span>
<span class="teacher">讲师：<em>赵喜刚</em></span>
<span class="start"><i class="icon-start"></i>开始学习</span>
</a>
</li>
<li class="recommend-item">
<a href="#">
<span class="hd"><img src="whimg/play2/recommend-3.jpg"></span>
<span class="course-name">总裁倍增绩效</span>
<span class="teacher">讲师：<em>张文</em></span>
<span class="start"><i class="icon-start"></i>开始学习</span>
</a>
</li>
<li class="recommend-item">
<a href="#">
<span class="hd"><img src="whimg/play2/recommend-4.jpg"></span>
<span class="course-name">总裁管控六法则</span>
<span class="teacher">讲师：<em>红智博</em></span>
<span class="start"><i class="icon-start"></i>开始学习</span>
</a>
</li>
</ul>
</div>
<!-- end 热门推荐 -->
<!-- 评论区 -->
<div class="comment">
<form class="cf">
<textarea id="comment" name="comment" ></textarea>
<div id="J_action-con" class="fr">
<input id="comment-submit" class="btn-pill btn-pill-yellow fr" type="button" value="发表评论">
</div>
</form>
<div class="all-comment">
<h2>全部评论</h2>
<ul class="comment-list">
<s:iterator value="commmentList" status="status">
<li class="comment-item">
<div class="hd"><img src="whimg/play2/comment-avatar.jpg"></div>
<div class="bd">
<p class="info">
<span class="user-name"><s:property value="username" /></span>
<span class="date"><s:date name="comtime" format="yyyy-MM-dd HH:mm"/></span>
</p>
<p class="cnt"><s:property value="comment"/> </p>
<p class="bottom">
<a class="J_reply" href="#">回复</a>
<span>|</span>
<a class="J_like" href="javascript:;" data-commentid="<s:property value="id" />">赞同</a>
<span class="count-like-con">(<em class="count-like"><s:property value="praise"/></em>)</span>
</p>
</div>
</li>
</s:iterator>
</ul>
</div>
<!-- page-nav -->
<div class="page-nav cf">
<div class="page-num">
<!-- previous page -->
<s:if test="%{totalPage<=1}">
</s:if>
<s:else>
<a data-page="1" href="#">首页</a>
<s:if test="page==1">
<a href="#">上一页</a>
</s:if>
<s:else>
<a data-page="<s:property value="page-1"/>" href="#" >上一页</a>
</s:else>
</s:else>
<!-- end previous page -->
<!-- test1 -->
<s:if test="%{totalPage<=5}">
<s:if test="%{totalPage<=1}">
<s:if test="%{totalPage==0}">
<p class="nothing">沙发空缺中，还不快抢！</p>
</s:if>
</s:if>
<s:else>
<s:iterator begin="1" end="totalPage" var="p">
<s:if test="#p==page">
<a data-page="<s:property />" href="#" class="curr"><s:property/></a>
</s:if>
<s:else>
<a data-page="<s:property />" href="#"><s:property/></a>
</s:else>
</s:iterator>
</s:else>
</s:if>
<!-- end test1 -->
<!-- test2 -->
<s:else>
<s:if test="%{page<=3}">
<s:iterator begin="1" end="5" var="p">
<s:if test="#p==page">
<a data-page="<s:property />" href="#" class="curr"><s:property/></a>
</s:if>
<s:else>
<a data-page="<s:property />" href="#"><s:property/></a>
</s:else>
</s:iterator>
</s:if>
<s:else>
<s:if test="%{page>=(totalPage-3)}">
<s:iterator begin="totalPage-4" end="totalPage" var="p">
<s:if test="#p==page">
<a data-page="<s:property />" href="#" class="curr"><s:property/></a>
</s:if>
<s:else>
<a data-page="<s:property />" href="#"><s:property/></a>
</s:else>
</s:iterator>
</s:if>
<s:else>
<s:iterator begin="page-2" end="page+2" var="p">
<s:if test="#p==page">
<a data-page="<s:property />" href="#" class="curr"><s:property/></a>
</s:if>
<s:else>
<a data-page="<s:property />" href="#"><s:property/></a>
</s:else>
</s:iterator>
</s:else>
</s:else>
</s:else>
<!-- end test2 -->
<!-- next page -->
<s:if test="%{totalPage<=1}">
</s:if>
<s:else>
<s:if test="page==totalPage">
<a href="#">下一页</a>
</s:if>
<s:else>
<a class="next" data-page="<s:property value="page+1"/>" href="comment!getCommentByPage?seriesnumber=<s:property value="courseDetail.seriesnumber"/>&courseid=<s:property value="courseDetail.couid"/>&page=<s:property value="page+1"/>">下一页</a>
</s:else>
<a data-page="<s:property value="totalPage"/>" href="#">末页</a>
</s:else>
<!-- end next page -->
</div>
</div>
<!-- end page-nav -->
</div>
<!-- end 评论区 -->
</div>
<!-- end main -->
<div class="clear-both"></div>
<jsp:include page="footer.jsp" flush="true" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/scirpt>')</script>
<script src="js/vendor/baseUI.js"></script>
<script src="js/base.js"></script>
<!-- <script src="js/play2.js"></script> -->
<script>
$(function(){
// 将播放器的width改为675px
$('embed').attr('width', 675);
// 点击马上登录弹出登录模态框
$('#J_login-now').click(function() {
yu.popLogin();
return false;
});
// 评论
$('#comment-submit').click(function(e){
e.preventDefault();
$(this).attr('disabled', true).addClass('btn-pill-disabled').val('提交中...');
var _this = this;
var seriesnumber = '${courseDetail.seriesnumber}';
var courseid = '${courseDetail.couid}';
var comment = $('#comment').val();
if(comment == '') {
yu.popFadeoutLayer(-1, '评论内容不能为空', $('#J_action-con'), function() {
$(_this).attr('disabled', false).removeClass('btn-pill-disabled').val('发表评论');
});
return;
}
$.post('comment!addComment',{'seriesnumber':seriesnumber,'courseid':courseid,'comment':comment},function(data){
// data.ret = 1为评论成功
// data.ret = -1为还没登录
if(data.ret == 1){
//alert(data.username+'评论成功');
var html = [
'<li class="comment-item">',
'<div class="hd"><img src="whimg/play2/comment-avatar.jpg"></div>',
'<div class="bd">',
'<p class="info">',
'<span class="user-name">',data.username,'</span>',
'<span class="date">刚刚</span>',
'</p>',
'<p class="cnt">',comment,'</p>',
'</div>',
'</li>'
].join('');
$('.comment-list').prepend(html);
$('#comment').val('');
$(_this).attr('disabled', false).removeClass('btn-pill-disabled').val('发表评论');
$('.page-nav .nothing').hide();
}else if(data.ret == -1){
yu.popLogin();
$(_this).attr('disabled', false).removeClass('btn-pill-disabled').val('发表评论');
}else {
alert('网络错误，请重新提交');
}
});
});
// 回复
$('.J_reply').click(function(e) {
e.preventDefault();
var userName = $(this).parents('.comment-item').find('.user-name').text();
$('#comment').focus().val('回复' + userName + ':');
});
//点赞
$('.J_like').click(function(e) {
var _this = this;
var commentid = $(this).data('commentid');
$.post('comment!addPraise',{'commentid':commentid},function(data){
/**
* data=1为评论成功
* data=-1为用户还没登录
*/
if(data == 1){
var $countLike = $(_this).parent().find('.count-like');
var likeSum = parseInt($countLike.text());
likeSum++;
yu.popFadeoutLayer(1, '+1', $(_this).parents('.comment-item'), function() {
$countLike.text(likeSum);
$(_this).off('click');
});
}else if(data == -1) {
yu.popLogin();
}else{
alert('网络错误，请重新提交');
}
});
});
// 分页
$('.page-nav').on('click', 'a', function(e) {
e.preventDefault();
var seriesnumber = '${courseDetail.seriesnumber}';
var courseid = '${courseDetail.couid}';
var page = $(this).data('page');
$(this).addClass('curr')
.siblings().removeClass('curr');
$.post('comment!getCommentByPage',{'seriesnumber':seriesnumber,'courseid':courseid,'page':page}, function(data) {
$('.comment-list').fadeOut(700, function() {
$(this).html(data).show();
$("html,body").animate({scrollTop: $(".all-comment").offset().top - 55}, 800);
});
});
});
//标签页效果
// $('.tab-nav li').mouseenter(function() {
// var index = $(this).index();
// $(this).addClass('curr')
// .siblings().removeClass('curr');
// $('.tab-pane').eq(index).show()
// .siblings().hide();
// }).first().mouseenter();
});
/**
* cc player API
*/
function customFullScreen(){
//TODO 自定义全屏
}
function onPlayPaused(){
// 已暂停播放
}
function onPlayStop(){
var episodeSum = $('.series-item').length;
var currEpisode = $('.series-list .curr').index() + 1;
var nextHref = $('.series-list .curr').next().find('a').attr('href');
if(currEpisode < episodeSum) {
location.href = nextHref;
}
}
function on_cc_player_init( vid, objectID ){
var config = {};
//config.fullscreen_enable = 1; //启用自定义全屏
//config.fullscreen_function = "customFullScreen"; //设置自定义全屏函数的名称
config.on_player_pause = "onPlayPaused"; //设置当暂停播放时的回调函数的名称
config.on_player_stop="onPlayStop";//播放结束后回调函数的名称
var player = getSWF( objectID );
player.setConfig( config );
}
function getSWF( swfID ) {
if( navigator.appName.indexOf( "Microsoft" ) != -1 ){
return window[ swfID ];
} else {
return document[ swfID ];
}
}
</script>
</body>
</html>