习课的视频播放器 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 播放器. ...
随机推荐
- Call me evilxr
我是Evilxr,博客新开第一天:希望自己能坚持下去!之前友友推荐的是oschina,使用了一段时间发现oschina经常抽风,再者自己平时也有关注一些博客觉得cnblogs也不错,开博的初衷是想记录 ...
- 启动struts2项目出现classnotfound错误
由于工作需求.需要了解struts2项目,前几天部署了一个struts2的demo,研究url的解析过程,昨天还是好好的,今天修改了一下web.xml文件,然后启动Tomcat就报错,错误如下: 严重 ...
- QT常用资料
QTableView介绍 Qt 自定义 滚动条 样式 QTableWidget控件总结 QTableWidget的使用和美工总结 QT__stylesheet__操作 QSS QT皮肤(QSS)编程 ...
- [Thinking in Java]Nothing but Java
1 对象(Double Elephants) 1.1 抽象 万物皆对象.什么东西都可以抽象成属性和方法,达到可重用的目的. 对象之间交流靠发送消息.就是通过调用某个特定对象的方法来达到消息传递的目的. ...
- T24基础-基本命令(1)
如果你不知道什么是T24,那这篇文章对你意义不大.如果你所在银行IT刚好就准备使用或已经使用T24作为银行核心系统,那我的文章对你会很有帮助. 1. LIST 这个语句相当于SQL里的“select ...
- Linux-Rsync服务器/客户端搭建实战
一.需求 每晚汇总各机器的操作日志,同步到主服务器进行日志分析. 二.基础知识 rsync 分为服务器端.客户端,服务器端搭建比客户端辛苦一些(也是很简单). rsync 服务器是指以 deamon ...
- 如何用BarTender批量打印标签
关于使用BarTender条码打印软件打印标签,很多小伙伴最关心的问题之一,莫过于如何实现BarTender批量打印标签.为了提高日常标签打印速度,为了方便快捷,也为了减少出错率,快来跟小编学习学习吧 ...
- 如何在IDEA 中使用Git
1,下载最新的 git 包 地址: https://git-scm.com/download/win 下载便携版 64,32 根据个人爱好 2,解压后随便放个位置即可,例如图: (不太建议使用它自 ...
- KNN近邻算法
K近邻(KNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代表.kNN算法的核 ...
- javascript操控浏览器
测试环境为Chrome浏览器47.0.2526.106 m 测试窗口为F12->Console 跳转网页 // 跳转到百度 window.location.href = "https: ...