将ueditor上传的视频转换为flowplayer播放，并隐藏其播放地址

1、在页面引用flowplayer-min.js；

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;
}

将ueditor上传的视频转换为flowplayer播放，并隐藏其播放地址相关推荐

ueditor上传大容量视频报http请求错误的解决方法
故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报"http请求错误"的解决方法详解: 原因分析: 目前很多CMS整合了百度的ueditor编辑器 ...
一步步教你如何设置UEditor上传大视频文件
服务器环境:windows2008 iis php5.5 1.修改相对应的ueditor\PHP\config.json编辑器文件夹中的配置文件config.json在其中查找"videoM ...
Ueditor上传视频时提示“非法上传文件”
ueditor上传视频提示"非法上传文件"时,可以通过查看上传文件的扩展名.文件大小以及系统允许上传文件大小方面去查找原因
pbootcms后台编辑器上传mp4视频默认黑屏不显示如何解决
pbootcms后台编辑器上传mp4视频默认黑屏不显示如何解决首先找到编辑的配置文件js,路径:core / extend / ueditor 将ueditor.all.min.js文件下载下来, ...
PHP怎么做成Qq空间相册,qq空间如何上传本地视频相片制作视频传到QQ空间
相信很多网友都有上传QQ空间照片的喜好,我就是其中一个,拍了一张漂亮的PP,恨不得马上传到空间,炫耀一番.上传的照片日积月累,越来越多.平常要一张张的观看照片挺费时.最近学了一个新招,可以使用狸窝照片 ...
wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
wangEditor上传本地视频
wangEditor是一个轻量级web富文本编辑器,一般可以满足用户需求,但是有特殊要求的可以对其进行修改源文件是上传Html视频格式,如果想要变成上传本地视频需要做以下修改: /*上传视频*/// ...
PHP七牛云上传大视频文件异步存为m3u8格式（包括回调过程）
问题引入视频的第一帧加载缓慢. 简介 HTTP Live Streaming,缩写为HLS,是由苹果公司提出基于HTTP的流媒体网络传输协议.它的工作原理是把整个流分成一个个小的基于HTTP的文件来 ...
react-ueditor-xiumi,秀米编辑器首次加载图片上传，视频上传无法使用问题
在项目中引入秀米编辑器出现了首次加载图片上传和视频上传无法使用的问题问题情况: 正常情况: 这种情况仅存在于首次加载,控制台查看元素样式,发现编辑器每次展示和隐藏,元素的id是增加的,也就是说每次隐 ...

将ueditor上传的视频转换为flowplayer播放，并隐藏其播放地址

将ueditor上传的视频转换为flowplayer播放，并隐藏其播放地址相关推荐

最新文章

热门文章