视频附件在线预览

常见问题：目前附件上传只支持文档或者图片在线预览，视频或者音频类文件只能直接下载，如果对视频有要求的用户，可以考虑定制功能。我这边用平台搭建的方式来简单实现一个视频附件预览的功能，Demo性能或兼容问题未测试。

第一步：创建两张表单，一张为上传视频的表单，另一种表单为视频播放表单。



第二步：添加附件，设置自定义格式为"mp4"，设置最多上传一个文件，建议文件大小在100M左右，如果需要兼容其他的视频格式，可以考虑使用FFmpeg来转格式，统一转换到MP4格式。



第三步：获取上传的视频名称

1. //获取上传的视频名称
   
2. (function(){
   
3. var name="";
   
4. var doc=getCurrentDocument();
   
5. var jsonText = doc.getItemValueAsString("视频文件上传"); //附件上传控件名称
   
6. if(jsonText!=""){
   
7.         println("文件json格式"+jsonText);
   
8.                 var jsonArray = new Packages.org.json.JSONArray(jsonText);  
   
9.                 for(var ii=0;ii<jsonArray.length();ii++){      
   
10.                         var jsonObject = jsonArray.getJSONObject(ii);            
    
11.                         name+= jsonObject.getString("name");      
    
12.                 }   
    
13. }
    
14.    
    
15. return name;
    
16. })();

复制代码

第四步：获取上传的视频链接

1. //获取上传的视频链接
   
2. (function(){
   
3. var path="";
   
4. var doc=getCurrentDocument();
   
5. var jsonText = doc.getItemValueAsString("视频文件上传");
   
6. if(jsonText!=""){
   
7.         println("文件json格式"+jsonText);
   
8.                 var jsonArray = new Packages.org.json.JSONArray(jsonText);  
   
9.                 for(var ii=0;ii<jsonArray.length();ii++){      
   
10.                         var jsonObject = jsonArray.getJSONObject(ii);            
    
11.                         path+= jsonObject.getString("path");
    
12.                         var request = $WEB.getParamsTable().getHttpRequest();
    
13.                         println("request==="+request);
    
14.                         var url="http://" + request.getServerName()+":" + request.getServerPort() + request.getContextPath();
    
15.                         path=url+path;
    
16.                         println("pathsss-------->"+path);
    
17.                 }   
    
18. }
    
19. return path;
    
20. })();

复制代码

第五步：获取上传的视频大小

1. //获取上传的视频大小
   
2. (function(){
   
3. var doc=getCurrentDocument();
   
4. var name=doc.getItemValueAsString("视频文件名称");
   
5. println("name-------->"+name);
   
6. if(name!=""){
   
7.         var sql="SELECT  '"+getDomainid()+"' as DOMAINID, filesize as item_size FROM t_upload WHERE NAME='"+name+"'";
   
8.         println("sql-------->"+sql);
   
9.         var query =queryBySQL(sql);
   
10.         var rtn="";
    
11.         if(query!=null){
    
12.         var iter  =query.iterator();
    
13.                 if(iter != null && iter.hasNext()){
    
14.                                         doc = iter.next();
    
15.                     rtn = round(doc.getItemValueAsDouble("size")/1024,1);
    
16.                         println("rtn---->"+rtn);
    
17.                         if(rtn>="1024"){
    
18.                             rtn=round((rtn/1024),1)+"M";
    
19.                         }else{
    
20.                             rtn=round(rtn,0)+"K";
    
21.                         }
    
22.         }
    
23.     }
    
24. }
    
25. return rtn;
    
26. })();

复制代码

第六步：//获取对应的参数然后通过弹出层来播放视频并将参数传到弹出层。

1. //获取对应的参数然后通过弹出层来播放视频并将参数传到弹出层。
   
2. (function(){
   
3. var name=encodeURI(getItemValueAsString("视频文件名称"));
   
4. println("name-------->"+name);
   
5. var size=encodeURI(getItemValueAsString("视频文件大小"));
   
6. println("size-------->"+size);
   
7. var fileurl=encodeURI(getItemValueAsString("视频文件链接"));
   
8. println("fileurl-------->"+fileurl);
   
9. var url='http://localhost/obpm/portal/dynaform/document/newWithPermission.action?_formid=11e9-a6e1-2cb1c12e-99d6-81bf65f40277&_isJump=1&application=11e9-39aa-88923f98-bfb2-7fd049d81e23&_resourceid=11e9-a6e2-f7dd8406-99d6-81bf65f40277&name='+name+'&size='+size+'&fileurl='+fileurl+'';
   
10. println("url---------->"+url);
    
11. var js = "OBPM.dialog.show({opener:window.parent,title:'"+name+"',url:'"+url+"',width:1280,height:680,close:function(){window.location.reload()}})";
    
12. var btn="<a onclick="+js+">打开视频</a>";
    
13. return btn;
    
14. })();

复制代码

第七步：弹出层获取参数并赋值到Video标签进行播放视频

1. //弹出层获取参数并赋值到Video标签进行播放视频
   
2. (function(){
   
3. var fileurl=decodeURI(getParameter("fileurl"));
   
4. println("fileurl-------->"+fileurl);
   
5. var video="<video autoplay='autoplay' width='100%'  controls='controls' loop='loop' muted='muted'>";
   
6. video+="<source src='"+fileurl+"' type='video/mp4'>";
   
7. video+="</video>";
   
8. return video;
   
9. })();

复制代码

效果展示：