习课的视频播放器 video.js
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 ]>
<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">浏览： </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>-- ：： <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');">评论（）
</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">©- 版权所有 广东习课软件科技有限公司所有
ICP备13006852号-
</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(必须有) , width:播放器宽度 ， 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 "";
} }
习课的视频播放器 video.js的更多相关文章
- [HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
DEMO地址:https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS ...
- Web视频播放之video.js
h5这么火是有它的理由的,支持原生视频播放,但是目前兼容性还不是很好,因此使用js框架支持网站视频播放是比较不错的选择. 下载video.js,我们可以通过官网去下,但是官网在国外,我尝试了几次均下载 ...
- HTML5视频播放插件 video.js介绍
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- Vue小功能-视频播放之video.js
最近在练手一个小项目,想给首页增加一个视频介绍(如下图).涉及到了vue视频播放的功能,所以在网上了解了一下. 相关的插件是Video.js,官网讲解比较详细,我罗列出来,可以根据自己 ...
- H5打造属于自己的视频播放器（JS篇2）
回顾 算了不回顾了 直接搞起,打开JS1中写的bvd.js 播放视频 播放按钮隐藏 视频开始播放 当点击播放按钮的时候,播放按钮将会隐藏,播放视频,这个不难,在JS1中我们就已经实现.但我们改变一下思 ...
- HTML5视频播放插件Video.js使用详解
一.Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品. Moreover,YouTube,V ...
- 视频播放效果--video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- 视频播放插件Video.js
这是一个很强大的视频播放插件.
- Video.js网页视频播放插件
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...
随机推荐
- linq之将IEnumerable<T>类型的集合转换为DataTable类型 （转载）
在考虑将表格数据导出成excel的时候,网上搜的时候找到一个特别合适的公共方法,可以将query查询出来的集合转换为datatable 需引用using System.Reflection; publ ...
- Eclipse中的Link with Editor功能是如何实现
Eclipse中的Link with Editor功能是如何实现 - kaukiyou的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/kaukiyou/articl ...
- 刷题ING...
我用codeVS刷题.. 努力准备!!
- 用JS控制video暂停再播放
模块就是用来进行封装,进行高内聚 低耦合的功能.其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入.那么我们看模块是否有 ...
- IIs安装&发布&解决遇到的问题
IIS安装: IIS发布: 1.添加网站: 2.将发布的文件,copy到该网站的目录下 3. 刷新,文件显示出来,将其"转换为应用程序” => 4.在应用程序池中找到该网站相应的程序池 ...
- C#中dynamic的正确用法
C#中dynamic的正确用法 http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4 ...
- Selenium 元素定位
selenium通过driver.findElement(By selector)来定位元素,selector在selenium-java.jar中,里面的方法一共就8种,如下图: 基本定义: By. ...
- JQuery实现列表中复选框全选反选功能封装
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...
- 计算一维组合数的java实现
背景很简单,就是从给定的m个不同的元素中选出n个,输出所有的组合情况! 例如:从1到m的自然数中,选择n(n<=m)个数,有多少种选择的组合,将其输出! 本方案的代码实现逻辑是比较成熟的方案: ...
- Javascript模式（第一章简介）------读书笔记
一:模式 模式是一个通用问题的解决方案,可以提供一个更好的实践经验.有用的抽象化表示和解决一类问题的模板. 本书主要讨论如下三种类型的模式 1 设计模式:可复用面向对象软件的基础,包括singleto ...