Alvaro de AndresDocumentum Technical Consultant Atos Spain [email protected]
VIDEO CONTENT STREAMING FROM WEBTOP
2016 EMC Proven Professional Knowledge Sharing 2
Table of Contents
Introduction .................................................................................................................................. 3
Use case ......................................................................................................................................... 3
Out-of-the-box transfer modes ................................................................................................. 3
HTML5 proposed solution ......................................................................................................... 4
Design overview ........................................................................................................................ 4
Implementation ............................................................................................................................. 5
Video Folder Action ................................................................................................................... 5
Video ObjectList Component .................................................................................................... 7
Conclusion ................................................................................................................................... 13
Source Code ................................................................................................................................ 13
Bibliography ................................................................................................................................ 14
Appendix A – Project folder structure......................................................................................... 15
Appendix B – Scoped Style for video player ................................................................................ 16
Disclaimer: The views, processes or methodologies published in this article are those of the
authors. They do not necessarily reflect EMC Corporation’s views, processes or methodologies.
2016 EMC Proven Professional Knowledge Sharing 3
Introduction
Multimedia content is becoming increasingly common and users accustomed to consuming
video content expect this content to also be available in their enterprise applications.
When using Webtop to access content stored in Documentum®, the content is transferred to
the user using either the Java-based Unified Client Facilities (UCF) framework or through HTTP
transfers. Both transfer methods can’t currently offer users working with video content the
best experience possible, as the client has to download first the full video file, then it’s
required that the user has compatible video player software installed on their computer in
order to play the downloaded video, which won’t play unless the computer has the right video
codecs installed. This also presents a problem with browsers that are progressively dropping
plugin support, so it becomes harder to use solutions such as UCF to transfer content in an
optimal way.
Taking advantage of the current state of every major browser (Internet Explorer, Firefox, and
Chrome), JavaScript video players, and leveraging Content Server’s Accelerated Content
Service (ACS) we found a solution to stream video content directly from Documentum to the
user browser to provide the best user experience possible.
This Knowledge Sharing article discusses a solution that allows any H.264/MPEG-4 (.mp4 file)
to be streamed from Documentum Content Server to Webtop and played by the
MediaElments.js video player, which supports HTML5 playback and can automatically fallback
to the Flash player if needed. This provides a way to reproduce any H.264/MPEG-4 (.mp4 file),
VP8+Vorbis (.webm file) or Flash Video (.flv file) directly from the browser without extra
codecs or external video players.
Use case
Consider the following scenario: End-users don't like to read Help files; it's boring and most of
the time those files are out of date because developers don't like to write help for programs.
Nowadays everyone is used to consume video content through sites such as YouTube. Better
network connections and standardization of video codecs have made video content
consumption available to everyone. So, if users refuse to check the help files bundled with
your application, why not provide users with the same help in video format?
Out-of-the-box transfer modes
One possible solution is to upload the video files somewhere in the repository and allow every
user to access that cabinet/folder. Out-of-the-box Webtop makes it possible for users to
download and play the video files on their local computers.However, this presents issues:
1. You need to get UCF working on every user computer, which involves dealing with Java
applets, Java version, Browser version, user configurations, etc.
2. The user has to download the file and then it will be opened in their default video
player (if using UCF) or they will have to manually open the file (if using HTTP transfer
mode).
2016 EMC Proven Professional Knowledge Sharing 4
3. The user needs to have the right video codec installed in their system in order to play
the video.
HTML5 proposed solution
However, current modern browsers have native support for HTML5, so it seems a logical
decision to take advantage of these features to provide users with a more user-friendly
solution. By using the native browser support we can work around some of these problems:
1. Users won't need any codec, as the browser will be playing the file.
2. Users won't have to worry about the video player, as the video will be played by the
browser.
Design overview
For this solution to work, we need direct access to the file from Webtop (a direct URL), which
we can get by using virtual links to the video file and HTTP transfer mode. But there is still one
more step we can take to provide the end-user with the best possible experience: streaming.
When we use the term streaming, we are referring to multimedia content that is constantly
received by and presented to an end-user while being delivered by a provider. This means that
the client media player can begin to play the data (in this case, the videos) before the entire
file has been transmitted.
How can we get Webtop to stream content to the client? Using the ACS server, we can get an
ACS download URL for our content that will be streamed to the client.
To sum up, these are the steps required to get everything working:
1. Upload the videos to the repository.
2. Configure ACS so it works properly.
3. When user clicks on a file, check ACS server status and if the server is working, provide
an ACS download URL.
4. Play the video in the user's browser by using a JavaScript video player.
2016 EMC Proven Professional Knowledge Sharing 5
Following these steps, we will have a Webtop-based video streaming solution integrated that
only requires a 3rd party video player besides the usual Documentum architecture.
Implementation
Video Folder Action
We start by adding a new menu item to the File menu that will allow users to jump to the
cabinet that stores the video:
We have to modify the menubar component including the new menuitem (don’t forget to add
the NLS to the menubar’s NLS file).
<scope> <menuconfig modifies="menubar_file_menu:webcomponent/config/library/menubar/menubar_component.xml"> <insertbefore path="menu[name=file_menu].actionmenuitem[name=file_about]"> <actionmenuitem dynamic="generic" name="video_objectlist_action"
nlsid="MSG_VIDEO_OBJECTLIST" action="video_objectlist_action" showifinvalid="false" showifdisabled="true" /> </insertbefore> </menuconfig> </scope>
Then we define the new action:
<scope> <action id="video_objectlist_action">
<execution class="es.dctm.component.video_objectlist.VideoObjectListBrowserAction" /> </action>
</scope>
The action’s execution class will change the user’s location to the “Videos” cabinet that stores
the video files:
2016 EMC Proven Professional Knowledge Sharing 6
public class VideoObjectListBrowserAction implements IActionExecution, IActionCompleteListener{ private static final long serialVersionUID = 1L;
@Override public void onComplete(String paramString, boolean paramBoolean, Map paramMap) {} @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); return ActionService.execute("view", args, paramContext, paramComponent, this); } @Override public String[] getRequiredParams() { return null; } }
And now we have this new menuitem:
That changes the user location to the videos cabinet:
2016 EMC Proven Professional Knowledge Sharing 7
Video ObjectList Component
We need to define a new ObjectList component (that should be scoped to be used only in the
Cabinet that stores the video files) that will handle:
MediaElements.js video player
ACS links to the files
We start by defining the new ObjectList component:
<scope> <component id="objectlist" extends="objectlist:webtop/config/objectlist_component.xml"> <pages>
<start>/custom/jsp/video_objectlist/objectlist_videos.jsp</start> <thumbnail>/webtop/classic/objectlist/objectlist_thumbnail.jsp</thumbnail> </pages> <class>es.dctm.component.video_objectlist.VideoObjectList</class> </component> </scope>
The class will have to generate the ACS links for the files. In this case we generate a link for
every file shown in the ObjectList at the same time when the component renders (and not by
request), so we are going to get the r_object_id from every object shown and then store its
ACS link in a HashMap.
private HashMap<String,String> hmAcs=new HashMap<String,String>(); @Override public void onRender() { super.onRender(); Iterator<Row> it=rowIterator(new ArrayList<String>(Arrays.asList("r_object_id"))); ArrayList<String> idList=new ArrayList<String>(); while (it.hasNext()){ Row row=it.next(); idList.add((String)row.getCell("r_object_id").getValue()); } Datagrid datagrid = (Datagrid) getControl("doclist_grid"); datagrid.getDataProvider().firstPage(); setHMAcs(idList); } private void setHMAcs(List<String> idList){ try{ hmAcs.clear(); IDfClientX clientx = new DfClientX(); IDfAcsTransferPreferences atp = clientx.getAcsTransferPreferences(); atp.preferAcsTransfer(true); IDfExportOperation exportOp = clientx.getExportOperation(); exportOp.setAcsTransferPreferences(atp);
2016 EMC Proven Professional Knowledge Sharing 8
for (int i=0;i<idList.size();i++){ if (idList.get(i).startsWith("09")){
IDfDocument video= (IDfDocument)getDfSession().getObject(new DfId(idList.get(i))); IDfEnumeration list= video.getAcsRequests(video.getFormat().getName(), 0, null, atp); while (list.hasMoreElements()){ IDfAcsRequest acsRequest=(IDfAcsRequest) list.nextElement(); String acsUrl=acsRequest.makeURL(); hmAcs.put(video.getObjectId().getId(), acsUrl); } } } }catch(DfException e){ e.printStackTrace(); } }
Now, the component’s JSP files:
doclist_videos.jsp has to include the reference to our new ObjecList class and modify the
behavior of the double-click action:
<%@ page import="com.documentum.webcomponent.navigation.doclist.DocList, com.documentum.web.form.control.databound.Datagrid, com.documentum.web.form.control.databound.DataProvider, com.documentum.web.form.Form, es.dctm.component.video_objectlist.VideoObjectList" %> <%
VideoObjectList form = (VideoObjectList)pageContext.getAttribute(Form.FORM, PageContext.REQUEST_SCOPE); DataProvider dataProvider = ((Datagrid)form.getControl(DocList.CONTROL_GRID, Datagrid.class)).getDataProvider();
%>
<dmf:celltemplate field='object_name'> <dmf:datagridRowTd nowrap="true" scope='row' cssclass='doclistfilenamedatagrid'> <dmf:stringlengthformatter maxlen='32'> <dmfx:dragdropregion datafield='object_name' enableddroppositions="<%=IDropTarget.DROP_POSITION_OVER%>" ondrop='onDrop' dragenabled='true' overlayAsDiv="true"> <dmf:argument name='objectId' datafield='r_object_id'/> <dmfx:argument name='parentObjectId' contextvalue='objectId'/> <dmf:argument name='lockOwner' datafield='r_lock_owner'/> <dmfx:docbaseicon formatdatafield='a_content_type' typedatafield='r_object_type' linkcntdatafield='r_link_cnt' isvirtualdocdatafield='r_is_virtual_doc' assembledfromdatafield='r_assembled_from_id' isfrozenassemblydatafield='r_has_frzn_assembly' isreplicadatafield='i_is_replica' isreferencedatafield='i_is_reference' size='16'/> <dmf:datagridRowEvent eventname="dblclick"> <dmf:link onclick='show' name='objectLink' runatclient='true' datafield='object_name'> <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 acsurl= form.getACSUrl(dataProvider.getDataField("r_object_id")); %> <dmf:argument name="acsurl" value="<%=acsurl %>" /> </dmf:link> </dmf:datagridRowEvent> </dmfx:dragdropregion> </dmf:stringlengthformatter> </dmf:datagridRowTd>
2016 EMC Proven Professional Knowledge Sharing 9
<dmf:datagridRowModifier> <dmf:datagridRowTd align="center" valign="middle"> <dmfx:actionimage name='propact' nlsid='MSG_PROPERTIES' action='properties' src='icons/info.gif' showifdisabled='false'> <dmf:argument name='objectId' datafield='r_object_id'/> <dmf:argument name='type' datafield='r_object_type'/> </dmfx:actionimage> </dmf:datagridRowTd> </dmf:datagridRowModifier> </dmf:celltemplate>
This modification will run our custom code instead of the default “view” action. Now we need
to include the MediaElements.js player in the object_list.jsp. To do this, we need to:
Include MediaElements.js’ JavaScript files in the JSP
Initialize the player
Request an ACS link on double-click handler
Include an invisible div area containing the player that will be visible when playing a
video
Define styles for the player
<script src='<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/jquery.js")%>'></script> <script src='<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/mediaelement-and-player.js")%>'> </script> <script> if (typeof String.prototype.startsWith != 'function') { String.prototype.startsWith = function(str) { return this.slice(0, str.length) == str; }; } function show(param1, param2, param3, param4, param5, param6, param7, param8) {
if (param2 != null && param2.startsWith('0b')) { onClickObject(param1, param2, param3, param4, param5, param6, param7); } else { var pop=$('#pop'); var video=pop.find('video'); var videoUrl=$('<div/>').html(param8).text(); if (video.attr('src')==''||video.attr('src')!=videoUrl){ video.attr('src',videoUrl); } video.mediaelementplayer({}); $('#hider').fadeIn('slow'); pop.fadeIn('slow'); } } $('html').click(function(e) { var container = $('#pop'); if (!container.has(e.target).length && e.target.id=='hider'){ if (container.css('display')=='block'){ container.find('video')[0].player.pause(); container.fadeOut('slow'); $('#hider').fadeOut('slow'); } } });
2016 EMC Proven Professional Knowledge Sharing 10
$(document).ready(function() { var pop=$('#pop'); pop.css('width', '640px'); pop.css('height', '360px'); pop.hide(); $('#hider').hide(); var w = $(this).width(); var h = $(this).height(); w = (w / 2) - (640 / 2); h = (h / 2) - (360 / 2); pop.css('left', w + 'px'); pop.css('top', h + 'px'); }); </script> <style> #normal{ z-index:100; } #pop { display:none; position:absolute; border: 1px solid #333333; text-align:center; background:#000000; z-index: 101; video:-webkit-full-screen { max-height: 100%; } video:-moz-full-screen { max-height: 100%; }
} #hider{ position:absolute; top: 0%; left: 0%; width:1600px; height:2000px; z-index: 99; background-color:Grey; opacity:0.4; } </style>
This will make the player play in normal mode. If you want to use it in full screen, the player
will fill the objectlist frame and change your browser mode to full screen, so you will be
presented with a full screen Webtop and the video playing in the objectlist frame. This is due
to the way Webtop is built. If you want to make (simulate) full screen you need to hide the
other frames before and after the full screen change. Here is an example, although this is
heavily dependent on your Webtop version and existing customizations:
MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen; MediaElementPlayer.prototype.enterFullScreen = function() { window.parent.document.getElementsByTagName("frameset")[0].cols="0,*"; parent.document.getElementsByTagName("frameset")[0].getElementsByTagName("frameset")[0].rows="0,*"; window.parent.parent.document.getElementsByTagName("frameset")[0].getElementsByTagName("frameset")[0].cols="0,*"; window.parent.parent.parent.document.getElementsByTagName("frameset")[0].rows="0,0,*,0"; this.enterFullScreen_org(); }
2016 EMC Proven Professional Knowledge Sharing 11
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen; MediaElementPlayer.prototype.exitFullScreen = function() { window.parent.document.getElementsByTagName("frameset")[0].cols="1,*"; parent.document.getElementsByTagName("frameset")[0].getElementsByTagName("frameset")[0].rows="20,*"; window.parent.parent.document.getElementsByTagName("frameset")[0].getElementsByTagName("frameset")[0].cols="240,*"; window.parent.parent.parent.document.getElementsByTagName("frameset")[0].rows="0,28,*,21"; this.exitFullScreen_org(); } MediaElementPlayer.prototype.buildfullscreen_org = MediaElementPlayer.prototype.buildfullscreen; MediaElementPlayer.prototype.buildfullscreen = function(player, controls, layers, media) { if (mejs.MediaFeatures.hasTrueNativeFullScreen) { // chrome doesn't alays fire this in an iframe var func = function(e) { if (player.isFullScreen) { if (mejs.MediaFeatures.isFullScreen()) { player.isNativeFullScreen = true; // reset the controls once we are fully in full screen player.setControlsSize(); } else { player.isNativeFullScreen = false; // when a user presses ESC // make sure to put the player back into place window.parent.document.getElementsByTagName("frameset")[0].cols="1,*"; parent.document.getElementsByTagName("frameset")[0].getElementsByTagName("frameset")[0].rows="20,*"; window.parent.parent.document.getElementsByTagName("frameset")[0].getElementsByTagName("frameset")[0].cols="240,*"; window.parent.parent.parent.document.getElementsByTagName("frameset")[0].rows="0,28,*,21"; player.exitFullScreen_org(); } } }; player.globalBind(mejs.MediaFeatures.fullScreenEventName, func); } this.buildfullscreen_org(player, controls, layers, media); }
Finally, we need to include the div that contains the player. You need to replace the relative
path to images in the scoped style definition with the absolute path:
<dmf:form> <div id="hider"></div> <dmf:div id="pop"> <style scoped> <!-- Full style in Appendix B --> <!-- Provide absolute paths, i.e.:<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/bigplay.png") %>)} --> </style> <video width="640" height="360" src="" type="video/mp4" id="player1" controls="controls" preload="none"></video> </dmf:div> <%@ include file='/custom/jsp/video_objectlist/doclist_body_videos.jsp' %> </dmf:form>
2016 EMC Proven Professional Knowledge Sharing 12
Now, when you double click on a video you should see this:
If you play the video, you will see the video playing and the loading progress bar (blue) and the
current time bar (white) as shown in the following image
2016 EMC Proven Professional Knowledge Sharing 13
Conclusion
This solution represents an easy way to provide users with a friendlier help system that has
little to no impact on the system. It can be implemented without additional license costs, as
ACS server is bundled with Documentum Content Server and there are plenty of open source
or free JavaScript video players that take advantage of modern browsers to play video.
Source Code
This solution is a basic integration of streaming video capabilities into Webtop using a 3rd party
player (MediaElements.js). This particular solution could be improved and extended in several
ways, such as better ACS performance, supported video formats, or even fallback to different
video players (i.e.: HTML5 to Flash). This solution is also heavily dependent on Webtop’s
version and/or customizations you might be using. However, you can easily adapt the code
shown in this document to a particular version of Webtop.
2016 EMC Proven Professional Knowledge Sharing 14
Bibliography
1. https://en.wikipedia.org/wiki/Streaming_media
2. http://mediaelementjs.com/
3. https://community.emc.com/message/48096#48096
4. http://blog.documentum.pro/2015/10/18/q-a-xi/
2016 EMC Proven Professional Knowledge Sharing 15
Appendix A – Project folder structure
Webtop
src
es
dctm
component
video_objectlist
VideoObjectList.java
VideoObjectListBrowserAction.java
custom
config
menubar_component.xml
video_objectlist_component.xml
jsp
video_object_list
medialementsjs
background.png
bigplay.fw.png
bigplay.png
bigplay.svg
controls-ted.png
controls-wmp-bg.png
controls-wmp.png
controls.fw.png
controls.png
controls.svg
flashmediaelement.swf
jquery.js
jumpforward.png
loading.gif
mediaelement-and-player.js
mediaelement-and-player.min.js
mediaelement.js
mediaelement.min.js
mediaelementplayer.css
mediaelementplayer.js
mediaelementplayer.min.css
mediaelementplayer.min.js
mejs-skins.css
silverlightmediaelement.xap
skipback.png
doclist_body_videos.jsp
objectlist_videos.jsp
strings
es
dctm
component
video_objectlist
VideoObjectListNlsProp.properties
2016 EMC Proven Professional Knowledge Sharing 16
VideoObjectListNlsProp_es_ES.properties
Appendix B – Scoped Style for video player <dmf:form> <div id="hider"></div> <dmf:div id="pop"> <style scoped>.mejs-offscreen{position:absolute!important;top:-10000px;left:-10000px;overflow:hidden;width:1px;height:1px}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial;text-align:left;vertical-align:top;text-indent:0}.mejs-container:focus{outline:0}.me-plugin{position:absolute}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%;height:100%}.mejs-clear{clear:both}.mejs-background{position:absolute;top:0;left:0}.mejs-mediaelement{position:absolute;top:0;left:0;width:100%;height:100%}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat}:root .mejs-poster img{display:none}.mejs-poster img{border:0;padding:0;border:0}.mejs-overlay{position:absolute;top:0;left:0}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/bigplay.svg")%>) no-repeat}.no-svg .mejs-overlay-button{background-image:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/bigplay.png")%>)}.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:#333;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(0,0,0,.9);background:-webkit-gradient(linear,0 0,0, 100%,from(rgba(50,50,50,.9)),to(rgba(0,0,0,.9)));background:-webkit-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-moz-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-o-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-ms-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:linear-gradient(rgba(50,50,50,.9),rgba(0,0,0,.9))}.mejs-overlay-loading span{display:block;width:80px;height:80px;background:transparent url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/loading.gif")%>) 50% 50% no-repeat}.mejs-container .mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0;bottom:0;left:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));height:30px;width:100%}.mejs-container .mejs-controls div{list-style-type:none;background-image:none;display:block;float:left;margin:0;padding:0;width:26px;height:26px;font-size:11px;line-height:11px;font-family:Helvetica,Arial;border:0}.mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0; background:transparent url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls.svg")%>) no-repeat}.no-svg .mejs-controls .mejs-button button{background-image:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls.png")%>)}.mejs-controls .mejs-button button:focus{outline:dotted 1px #999}.mejs-container .mejs-controls .mejs-time{color:#fff;display:block;height:17px;width:auto;padding:10px 3px 0;overflow:hidden;text-align:center;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.mejs-container .mejs-controls .mejs-time a{color:#fff;font-size:11px;line-height:12px;display:block;float:left;margin:1px 2px 0 0;width:auto}.mejs-controls .mejs-play button{background-position:0 0}.mejs-controls .mejs-pause button{background-position:0 -16px}.mejs-controls .mejs-stop button{background-position:-112px 0}.mejs-controls div.mejs-time-rail{direction:ltr;width:200px;padding-top:5px}.mejs-controls .mejs-time-rail span,.mejs-controls .mejs-time-rail a{display:block;position:absolute;width:180px;height:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer}.mejs-controls .mejs-time-rail .mejs-time-total{margin:5px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8)); background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-time-rail .mejs-time-buffering{width:100%;background-image:-o-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-
2016 EMC Proven Professional Knowledge Sharing 17
size:15px 15px;-moz-background-size:15px 15px;-o-background-size:15px 15px;background-size:15px 15px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation:buffering-stripes 2s linear infinite; -ms-animation:buffering-stripes 2s linear infinite;-o-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite}@-webkit-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-moz-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-ms-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-o-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#3caac8;background:rgba(60,170,200,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(44,124,145,.8)),to(rgba(78,183,212,.8)));background:-webkit-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-moz-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-o-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-ms-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:linear-gradient(rgba(44,124,145,.8),rgba(78,183,212,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-current{background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8)); background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-handle{display:none;position:absolute;margin:0;width:10px;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;border:solid 2px #333;top:-2px;text-align:center}.mejs-controls .mejs-time-rail .mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:solid 1px #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-controls .mejs-time-rail .mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-controls .mejs-time-rail .mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 5px #eee;border-color:#eee transparent transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float{width:48px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current{width:44px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner{left:18px}.mejs-controls .mejs-fullscreen-button button{background-position:-32px 0}.mejs-controls .mejs-unfullscreen button{background-position:-32px -16px}.mejs-controls .mejs-volume-button{}.mejs-controls .mejs-mute button{background-position:-16px -16px} .mejs-controls .mejs-unmute button{background-position:-16px 0}.mejs-controls .mejs-volume-button{position:relative}.mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:115px;width:25px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(50,50,50,.7);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-115px;left:0;z-index:1;position:absolute;margin:0}.mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.5);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.9);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255,255,255,.9);cursor:N-resize;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin:0}.mejs-controls a.mejs-horizontal-volume-slider{height:26px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{display:none}.mejs-controls .mejs-captions-button{position:relative}.mejs-controls .mejs-captions-button button{background-position:-48px 0}.mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:26px;right:-51px;width:85px;height:100px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px 10px 0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-
2016 EMC Proven Professional Knowledge Sharing 18
type:none!important;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}.mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px}.mejs-chapters{position:absolute;top:0;left:0;-xborder-right:solid 1px #fff;width:10000px;z-index:1}.mejs-chapters .mejs-chapter{position:absolute;float:left;background:#222;background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000); overflow:hidden;border:0}.mejs-chapters .mejs-chapter .mejs-chapter-block{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #333;border-bottom:solid 1px #333;cursor:pointer}.mejs-chapters .mejs-chapter .mejs-chapter-block-last{border-right:0}.mejs-chapters .mejs-chapter .mejs-chapter-block:hover{background:#666;background:rgba(102,102,102,.7);background:-webkit-gradient(linear,0 0,0100%,from(rgba(102,102,102,.7)),to(rgba(50,50,50,.6))) ;background:-webkit-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-moz-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-o-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-ms-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:linear-gradient(rgba(102,102,102,.7),rgba(50,50,50,.6));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232)}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{font-size:12px;font-weight:700;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px;line-height:12px}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{font-size:12px;line-height:12px;margin:3px 0 4px;display:block;white-space:nowrap;text-overflow:ellipsis}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0} .mejs-captions-position-hover{bottom:35px}.mejs-captions-text{padding:3px 5px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(20,20,20,.5);white-space:pre-wrap}.me-cannotplay{}.me-cannotplay a{color:#fff;font-weight:700}.me-cannotplay span{padding:15px;display:block}.mejs-controls .mejs-loop-off button{background-position:-64px -16px}.mejs-controls .mejs-loop-on button{background-position:-64px 0}.mejs-controls .mejs-backlight-off button{background-position:-80px -16px}.mejs-controls .mejs-backlight-on button{background-position:-80px 0}.mejs-controls .mejs-picturecontrols-button{background-position:-96px 0}.mejs-contextmenu{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001}.mejs-contextmenu .mejs-contextmenu-separator{height:1px;font-size:0;margin:5px 6px;background:#333}.mejs-contextmenu .mejs-contextmenu-item{font-family:Helvetica,Arial;font-size:12px;padding:4px 6px;cursor:pointer;color:#333}.mejs-contextmenu .mejs-contextmenu-item:hover{background:#2C7C91;color:#fff}.mejs-controls .mejs-sourcechooser-button{position:relative}.mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0; padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}.mejs-postroll-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(50,50,50,.7);z-index:1000;overflow:hidden}.mejs-postroll-layer-content{width:100%;height:100%}.mejs-postroll-close{position:absolute;right:0;top:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(50,50,50,.7);color:#fff;padding:4px;z-index:100;cursor:pointer}div.mejs-speed-button{width:46px!important;position:relative}.mejs-controls .mejs-button.mejs-speed-button button{background:transparent;width:36px;font-size:11px;line-height:normal;color:#fff}.mejs-controls .mejs-speed-button .mejs-speed-selector{display:none;position:absolute;top:-100px;left:-10px;width:60px;height:100px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/background.png")%>);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector{display:block}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected{color:rgba(33,248,248,1)}.mejs-controls .mejs-speed-button .mejs-speed-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;display:none}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label{width:60px;float:left;padding:4px 0 0;line-height:15px;font-family:helvetica,arial;font-size:11.5px;color:#fff;margin-left:5px;cursor:pointer}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover{background-color:#c8c8c8!important;background-color:rgba(255,255,255,.4)!important}.mejs-controls .mejs-button.mejs-jump-forward-button{background:transparent url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/jumpforward.png")%>) no-repeat;background-position:3px 3px}.mejs-controls
2016 EMC Proven Professional Knowledge Sharing 19
.mejs-button.mejs-jump-forward-button button{background:transparent;font-size:9px;line-height:normal;color:#fff}.mejs-controls
.mejs-button.mejs-skip-back-button{background:transparent url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/skipback.png")%>) no-repeat;background-position:3px 3px}.mejs-controls .mejs-button.mejs-skip-back-button button{background:transparent;font-size:9px;line-height:normal;color:#fff}.mejs-ted .mejs-controls{background:#eee;height:65px}.mejs-ted .mejs-button,.mejs-ted .mejs-time{position:absolute;background:#ddd}.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded,.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total{height:6px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) 0 -52px repeat-x}.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering{height:6px}.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded{width:0}.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current{width:0;height:6px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) 0 -59px repeat-x}.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle{display:block;margin:0;width:14px;height:21px;top:-7px;border:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) no-repeat}.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float{display:none}.mejs-ted .mejs-controls .mejs-playpause-button{top:29px;left:9px;width:49px;height:28px}.mejs-ted .mejs-controls .mejs-playpause-button button{width:49px;height:28px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) -50px -23px no-repeat;margin:0;padding:0}.mejs-ted .mejs-controls .mejs-pause button{background-position:0 -23px}.mejs-ted .mejs-controls .mejs-fullscreen-button{top:34px;right:9px;width:17px;height:15px;background:0 0;display:none!important}.mejs-ted .mejs-controls .mejs-fullscreen-button button{width:19px;height:17px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) 0 -66px no-repeat;margin:0;padding:0;display:none!important}.mejs-ted .mejs-controls .mejs-unfullscreen button{background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) -21px -66px no-repeat;margin:0;padding:0;display:none!important} .mejs-ted .mejs-controls .mejs-captions-button,.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-handle{display:none}.mejs-ted .mejs-controls .mejs-volume-button{top:30px;right:35px;width:24px;height:22px}.mejs-ted .mejs-controls .mejs-mute button{background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) -15px 0 no-repeat;width:24px;height:22px;margin:0;padding:0}.mejs-ted .mejs-controls .mejs-unmute button{background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) -40px 0 no-repeat;width:24px;height:22px;margin:0;padding:0}.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-slider{background:#fff;border:1px solid #aaa;border-width:1px 1px 0;width:22px;height:65px;top:-65px}.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total{background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) -41px -66px repeat-y;left:8px;width:6px;height:50px}.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current{left:8px;width:6px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) -48px -66px repeat-y;height:50px}.mejs-ted .mejs-controls .mejs-time span{color:#333}.mejs-ted .mejs-controls .mejs-currenttime-container{position:absolute;top:32px;right:100px;border:1px solid #999;background:#fff;padding-top:2px;border-radius:3px;color:#333}.mejs-ted .mejs-controls .mejs-duration-container{position:absolute;top:32px;right:65px;border:1px solid #999;background:#fff;padding-top:2px;border-radius:3px;color:#333}.mejs-ted .mejs-controls .mejs-time button{color:#333}.mejs-wmp .mejs-controls{background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-ted.png")%>) center 16px no-repeat;height:65px}.mejs-wmp .mejs-button,.mejs-wmp .mejs-time{position:absolute;background:0 0} .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total{background-color:transparent;border:1px solid #ccc;height:3px}.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-buffering{height:3px}.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-loaded{background-color:rgba(255,255,255,.3);width:0;height:3px}.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current{width:0;height:1px;background-color:#014CB6;border:1px solid #7FC9FA;border-width:1px 0;border-color:#7FC9FA #fff #619FF2}.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-handle{display:block;margin:0;width:16px;height:9px;top:-3px;border:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-wmp.png")%>) 0 -80px no-repeat}.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-float{display:none}.mejs-wmp .mejs-controls .mejs-playpause-button{top:10px;left:50%;margin:10px 0 0 -20px;width:40px;height:40px}.mejs-wmp .mejs-controls .mejs-playpause-button button{width:40px;height:40px;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-wmp.png")%>) no-repeat;margin:0;padding:0}.mejs-wmp .mejs-controls .mejs-pause button{background-position:0 -40px}.mejs-wmp .mejs-controls .mejs-currenttime-container{position:absolute;top:25px;left:50%;margin-left:-93px}.mejs-wmp .mejs-controls .mejs-duration-container{position:absolute;top:25px;left:50%;margin-left:-58px}.mejs-wmp .mejs-controls .mejs-volume-button{top:32px;right:50%;margin-right:-55px;width:20px;height:15px}.mejs-wmp .mejs-controls .mejs-volume-button button{margin:0;padding:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-wmp.png")%>) -42px -17px no-repeat;width:20px;height:15px}.mejs-wmp .mejs-controls .mejs-unmute button{margin:0;padding:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-wmp.png")%>) -42px 0 no-repeat;width:20px;height:15px}.mejs-wmp .mejs-controls .mejs-volume-button .mejs-volume-slider{background:rgba(102,102,102,.6)}.mejs-wmp .mejs-controls .mejs-fullscreen-button{top:32px;right:50%;margin-right:-82px;width:15px;height:14px}.mejs-wmp .mejs-controls .mejs-fullscreen-button button{margin:0;padding:0;background:url(<%=Form.makeUrl(request, "/custom/jsp/video_objectlist/mediaelementsjs/controls-wmp.png")%>) -63px 0 no-repeat;width:15px;height:14px}.mejs-wmp .mejs-controls .mejs-captions-button{display:none} </style> <video width="640" height="360" src="" type="video/mp4" id="player1" controls="controls" preload="none"></video> </dmf:div> <%@ include file='/custom/jsp/video_objectlist/doclist_body_videos.jsp' %> </dmf:form>
2016 EMC Proven Professional Knowledge Sharing 20
EMC believes the information in this publication is accurate as of its publication date. The
information is subject to change without notice.
THE INFORMATION IN THIS PUBLICATION IS PROVIDED “AS IS.” EMC CORPORATION MAKES
NO RESPRESENTATIONS OR WARRANTIES OF ANY KIND WITH RESPECT TO THE INFORMATION
IN THIS PUBLICATION, AND SPECIFICALLY DISCLAIMS IMPLIED WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.
Use, copying, and distribution of any EMC software described in this publication requires an
applicable software license.