VIDEO CONTENT STREAMING FROM WEBTOP · optimal way. Taking advantage of the current state of every...

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.


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


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.


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:


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:


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


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>


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


$(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(); }


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>   </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>


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


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.


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/

https://en.wikipedia.org/wiki/Streaming_media

http://mediaelementjs.com/

https://community.emc.com/message/48096#48096

http://blog.documentum.pro/2015/10/18/q-a-xi/


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


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-


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-


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


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


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.

Date post:	05-Oct-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

VIDEO CONTENT STREAMING FROM WEBTOP · optimal way. Taking advantage of the current state of every...

Documents