Commit cd46ae4d authored by Han Ruisong's avatar Han Ruisong
Browse files

发布1.0.0

发布h5上传demo。
parent eac93a98
File added
<?xml version="1.0" encoding="UTF-8"?>
<classpath>
<classpathentry kind="src" path="src"/>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/jdk1.6">
<attributes>
<attribute name="owner.project.facets" value="java"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.jst.server.core.container/org.eclipse.jst.server.tomcat.runtimeTarget/Apache Tomcat v6.0">
<attributes>
<attribute name="owner.project.facets" value="jst.web"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.web.container"/>
<classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.module.container"/>
<classpathentry kind="output" path="build/classes"/>
</classpath>
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>h5upload</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.jdt.core.javabuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.wst.common.project.facet.core.builder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.wst.validation.validationbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.jem.workbench.JavaEMFNature</nature>
<nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
<nature>org.eclipse.jdt.core.javanature</nature>
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
</natures>
</projectDescription>
<?xml version="1.0" encoding="UTF-8"?>
<classpath>
<classpathentry kind="src" path="WebContent"/>
<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.WebProject">
<attributes>
<attribute name="hide" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.baseBrowserLibrary"/>
<classpathentry kind="output" path=""/>
</classpath>
eclipse.preferences.version=1
org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled
org.eclipse.jdt.core.compiler.codegen.methodParameters=do not generate
org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.6
org.eclipse.jdt.core.compiler.codegen.unusedLocal=preserve
org.eclipse.jdt.core.compiler.compliance=1.6
org.eclipse.jdt.core.compiler.debug.lineNumber=generate
org.eclipse.jdt.core.compiler.debug.localVariable=generate
org.eclipse.jdt.core.compiler.debug.sourceFile=generate
org.eclipse.jdt.core.compiler.problem.assertIdentifier=error
org.eclipse.jdt.core.compiler.problem.enumIdentifier=error
org.eclipse.jdt.core.compiler.source=1.6
<?xml version="1.0" encoding="UTF-8"?>
<project-modules id="moduleCoreId" project-version="1.5.0">
<wb-module deploy-name="h5upload">
<wb-resource deploy-path="/" source-path="/WebContent" tag="defaultRootSource"/>
<wb-resource deploy-path="/WEB-INF/classes" source-path="/src"/>
<property name="context-root" value="h5upload"/>
<property name="java-output-path" value="/h5upload/build/classes"/>
</wb-module>
</project-modules>
<?xml version="1.0" encoding="UTF-8"?>
<faceted-project>
<runtime name="Apache Tomcat v6.0"/>
<fixed facet="java"/>
<fixed facet="wst.jsdt.web"/>
<fixed facet="jst.web"/>
<installed facet="java" version="1.6"/>
<installed facet="jst.web" version="2.5"/>
<installed facet="wst.jsdt.web" version="1.0"/>
</faceted-project>
org.eclipse.wst.jsdt.launching.baseBrowserLibrary
\ No newline at end of file
Window
\ No newline at end of file
# VOD_H5_UploadDemo
CC视频云点播平台Html5上传Demo
## 一、集成方式
### 1、前端页面集成
参照demo中提供的示例,引用相关的css和js;其中cch5upload.js是我们实现的一个简单的基于jquery的H5文件分块上传插件,只供集成到CC点播业务使用,封装了上传的主要功能,index.js是示例对cch5upload.js的配置使用,用户可根据具体情况将index.js中的代码复制到用户的代码中使用和修改;配置后上传插件会对文件输入组件进行onchange事件监听;上传文件时会生成页面记录显示,可参照index.html代码;记录是按页面中的模板生成的,用户可根据需要增减相关列,会将记录填充到filesContainer下,filesContainer可查看index.js中的配置说明。记录的html代码中指定的class名称和id尽量不要做修改,因为上传插件中有根据classs和id来查找记录的情况,如需修改样式可以新增class;需要配置createuploadinfo回调方法用于生成视频信息,文件上传到cc视频服务器的接口信息由创建视频信息接口返回,对上传文件接口的调用封装在cch5upload.js中,集成时用户不需要修改。
### 2、服务端代码集成
上传文件需要用户服务端提供一个接口,此接口再调用CC视频spark系统的创建视频信息接口生成视频信息。出于安全考虑,生成视频信息的接口只能由用户后端代码发起对CC视频spark系统接口的调用。在demo中用户提供的创建视频信息接口路径为/video/createuploadinfo,通过java实现,用户可参考demo进行后端代码集成和修改,也可根据逻辑使用其它后端代码实现接口。运行demo请先修改Config.java中**USER_ID****USER_KEY**的配置。
### 3、cch5upload.js上传插件使用配置说明:
#### 配置基本属性:
* timeout : 可选配置,设置上传请求超时时间默认为60000(一分钟)
* maxChunkSize : 可选配置,文件上传时分块大小,默认为1024×1024(1M),最大不超过4M
* limitConcurrentUploads : 可选配置,并发上传文件数,默认为3个并发
* createInfoRetries: 可选配置,调用用户创建视频信息接口重试次数,默认为5次
* maxRetries : 可选配置,文件上传失败重试次数,默认10次
* retryTimeout : 可选配置,重试延迟时间,默认为500(毫秒)
* autoUpload : 可选配置,是否添加文件后自动上传,默认为true
* fileInput : 必选配置,文件输入组件input,必需要有的配置,默认为null
* filesContainer : 可选配置,上传文件记录显示的容器,默认为$('.files')
#### 配置回调方法:
* createuploadinfo: 必选配置,上传插件调用此方法创建视频信息,此方法需要请求用户后台接口,再在后台接口请求CC视频spark接口;
* errorMsgHandler: 可选配置,显示错误提示方法回调,默认为alert;
* getCategoryName: 可选配置,获取分类名方法,用于记录显示分类,当有分类且需要记录中显示分类时配置些方法,返回分类名称;
* uploadFail: 可选配置,文件上传失败回调,若设置重试次数大于0, 在重试后仍然失败时回调,不需要返回值;
* uploadSuccess:可选配置,文件上传成功回调,不需要返回值;
## 二、js依赖版本
* 请使用jquery1.6以上的版本;
* tmp 请使用2.5.4以上的版本;
## 三、浏览器支持情况
* Google Chrome
* Apple Safari 4.0+
* Mozilla Firefox 4.0+
* Opera 12.0+
* IE 10+
Manifest-Version: 1.0
Class-Path:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<!-- 生成视频信息接口 -->
<servlet>
<servlet-name>createVideoUploadInfo</servlet-name>
<servlet-class>com.dreamwin.h5demo.servlet.VideoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>createVideoUploadInfo</servlet-name>
<url-pattern>/video/createuploadinfo</url-pattern>
</servlet-mapping>
<!-- 获取分类接口 -->
<servlet>
<servlet-name>categoryInfo</servlet-name>
<servlet-class>com.dreamwin.h5demo.servlet.CategoryServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>categoryInfo</servlet-name>
<url-pattern>/category/info</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
\ No newline at end of file
This diff is collapsed.
.category_layer_container{border:1px solid #ccc;padding:6px;border-radius:5px; display: inline-block;display: none;position: absolute;left:2px;top:36px;background-color: #ffffff;z-index:100;}
.all_category_box{border:1px solid #ccc;margin-top:10px;overflow:auto;font-size:12px;}
.all_category_box .item {line-height:30px;border-bottom:1px solid #ccc;padding-left:10px;padding-right:10px;}
.all_category_box .item:hover{background-color: #eeeeee;color:#000000;}
.all_category_box .item i {
position: absolute;
left:4px;
top:6px;
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../../img/glyphicons-halflings.png");
background-repeat: no-repeat;
}
.all_category_box .item .icon-plus {background-position: -408px -96px;}
.all_category_box .item .icon-minus{background-position: -433px -96px;}
.all_category_box .item a{cursor: pointer;}
.all_category_box .item .category_name {padding-left:20px;display: inline-block;position: relative;word-break:keep-all;max-width:600px;}
.category_layer_container .sel_category_title{line-height: 30px;font-size:14px;margin-top:-6px;border-bottom:1px solid #ccc;}
.category_box{display:none;}
.all_category_box .selected{background-color:#0088cc;color:#ffffff;}
.all_category_box .selected .icon-plus{background:url("/img/plus_white.png");}
.all_category_box .selected .icon-minus{background:url("/img/minus_white.png");}
.all_category_box .selected:hover{background-color:#0088cc;color:#ffffff;}
.all_category_box .clean_pd {padding:0}
.category_layer_container .btn.disabled {cursor: not-allowed}
.li_tit{height:36px; line-height:38px; padding-left:15px; background:#F1F1F1; color:#666; font-weight:bold; border:1px solid #E5E5E5; border-bottom:none;}
.cc-layer-mask {position: fixed;background:rgba(0,0,0,0.7);width:100%;height:100%;z-index:9999;top:0;left:0;overflow: hidden;}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
.cc-layer-mask{
background-color:#000;
filter:Alpha(opacity=70);
*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
}
.cc-layer {position: fixed;z-index: 10000;width:900px;height:610px;background-color: #f4f4f4;left: 50%;top: 50%;margin-top:-305px;margin-left:-450px;border-radius:3px; overflow: hidden;display: none;}
.cc-layer .layer-header {height:34px;position: relative;line-height: 34px;color:#000; border: 1px solid #ddd;border-bottom:0;overflow: hidden;}
.cc-layer .layer-header span {display: inline-block;float: left;font-size:14px;}
.cc-layer .layer-header em {margin:0px 4px;}
.cc-layer .layer-header .close-box {position: absolute;top:0px;right:10px;font-size:14px;}
.cc-layer .layer-header .close-box span {cursor: pointer;}
.cc-layer .layer-body-wrap {background-color: #f4f4f4;border:1px solid #ddd;padding:0 10px 10px 10px;border-bottom:0;}
.cc-layer .layer-body {height: 100%; background-color: #fff; overflow: hidden;}
.cc-layer .layer-footer{width: 100%;}
.cc-layer .drag {border: 1px solid #ccc;}
.cc-layer .close-btn {font-size:18px;margin-left:10px;cursor: pointer;}
.cc-layer .close-btn:HOVER {font-size:22px;}
.cc-layer a {cursor: pointer;text-decoration: none; }
.cc-layer .gradient{
background:#E6E6E6; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, #F2F2F2, #E6E6E6);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#E6E6E6));
background:-o-linear-gradient(top, #F2F2F2, #E6E6E6);
}
\ No newline at end of file
@charset "UTF-8";
body {
padding-top: 60px;
}
.fileinput-button {
position: relative;
overflow: hidden;
display: inline-block;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px !important;
direction: ltr;
cursor: pointer;
}
/* Fixes for IE < 8 */
@media screen\9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}
}
.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
margin-bottom: 5px;
}
.progress-animated .progress-bar,
.progress-animated .bar {
background: url("../img/progressbar.gif") !important;
filter: none;
}
.fileupload-process {
float: right;
display: none;
}
.fileupload-processing .fileupload-process,
.files .processing .preview {
display: block;
width: 32px;
height: 32px;
background: url("../img/loading.gif") center no-repeat;
background-size: contain;
}
.files audio,
.files video {
max-width: 300px;
}
@media (max-width: 767px) {
.fileupload-buttonbar .toggle,
.files .toggle,
.files .btn span {
display: none;
}
.files .name {
width: 80px;
word-wrap: break-word;
}
.files audio,
.files video {
max-width: 80px;
}
.files img,
.files canvas {
max-width: 100%;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment