The CTC Demo uses a video portlet on its About page. The files used are Experience2013.mp4 and Exp.webm. The portlet width is 320 pixels and its height is 200 pixels.
Parent topic: Portlet Content Types
This portlet can be used anywhere on your site to display a video.
Adding the portlet to a page
- Go to the page where you want to add a Video Teaser.
- Click Edit Mode.
- Click Content and search for video.
- Drag the Video Teaser to the page and save the page.
Content author customization options
Using the direct edit menus you can:
- Edit the videos that appear in the Video Teaser by hovering over the video icons. Add multiple formats of the same video for browser compatibility.
- Edit the title by hovering over the teaser title.
- Add some descriptive text by hovering over the summary and editing the teaser content.
- Edit the height and width video display settings.
Portlet configuration options
By clicking Open Edit Form
from the portlet menu the content author can also select a header or footer component to display in the video teaser.
Site designer customization options
With the portal in edit mode, sight designers can make the same customization changes as content authors and more.
A site designer can use a CSS file to customize the look and feel of the portlet.
CSS files are stored in this WebDAV folder: dav://server:port/wps/mycontenthandler/dav/fs-type1/themes/Portal8.0/CTC/css
For support on desktop and mobile devices, videos can be encoded in the different formats supported by the HTML5 video element. The following table shows which video formats each browser supports.
|Browser||MP4 (H.264/ACC)||WebM (VP8/Vorbis)||Ogg (Ogg Theora/Vorbis)|
|Microsoft™ Internet Explorer 9 and higher||yes||no||no|
|Safari and Mobile Safari||yes||no||no|
Internet Explorer does not support the video tag for versions lower than Version 9. If users have older versions of Internet Explorer, you must also set up Adobe Flash Player to play videos. Add the Flash player as a file resource in Web Content Manager. Then edit the Video field component in the CTC Design library to add code similar to the following pointing to the Flash Player to use.
<!-- Add flash player here -->
<object ... >
<param NAME="movie" value="VIDEO PLAYER" />