User Tools

Site Tools



The MediaViewer component is primarily meant to display a Media element and its associated meta-data.

A media element wrapped in a viewer to provide access to play, pause, and metadata.
MediaViewer screenshot


Type Interactive Display Object
Category Component
Scope Local
Position *
Parents Container
Children *
Gestures *
Requirements none



media object reference the Media element

See Also: Display Attributes

<MediaViewer x="575" y="300" width="485" height="350" rotation="-20" mouseChildren="true" disableNativeTransform="false" disableAffineTransform="false">
    <!-- Here is where the Media is loaded in to be viewed. If there is an item with class="media_element", it will be automatically set as the "front" side of a MediaViewer. -->
    <TouchContainer class="video_container" visible="true" targetParent="true" mouseChildren="false">
        <Media class="media_element" src="" autoplay="true" loop="true" scale="1.5"/>
    <!-- Designate information for the info panel. Something labeled with class="info_bg" will be set as the back. -->
    <TouchContainer class="info_container" visible="false" targetParent="true" mouseChildren="false" >
        <Graphic color="0x19677F" alpha="0.6" lineStroke="0" class="info_bg" shape="rectangle"/>		
        <Text class="title" border="false" selectable="false" text="A Trip Down Market Street (1906)"/>				
        <Text x="10" width="580" wordWrap="true" color="0xFFFFFF" font="OpenSansRegular" fontSize="16" border="false" selectable="false" text="This film from 1906 in downtown SanFrancisco was made 4 days before the great earthquake destroyed the city at 5:12 AM on April 18th, 1906."/>		

    <!-- This is just the frame for the whole viewer. Thick frames are very useful for objects with context-specific touch, as it gives a touchable border. The MediaViewer does not have context specific touch, so feel free to style it however you like. -->
    <TouchContainer class="frame_container" visible="true" targetParent="true" mouseChildren="false">
        <Frame frameColor="0x999999" frameAlpha="0.3" frameThickness="30" frameShape="rectangle" class="frame_element"/>
    <!-- Here is where the entire menu is structured. We used "include" files to style each of our buttons individually rather than have all the mark-up here. -->
    <Menu class="menu_container" x="0" y="0" alpha="0.6" position="bottom" paddingLeft="30" paddingBottom="-50" paddingRight="20" autoHide="true" visible="false">
        <Include src="infoButton.cml"/>
        <Include src="playButton.cml"/>
        <Include src="pauseButton.cml"/>
        <Include src="closeButton.cml"/>
        <Gesture ref="n-drag" gestureOn="true"/>
        <Gesture ref="n-scale" gestureOn="true"/>
        <Gesture ref="n-rotate" gestureOn="true"/>
        <Gesture ref="tap" gestureOn="true"/>
mediaviewer.txt · Last modified: 2015/09/18 15:29 by glass