Video streaming from Webtop

We have stored in our repository some video tutorials to help users. Usually they double click on them, the UCF applet/http download launches and they’ll open them with some video player than may or may not have the rigth codecs to play the video.

So in order to improve the “user experience” we decided to try using some HTML5 video player to play the content from the browser.

In this case we are using MediaElements.js (mediaelementjs.com), but any player will do.

1. Create a hidden cabinet with mp4/webm videos.
2. Add a menu action to load the hidden cabinet in an objectlist (I’m simulating a click on the browsertree):

      <actionmenuitem dynamic="generic" name="videohelp"  
           nlsid="MSG_VIDEOHELP" action="videohelp_action"  
           showifinvalid="false" showifdisabled="true" />  
        @Override  
        public boolean execute(String paramString, IConfigElement paramIConfigElement,  
              ArgumentList paramArgumentList, Context paramContext, Component paramComponent,  
              Map paramMap) {  
            String pathIds=FolderUtil.getFolderIdsFromPath("/VIDEOS");  
          
            ArgumentList args=new ArgumentList();  
            args.add("objectId",pathIds);  
          
            ClientSessionState.setAttribute("customlocation", "/VIDEOS");  
          
            return ActionService.execute("view", args, paramContext, paramComponent, this);  
        }  

NOTE: I’m using a custom scope that allows to scope by folder, that’s why I’m setting the customlocation attribute.

3. Create a new objectlist component which:

  • Overrides the default action when double clicking a document so it launches the video player instead of opening.
  • Generates a virtual link for the video content.
    private String getVideoUrl(IDfDocument video) throws DfException, IOException{  
            String url="";  
      
            IDfFolder fold=(IDfFolder)getDfSession().getObject(video.getFolderId(0));      
            url=url+getPageContext().getRequest().getServerName()+":"  
                   +getPageContext().getRequest().getServerPort()  
                   +getPageContext().getServletContext().getContextPath();  
            url=url+fold.getFolderPath(0)+"/"+video.getObjectName();  
          
            return url;  
    }  

objectlist_videos.jsp:

    //add javascript to show/hide player in a cool way.  
    //Add the parameter passed in the click event to the src attribute of the video tag.  
  
       <dmf:form>  
          <video width="640" height="360" src="" type="video/mp4"  
            id="player1" controls="controls" preload="none"></video>  
          
         <%@ include file='/custom/jsp/objectlist/doclist_body_videos.jsp' %>  
      </dmf:form> 

doclist_body_videos.jsp:

        //modify object id celltemplate:  
      
         <dmf:datagridRowEvent eventname="dblclick">  
             <dmf:link onclick='show' name='objectLink'  
                    runatclient='true' datafield='title'>  
                    <dmf:argument name='id' datafield='r_object_id' />  
                    <dmf:argument name='type' datafield='r_object_type' />  
                    <dmf:argument name='isFolder' datafield='isfolder' />  
                    <dmf:argument name="isVirtualDoc" datafield='r_is_virtual_doc' />  
                    <dmf:argument name='assembledFromId' datafield='r_assembled_from_id' />  
                    <dmf:argument name="linkCount" datafield='r_link_cnt' />  
                    <% String url=form.getVideoUrl(dataProvider.getDataField("r_object_id")); %>  
                    <dmf:argument name="url" value="<%=url %>" />  
             </dmf:link>  

This works, but is not really streaming, as it first downloads the video, and then plays it. But (I never though I would say this) ACS comes to rescue!

ACS links allow content streaming, so instead of getting the virtual url link to the video, we’ll get the ACS url:

    try{  
        IDfClientX clientx = new DfClientX();  
        IDfDocument video=(IDfDocument)getDfSession().getObject(new DfId(objectId));  
      
        IDfAcsTransferPreferences atp = clientx.getAcsTransferPreferences();  
        atp.preferAcsTransfer(true);  
      
        IDfExportOperation exportOp = clientx.getExportOperation();  
        exportOp.setAcsTransferPreferences(atp);  
        IDfExportNode exportNode = (IDfExportNode) exportOp.add(video);  
        boolean result = exportOp.execute();  
      
        if (result) {  
            IDfList nodes = exportOp.getNodes();  
            for (int i = 0, size = nodes.getCount(); i < size; i++) {  
                IDfExportNode node = (IDfExportNode) nodes.get(i);  
                IDfEnumeration acsRequests = node.getAcsRequests();  
                while (acsRequests.hasMoreElements()) {  
                    IDfAcsRequest acsRequest = (IDfAcsRequest) acsRequests.nextElement();  
                    String docURL = acsRequest.makeURL();  
                    return docURL;                    
                }  
            }  
        }    
    }catch(DfException e){  
        e.printStackTrace();  
    }  

And the result:

videoplayer.png

Note: Fullscreen is disabled due to frameset architechture that Webtop uses makes html5 full screen work like: Put browser in full screen mode, play video in full frame (instead of full screen).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s