将ueditor上传的视频转换为flowplayer播放,并隐藏其播放地址
2015-08-31 18:16
447 查看
1、在页面引用flowplayer-min.js;
2、将ueditor上传的video标签内容转换成div标签内容,替换后的内容形式如下:
3、用jquery遍历class为video-js的div,注册flowplayer播放元素;
5、接下来就是针对伪url进行处理;
在nginx下,对伪url进行重写操作,让它跳转到处理的swf-play.action中。
6、在swf-play.action中拿到ts、token、name进行解密验证,以判断该请求是否通过,如通过,读取视频流,写到结果里面,播放视频。
//验证
String hashSalt = getHashSalt();
String temp = DigestUtils.md5Hex(hashSalt + "/" + name + ts);
boolean result = temp.equals(this.token);
return result;
2、将ueditor上传的video标签内容转换成div标签内容,替换后的内容形式如下:
<div src="videoReplaceUrl" style="height:400px;" class="video-js"></video>
3、用jquery遍历class为video-js的div,注册flowplayer播放元素;
/*遍历*/ var video_index = 1; $(".video-js").each(function() { var divVideoId = "divVideo" + video_index; $(this).attr("id", divVideoId); var videoUrl = $(this).attr("src"); changeToFlowplayer(videoUrl, divVideoId); video_index++; });
/*转换成flowplayer播放*/ function changeToFlowplayer(videoUrl, divVideoId) { var ts = new Date().getTime()/1000; ts = ts.toString(16); ts = ts.split(".")[0]; var playing = false; var autoPlay = false; flowplayer( divVideoId, "/xxx/flowplayer/flowplayer-3.2.8.swf", { plugins: { secure: { url: 'flowplayer.securestreaming-3.2.3.swf', timestamp: ts, token: "xxxxx" } }, clip:{ autoPlay: autoPlay, autoBuffering: false, urlResolvers: 'secure', baseUrl: '/swf-play', onStart : function() { if(!playing && typeof(playCallBack)=='function'){ playCallBack(); playing = true; } } }, playlist: [videoUrl] } ); }4、当使用flowplayer播放上时,会生成如下形式url:
http://navy.com/swf-play/05538e221a147e28d206378e66740058/55e3ca51/1440758930760这时已经达到隐藏url的目的,其中05538e221a147e28d206378e66740058为ts、token、videoUrl通过md5加密生成。ts:55e3ca51;videoUrl:1440758930760
5、接下来就是针对伪url进行处理;
在nginx下,对伪url进行重写操作,让它跳转到处理的swf-play.action中。
rewrite ^/swf-play/([0-9a-zA-Z]+)/([0-9a-zA-Z]+)/([0-9a-zA-Z\.]+)$ /swf-play.action?ts=$2&token=$1&name=$3 last;
6、在swf-play.action中拿到ts、token、name进行解密验证,以判断该请求是否通过,如通过,读取视频流,写到结果里面,播放视频。
//验证
String hashSalt = getHashSalt();
String temp = DigestUtils.md5Hex(hashSalt + "/" + name + ts);
boolean result = temp.equals(this.token);
return result;
//返回视频流 BufferedInputStream bis = null; ServletOutputStream os = null; File f = null; f = new File(realPath); bis = new BufferedInputStream(new FileInputStream(f)); int available = bis.available(); HttpServletResponse response = getResponse(); response.setContentType("application/x-shockwave-flash"); response.addHeader("x-app", "xxx"); response.addHeader("Content-Length", f.length() + ""); response.addHeader("Cache-Control", "private"); os = response.getOutputStream(); byte[] b = new byte[1024]; int begin = 0; int readCount = 0; while (begin <= available) { readCount = bis.read(b); if (readCount <= 0) { break; } os.write(b, 0, readCount); begin += readCount; }
相关文章推荐
- web开源FlowPlayer视频播放器
- 网页播放器flowplayer
- 基于flowplayer的视频缩略图的视频预览
- Flowplayer简单酷炫的视频播放器
- ajax返回String类型导致的flowplayer报错p.replace is not a function问题
- flowplayer设置视频logo
- flowplayer的rtmp视频流速度控制
- 在页面中使用Flowplayer播放器
- 兼容各种版本浏览器网页视频播放制作路程
- 开源在线视频播放器flowplayer
- 开源在线视频播放器flowplayer
- 开源在线视频播放器flowplayer
- 基于Flowplayer打造一款免费的WEB视频播放器附源码
- Arduino板的DHT11温湿度传感器使用
- 工作3年。对于目前的工作环境不是很满意打算转战UI设计
- UIGestureRecognizer手势
- UIScrollView 滚动视图的方法总结
- 【EasyUI】Combobox的联动和onChange/onSelect事件绑定
- UIEvent - 3
- android之UEventObserver分析