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:

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).

In recent Webtop versions EMC introduced a new secutiry feature that forbid components to be invoked through an URL:

The following configuration has been added to enable or disable components that are invoked through a URL.

<url-addressable-components>

<enabled>false</enabled>

</url-addressable-components>

Set <enabled> to true to invoke all the components through the URL.

Specific components can also be configuredforURLaddressability. This can be done by adding the <url-addressable-enabled/> tag in the corresponding component configuration file.

For example, add the following configuration file, <Web-app-root>\wdk\config\errormessage_component.xml, where <url-addressable-enabled/> enables URL addressability.

Note: EMC recommends that administrators add <url-addressable-enabled/> in the specific URL addressable-component instead of choosing to set <enabled> to true.

So when I’m getting a “401: The URL is unauthorized in WDK” when trying to use a virtual link I check app.xml:

<url-addressable-components>
<enabled>false</enabled>
</url-addressable-components>

Ok, default configuration is set, so components without <url-addressable-enabled/> cannot be invoked through an URL. Let’s check virtuallinkconnect component default configuration:

<!–XSRF component whitelisting change–>
<url-addressable-enabled/>

Ok, so if the component is whitelisted by default, why it is being blocked? Well, what does any component do when you invoke it through an URL? Yes, it redirects to the login component, which ,of course, it’s not whitelisted by default.

So by adding <url-addressable-enabled/> to the login definition, the virtuallinkconnect component will work with the component blocking enabled.