Ueditor+ajax视频保存到本地和视频url在另一个页面播放
2017-12-20 19:33
375 查看
注意:在ueditor编辑器上传视频,显示本地保存成功,而且在自己tomcat下也能找到,如果直接把链接copy到另一个jsp,修改了jsp。
刚才上传的视频就会自动删除,然后链接也就失效了。
1、先修改jsp-->config.json下这几处位置
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoPathFormat":/ueditor/jsp/upload/video
"filePathFormat": "/ueditor/jsp/upload/file
这三个是默认的上传路径,在自己的项目根目录下(即E:\apache-tomcat-8.0.30\webapps\Web_9_5_0项目名下)新建ueditor/jsp/upload/image /ueditor/jsp/upload/video /ueditor/jsp/upload/file这几个文件夹,直接运行下载下来的ueditor插件显示本地保存成功了就可以去根目录查看了。
2、关于项目根目录,eclipse默认的是在wordspace下的.metadata.......,把这个改到tomcat就可以直接在webapps下看到部署的项目了。这个具体在这个写有。
http://blog.csdn.net/qq_36688143/article/details/78851206
3、在ueditor编辑器上传的内容保存到了本地后,保存url到另一个jsp播放视频,这里是index.jsp -->UeditorController.java---> videoShow.jsp
///////////////////////////
index.jsp中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="utf8-jsp/jquery-2.0.3.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
<!-- 语言包文件(建议手动加载语言包,避免在ie下,因为加载语言失败导致编辑器加载失败) -->
<script type="text/javascript" src="utf8-jsp//lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- index.jsp中先定义全局变量保存url -->
<script type="text/javascript">
var url2 = "http://localhost:8080/Web_9_5_0";
</script>
<!-- ueditor编辑器放的位置 -->
<div>
<script id="container" name="content" type="text/plain"></script>
</div>
<!-- 页面跳转的按钮 -->
<div>
<button onclick="insertVideo()">提交</button>
</div>
<!-- 实例化ueditor,和获得视频Url -->
<script type="text/javascript">
//在 b.execCommand("inserthtml",g.join(""),!0);
//添加 b.fireEvent('afterUpVideo',k);
var ue = UE.getEditor('container');
ue.addListener('afterUpVideo', function(t, arg) { //侦听视频上传
//获得视频Url
url2 = url2+arg[0].url;
})
</script>
<!-- insertVideo() 页面跳转响应提交到UeditorController.java -->
<script type="text/javascript">
function insertVideo() {
$.ajax({
url : "saveVideo",
data : {
mydata : url2
},
type : "post",
success : function(msg) {
//alert("msg:" + msg.map.url);
window.location.href="videoShow.jsp?";
},
error : function() {
alert("wrong");
}
});
}
</script>
</body>
</html>
////////////UeditorController.java中
//////////////////////////videoShow.jsp中
<a href="${videoUrl }"
title="走进 JavaWeb 的世界" class="inner"> <span>第一节</span> <em class="tag"> </em> <i class="learn-state"></i>
</a>
效果图如下:
点击提交按钮
超链接设置在了“第一节这里”
刚才上传的视频就会自动删除,然后链接也就失效了。
1、先修改jsp-->config.json下这几处位置
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoPathFormat":/ueditor/jsp/upload/video
"filePathFormat": "/ueditor/jsp/upload/file
这三个是默认的上传路径,在自己的项目根目录下(即E:\apache-tomcat-8.0.30\webapps\Web_9_5_0项目名下)新建ueditor/jsp/upload/image /ueditor/jsp/upload/video /ueditor/jsp/upload/file这几个文件夹,直接运行下载下来的ueditor插件显示本地保存成功了就可以去根目录查看了。
2、关于项目根目录,eclipse默认的是在wordspace下的.metadata.......,把这个改到tomcat就可以直接在webapps下看到部署的项目了。这个具体在这个写有。
http://blog.csdn.net/qq_36688143/article/details/78851206
3、在ueditor编辑器上传的内容保存到了本地后,保存url到另一个jsp播放视频,这里是index.jsp -->UeditorController.java---> videoShow.jsp
///////////////////////////
index.jsp中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="utf8-jsp/jquery-2.0.3.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
<!-- 语言包文件(建议手动加载语言包,避免在ie下,因为加载语言失败导致编辑器加载失败) -->
<script type="text/javascript" src="utf8-jsp//lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- index.jsp中先定义全局变量保存url -->
<script type="text/javascript">
var url2 = "http://localhost:8080/Web_9_5_0";
</script>
<!-- ueditor编辑器放的位置 -->
<div>
<script id="container" name="content" type="text/plain"></script>
</div>
<!-- 页面跳转的按钮 -->
<div>
<button onclick="insertVideo()">提交</button>
</div>
<!-- 实例化ueditor,和获得视频Url -->
<script type="text/javascript">
//在 b.execCommand("inserthtml",g.join(""),!0);
//添加 b.fireEvent('afterUpVideo',k);
var ue = UE.getEditor('container');
ue.addListener('afterUpVideo', function(t, arg) { //侦听视频上传
//获得视频Url
url2 = url2+arg[0].url;
})
</script>
<!-- insertVideo() 页面跳转响应提交到UeditorController.java -->
<script type="text/javascript">
function insertVideo() {
$.ajax({
url : "saveVideo",
data : {
mydata : url2
},
type : "post",
success : function(msg) {
//alert("msg:" + msg.map.url);
window.location.href="videoShow.jsp?";
},
error : function() {
alert("wrong");
}
});
}
</script>
</body>
</html>
////////////UeditorController.java中
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.context.request.RequestContextHolder; import org.springframework.web.context.request.ServletRequestAttributes; import com.fxy.bean.Msg; //注解说明这个是控制层 @Controller public class UeditorController { /** * @Title: saveVideo * @Description:把传入的视频url存到session,然后在videoShow.jsp${获得} * @return * @throws * @author: fxy * @date: 2017年12月21日 */ @ResponseBody @RequestMapping("saveVideo") public Msg saveVideo(){ HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder. getRequestAttributes()).getRequest(); String url = request.getParameter("mydata"); //获得ajax传过来的url System.out.println("mydata:"+url); //使用request对象的getSession()获取session,如果session不存在则创建一个 HttpSession session = request.getSession(); //将数据存储到session中 session.setAttribute("videoUrl", url); //目前Msg返回类冗余,在接下来的开发完善才会使用到 return Msg.success().add("url", url); } }
//////////////////////////videoShow.jsp中
<a href="${videoUrl }"
title="走进 JavaWeb 的世界" class="inner"> <span>第一节</span> <em class="tag"> </em> <i class="learn-state"></i>
</a>
效果图如下:
点击提交按钮
超链接设置在了“第一节这里”
相关文章推荐
- Android解决WebView的定位功能、视频全屏播放、下载功能、页面Url的处理、进度条处理
- 《IOS视频录制,本地视频播放,剪切,合并》系列(2)视频录制并保存
- 改造:Ueditor编辑器插入外链视频支持手机播放和上传本地音乐
- Android中WebView的定位功能、视频全屏播放、下载功能、页面Url的处理、进度条处理
- Android ExoPlayer实现网络URL、本地视频播放
- ios app视频启动引导页面。可播放本地mp4
- 从数据库读取二进制流视频保存到本地并播放
- Android 利用发送Intent播放本地视频和网络视频(浏览器打开这个URL)
- 齐博门户网站:解决百度ueditor支持iframe框架页面的视频播放问题
- 完成Ueditor的上传视频功能及ajax+SSM+获取url
- [转载][重要]使用Vitamio打造自己的Android万能播放器(10)—— 本地播放 (缩略图、视频信息、视频扫描服务)
- html页面上加载视频播放功能
- 用JQuery 实现 COOKIE 的本地保存 -页面切换皮肤 保存记录
- 安卓视频播放API--VideoView如何加载项目视频资源,如何全屏播放,如何作为欢迎页面的背景显示?
- Div里面载入另一个页面的实现(取代框架)(AJax)
- 爬取多页视频并保存本地
- 关于YUV视频的读取、播放,保存帧图片、以及处理的图像保存为YUV视频。
- 下载mp4视频到本地,并播放
- Ueditor 百度编辑器本地保存
- node.js 请求页面保存在本地