jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <c:set value="${pageContext.request.contextPath}" var="ctx"></c:set> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>听评课人员评课</title> <!-- Bootstrap --> <link href="${ctx }/css/ui/bootstrap.min.css" rel="stylesheet"> <!-- 基本样式 --> <link href="${ctx }/css/core/base.css" rel="stylesheet"> <!--通用css样式--> <link rel="stylesheet" href="${ctx }/css/layout/frame_style.css"> <link rel="stylesheet" href="${ctx }/css/com/comui_style.css"> <link rel="stylesheet" href="${ctx }/css/layout/layout_style2.css"> <link rel="stylesheet" href="${ctx }/css/layout/me.css"> <link rel="stylesheet" href="${ctx }/css/layout/me_f.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script type='text/javascript' src='${ctx }/js/core/jquery-1.11.1.min.js'></script> <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script> <script type="text/javascript" src="${ctx}/js/video/video.js"></script> </head> <body> <div class="cy_wrap"> <!--头部 START--> <h1 class="cy_header"> <div class="con_area"> <div class="fl"> <a class="fl cy_header_logo"><img src="${ctx }/images/xk-logo.png"></a> <div class="fl cy_header_search"> <input placeholder="请输入关键词" class="input_navsearch_con"> <button class="input_navsearch_btn"></button> </div> </div> <div class="fr text-right cy_header_set"> <a href="">设置</a> <a class="border_0 paddingR_not" href="">退出</a> </div> </div> </h1> <!--头部 END--> <!--视频播放-盒子 START--> <div class="cy_video_box paddingt20"> <!--当前位置 START--> <div class="current_osition marginT_not"> <span>首页</span> <span class="current_osition_arrow"></span> <a href="">评课管理</a><span class="current_osition_arrow"></span> <span>评课标准</span> </div> <!--当前位置 END--> <!--视频播放 START--> <div class="con_area positionR"> <!--放视频的盒子--> <div class="cy_video_con" id="id_video_container"></div> <!--标签-正在进行-结束--> <span class="cy_video_label"></span> <!--在线交流--> <div class="cy_video_onlinewrap"> <span class="cy_video_online_tag">在线交流</span> <dl class="cy_video_online_con"> <dt class="cy_video_online_con_l"></dt> <dd class="cy_video_online_con_r"> <p class="cy_video_online_con_r_title">《夸父逐日》</p> </dd> </dl> </div> </div> <!--视频播放 END--> </div> <!--视频播放-盒子 END--> <!--评课-盒子 START--> <div class="con_area cy_teaching_box_con"> <!--评课-视频信息 START--> <div class="cy_teaching_box_con_t"> <h2 class="f24 paddingb15">《${courseInfo.resourceName}》<span class="fr f20">浏览： 20</span></h2> <p><span class="txt_999">发布人：</span>${staff.name} <span class="txt_999">发布时间：</span><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${courseInfo.createTime}"/><span <%--class="txt_999">发布时间：</span>2015-12-19 12：12：12 <span--%> class="txt_999">授课教师：</span>${staff.name} <span class="txt_999">授课时间：</span><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${courseInfo.teachingTime}"/> <span class="txt_999">活动结束时间：</span><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${courseInfo.lastReviewTime}"/></p> <p><span class="txt_999">授课地点：</span>${courseInfo.teachingAddress} <span class="txt_999">授课科目：</span>${courseInfo.teachingProject} <span class="txt_999">所属年级：</span>${courseInfo.belongGrade} </p> </div> <!--评课-视频信息 END--> <!--评课-评分-评论-详情 START--> <div class="cy_teaching_box_con_b"> <!--评课标准设置-选项卡--> <dl class="criterion_menu_tab"> <dt class="criterion_menu_tab_list criterion_menu_pitch" onclick="javascript:gourl('evaluation_ongoing_grade');">评分 </dt> <dt class="criterion_menu_tab_list" onclick="javascript:gourl('evaluation_ongoing_comment');">评论（12） </dt> <dt class="criterion_menu_tab_list" onclick="javascript:gourl('evaluation_ongoing_details');">详情</dt> </dl> <!--评课标准设置-选项卡-内容--> <div id="content"></div> </div> <!--评课-评分-评论-详情 END--> </div> </div> <!--评课-盒子 END--> <!--footer START--> <div class="cy_footer"> <div class="cy_footer_b">©2014-2016 版权所有 广东习课软件科技有限公司所有 ICP备13006852号-1 </div> </div> <!--footer END--> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script type='text/javascript' src='${ctx }/js/core/jquery-1.11.1.min.js'></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="${ctx }/js/ui/bootstrap.min.js"></script> <!--手写的js--> <script src="${ctx }/js/com/ui_commonly.js"></script> <script src="${ctx }/js/com/ch-table.js"></script> </body> </html> <script type="text/javascript"> $(document).ready( function() { var width = $("#id_video_container").width(); var height = $("#id_video_container").height(); videoInitFileId("id_video_container", width, height, "${sessionScope.courseInfo.resoursePath}", "${ctx}"); }); $("#content").load("evaluation_ongoing_grade"); /*评课标准设置-选项卡*/ function gourl(a) { /*设置参评课角色*/ if (a == 'evaluation_ongoing_grade') { $("#content").load("evaluation_ongoing_grade"); } /*课堂教学评价标准*/ else if (a == 'evaluation_ongoing_comment') { $("#content").load("${ctx}/courseComment/list"); } /*评课评价标准*/ else if (a == 'evaluation_ongoing_details') { $("#content").load("evaluation_ongoing_details"); } else { } } </script>
js
/* 推荐使用通过文件ID来播放视频 */ /* * 使用说明 * 1.使用播放器页面需引用以下两行 * <!-- video begin --> * <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script> * <script type="text/javascript" src="${ctx}/js/video/video.js"></script> * <!-- video end --> * 2.初始化播放器，在容器中添加如下代码 * <script type="text/javascript"> * $(document).ready( * function() { * 容器需添加id值id="id_video_container" * 获取容器的宽度 * var width = $("#id_video_container").width(); * 获取容器的高度 * var height = $("#id_video_container").height(); * videoInitFileId("id_video_container", width, height, "${courseInfo.resoursePath}", "${ctx}"); * }); * </script> */ var player; /* parentId:播放器容器ID(必须有) , 播放器宽度 ， height:播放器高度 fileId:文件ID ctx:访问的项目名 */ /* * auto_play 取值 : 0不自动播放 1自动播放 file_id 播放文件ID app_id 播放文件AppID */ function videoInitFileId(parentId, width, height, fileId, ctx) { var url = ctx + "/vod/getVodUrl?fileId=" + fileId; $.ajax({ url : url, cache : false, dataType : "json", processData : false, contentType : false, type : 'POST', timeout : 100000, success : function(data) { if (data.resultCode == 0) { loadPlay(parentId, width, height, data.appId, fileId); } else { //loadPlay(parentId, width, height, "", fileId); } }, error : function() { //loadPlay(parentId, width, height, "", fileId); } }); } function loadPlay(parentId, width, height, appId, fileId) { var option = { "auto_play" : 0, "file_id" : fileId, "app_id" : appId, "width" : width, "height" : height, "stretch_patch" : true }; var event = { 'dragPlay' : function(second) { console.debug(second); } }; player = new qcVideo.Player(parentId, option, event); } /* 通过文件ID来切换视频 */ function changeFileId(appId, fileId) { player.changeVideo({ "file_id" : fileId, "app_id" : appId, "auto_play" : 1 }); } /* 暂停播放 */ function pause() { player.pause(); } /* 恢复播放 */ function resume() { player.resume(); } /* 更改视频清晰度 code 取值 1:"手机" , 2:"标清" , 3:"高清" , 4:"超清" */ function setClarity(code) { player.setClarity(code); }
java
package com.xk.ses.vod.controller; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FileUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import com.alibaba.fastjson.JSON; import com.xk.ses.vod.qcloud.Module.dto.PlaySet; import com.xk.ses.vod.qcloud.Utilities.IdGenerator; import com.xk.ses.vod.qcloud.Utilities.StringUtil; import com.xk.ses.vod.test.TencentVodApi; @RequestMapping("/vod") @Controller public class VodController { /** * 云点播视频上传 * * @param request * @param response * @return * @throws InterruptedException */ @RequestMapping(value = "/upload", method = { RequestMethod.POST }, produces = "application/json;charset=utf-8") @ResponseBody public String uploadFile(MultipartHttpServletRequest request, HttpServletResponse response) throws InterruptedException { boolean isFinish = true; String vodFileId = null; String vodFilePath = null; Map<String, MultipartFile> fileMap = request.getFileMap(); Map<String, String> resultMap = new HashMap<String, String>(); MultipartFile multipartFile = null; for (Map.Entry<String, MultipartFile> entry : fileMap.entrySet()) { multipartFile = entry.getValue(); } // 地址目录 String dir = request.getServletContext().getRealPath("/"); // 文件后缀 String ext = getFileExt(multipartFile.getOriginalFilename()); // 文件名 String fileId = IdGenerator.getInstance().generateUUIDString(); // 文件绝对路径 String fileAbs = dir + File.separatorChar + fileId + ext; File file = null; if (null != multipartFile && !multipartFile.isEmpty()) { file = new File(fileAbs); try { // 存在本地文件 FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), file); // 上传文件到腾讯云并获取FileId vodFileId = TencentVodApi.upload(file.getAbsolutePath(), fileId); if (StringUtil.isNoEmpty(vodFileId)) { isFinish = true; } file.delete(); } catch (IOException e) { e.printStackTrace(); } } if (isFinish) { resultMap.put("vodFileId", vodFileId); resultMap.put("vodFilePath", vodFilePath); resultMap.put("resultCode", "0"); resultMap.put("result", "上传成功"); } else { resultMap.put("resultCode", "1"); resultMap.put("result", "上传失败"); } return JSON.toJSONString(resultMap); } /** * 通过文件Id获取视频URL * * @param fileId * @return */ @RequestMapping(value = "/getVodUrl", method = { RequestMethod.POST }, produces = "application/json;charset=utf-8") @ResponseBody public String getVodUrlByFileId(@RequestParam String fileId) { String url = ""; Map<String, String> resultMap = new HashMap<String, String>(); List<PlaySet> list = TencentVodApi.fileInfo(fileId); if (null != list && list.size() > 0) { url = list.get(list.size() - 1).getUrl(); resultMap.put("resultCode", "0"); resultMap.put("url", url); // 获取APPID resultMap.put("appId", TencentVodApi.getKey(TencentVodApi.APPID)); } else { resultMap.put("resultCode", "-1"); resultMap.put("resultString", "视频转码中..."); } return JSON.toJSONString(resultMap); } /** * 获取后缀 * * @param fileName * @return */ private String getFileExt(String fileName) { int i = fileName.lastIndexOf("."); if (i > -1) { return fileName.substring(i); } return ""; } }