习课的视频播放器 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 播放器. ...
随机推荐
- Apache+PHP+MySQL
Apache:是一种web服务器(与IIS类同)PHP:全称为Hypertext Preprocessor.PHP是一种HTML 内嵌式的语言,是一种网站(网页)开发语言(与ASP.JSP..NET等 ...
- 1.5 linux笔记
fdisk /dev/sda 查看sda下硬盘状态 fdisk l 看LIST所有文件系统 fdisk n 创建分区 fdisk m help fdisk p 查看所有分区 fdisk w 保存分 ...
- 如何导出和导入mysql数据(数据迁移)
. 导出数据库数据 mysqldump -uroot -p dp_db > dumpout.sql 其中 root是账户名 dp_db是需要导出的数据库名称 dumpout.sql存储导出的数据 ...
- jmeter录制移动APP脚本
一.准备环境 准备好jmeter运行环境 在电脑端安装无线Wifi插件,保证手机与电脑处于同一个局域网中 如果本机JDK版本为1.6,则升级JDK版本至1.7,否则,在HTTPS Domains中无法 ...
- ILGenerator.Emit动态 MSIL编程(三)之动态代理
using System; using System.Linq; using System.Reflection; using System.Reflection.Emit; public seale ...
- TFS下的源代码控制
以下主要描述了: TFS源代码控制系统的基本场景 如何把一个项目添加到源代码管理中 如何与服务器同步 如何做Check-In 如何做分支与合并 什么是上架与下架 我们知道工作项是项目管理的基本元素,但 ...
- virtualbox 使用USB引导启动安装系统
想要测试u盘系统引导有没有问题,从u盘中启动我烧录的Android x86系统. 这种方式可以在已有空的虚拟机上直接启动U盘中的系统. 百度上能搜到的方式都是使用CMD命令(懒人表示太麻烦--),so ...
- WPF ListBox
记录一些ListBox的用法 设置ListBox选中项的背景颜色 如何为标准的ListBox添加ItemClick事件 连续选择同一项时SelectionChanged 事件不响应的问题 1.设置Li ...
- bzoj3316: JC loves Mkk
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...
- 浅谈Java中的hashcode方法
哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...