cielo24 Media Intelligence and Interactive Transcript Widget

All of the transcriptions cielo24 can provide also can include media data (timed transcripts) and intelligence (topics, keywords, adwords) to enhance content ROI by powering content discovery, engagement, ad targeting, and asset management.

In addition, cielo24 has an interactive transcript widget leveraging cielo24 proprietary Media data available for select integrations. The functionality include the ability to search within videos as well as:

  • Interactive transcript experience. The transcript is time stamped and synchronized to the video frame.
  • Displays cielo24 media intelligence including topics, keywords and AdWords.
  • Multi language support for native captions and foreign language subtitles.
  • Content search with heat map including words, topics, keywords, and entities.
  • For videos with multiple speakers identified, speaker search by color coded heat map and time stamps.
  • Complete customization including custom settings like social sharing, and transcript download.
  • Configurable social sharing of selected videos down to the specific caption across sites like Facebook, Twitter and LinkedIn.
  • Ability to download and print transcripts including speakers and time stamps.

 

cielo24 Interactive Transcript Widget Instructions for Kaltura MediaSpace

The cielo24 interactive transcription widget and media data player for Kaltura MediaSpace: http://knowledge.kaltura.com/sites/default/files/media%20player.pdf

  • Instructions for setting up a player:
    • In Studio > Universal Studio > Edit your favorite player, create new player, or duplicate your favorite player
      • Click on Plugin icon on bottom left
      • Click ‘Import Plugin

                           

      • A dialogue box will pop up to insert a string:

                           

    • Place the string below in the ‘Plugin Configuration String’:

onPageJs1=//mediadataplayer-cdn.cielo24.com/v2/stable/kaltura.js&cielo24Transcriptions.DynaTransWindowHeight=400&cielo24Transcriptions.DynaTransWindowTitle=MediaDataPlayer&cielo24Transcriptions.DynaTransClientLogo=https://mediadataplayer-cdn.cielo24.com/v2/stable/widget/img/logo-transparent.png&cielo24Transcriptions.DynaTransHideGear=FALSE&cielo24Transcriptions.DynaTransHideShare=FALSE&cielo24Transcriptions.DynaTransHidePrint=FALSE&cielo24Transcriptions.DynaTransHideDownload=FALSE&cielo24Transcriptions.DynaTransHideLeftMenu=FALSE&cielo24Transcriptions.DynaTransHideSpeakers=FALSE&cielo24Transcriptions.DynaTransHideTimestamps=TRUE&cielo24Transcriptions.DynaTransAutoscrollOff=FALSE&cielo24Transcriptions.DynaTransWidgetUrl=https://mediadataplayer-cdn.cielo24.com/v2/stable/widget/widget.html&cielo24Transcriptions.DynaTransHideMetaTopics=FALSE&cielo24Transcriptions.DynaTransHideMetaSpeakers=FALSE&cielo24Transcriptions.DynaTransHideMetaKeywords=FALSE&cielo24Transcriptions.DynaTransHideFooter=FALSE&cielo24Transcriptions.DynaTransEnableAdditionalCSS=TRUE&cielo24Transcriptions.DynaTranscriptStartsHidden=FALSE&cielo24Transcriptions.DynaTransAdditionalCSS=.action-edit #wrapper.video{margin-bottom:0}#mediaContainer #wrapper.video{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #wrapper.video #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}

    • Under ‘UI variables’ you can now edit any values to customize the player display.

 

Variable

Definition

Default

Default Meaning

cielo24Transcriptions.DynaTransWindowSize

Size of Widget

400

Sized at 400px.

cielo24Transcriptions.DynaTransWindowTitle

Name of Widget (Displayed in Footer)

Media Data Player

Label displayed on widget.

cielo24Transcriptions.DynaTransClientLogo

Logo Displayed on right side of Footer

https://mediadataplayer-cdn.cielo24.com/v2/stable/widget/img/logo-transparent.png

Logo link displayed on widget.

cielo24Transcriptions.DynaTransClientHref

Link for the 'client' logo displayed on left side of footer

https://cielo24.com

Link displayed on left side of widget footer.

cielo24Transcriptions.DynaTransHideGear

Settings Gear (required for usability)

FALSE

Settings Gear is defaulted to display.

cielo24Transcriptions.DynaTransHideShare

Social Sharing icon

Display

FALSE

Social Share is defaulted to display.

cielo24Transcriptions.DynaTransHidePrint

Transcript Print icon Display

FALSE

Transcript Print icon is defaulted to display enabling printing of transcript.

cielo24Transcriptions.DynaTransHideDownload

Transcript Download icon Display

FALSE

Transcript Download icon is defaulted to display enabling download of text transcript.

cielo24Transcriptions.DynaTransHideLeftMenu

Tag icon to Display Media Intelligence (only when available for video)

FALSE

Tag icon defaulted to display media intelligence when the video contains media data. If there is no media data, the icon is dynamically hidden.

cielo24Transcriptions.DynaTransHide

Speakers

Default Display of Speaker Name Display within Interactive Transcript

FALSE

The speaker name will only appear if speakers have been identified within the transcript. The setting configured is the default value for the display. This is also configurable via the Gear icon interactively.

cielo24Transcriptions.DynaTransHideTimestamps

Default Display of Timestamp Display per Speaker Change or Text Block

TRUE

Timestamps will only appear if speakers have been identified within the transcript. The setting configured is the default value for the display. This is also configurable via the Gear icon interactively.

cielo24Transcriptions.DynaTransAutoscrollOff

Default Behavior for Autoscroll of Interactive Transcript

FALSE

Autoscroll is the scrolling of the transcript with the playhead. The setting configured is the default value for the display. This is also configurable via the Gear icon interactively.

cielo24Transcriptions.DynaTransHideMetaTopics

Media Intelligence: Display Topics within 'Tags' icon

FALSE

This configures the display capability. The Widget only displays the dropdown under the 'Tags' icon if a value is present in the video. On by default.

cielo24Transcriptions.DynaTransHideMetaSpeakers

Media Intelligence: Display Speakers within 'Tags' icon

FALSE

This configures the 'capability' to display. The Widget only displays the dropdown under the 'Tags' icon if a value is present in the video. On by default.

cielo24Transcriptions.DynaTransHideMetaKeywords

Media Intelligence: Display Keywords within 'Tags' icon

FALSE

This configures the 'capability' to display. The Widget only displays the  dropdown under the 'Tags' icon if a value is present in the video. On by default.

cielo24Transcriptions.DynaTransTargetDivId

Div name used to display widget in a target div for reference on web page

N/A

Not used by default, only used if hosting on a web page to display the interactive transcript widgetin a particular location on the page. Value is 'div' name.

cielo24Transcriptions.DynaTransAdditionalCSS

Required for using interactive transcript widget in KMS

 

.action-edit #wrapper.video{margin-bottom:0}#mediaContainer #wrapper.video{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #wrapper.video #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}

Value only used if EnableAdditionalCSS is set to true. Required to display widget in KMS.

cielo24Transcriptions.DynaTransEnableAdditionalCSS

Required 'True' for use of interactive transcript widget within KMS

TRUE

Value determines if AdditionalCSS is referenced. Only used in KMS rendering, compatible with KMC.

cielo24Transcriptions.DynaTransSearchVar

To pass search term as a parameter intointeractive transcript widget

N/A

Variable not set by default. Default name is 'cielo24search' to override set value for key variable.

cielo24Transcriptions.DynaTransScroll bar

Value for Scrollbar search result heat map display

N/A

By default vertical heatmap/scrollbar is displayed. To use horizontal heatmap for search results set value to

'horizontal', omit for vertical only rendering.

cielo24Transcriptions.DynaTransSponsorLogo

'Sponsor' logo on the right corner of the widget footer

cielo24 logo

No logo is present.

cielo24Transcriptions.DynaTransSponsorHref

Link for the 'Sponsor' logo displayed on right side of footer

 cielo24Transcriptions.DynaTransSponsorHref

 

No valid link.

cielo24Transcriptions.DynaTransHideFooter

Controls display of the footer of the widget ­including all logos, links, and display text.

FALSE

By default, the footer will be displayed using Logos, Links, and Display Text defined.

cielo24Transcriptions.DynaTranscriptStartsHidden

Transcript Panel Hidden FALSE  Variable controls whether the Interactive Transcript Panel is either shown or hidden by default.
     
     

 

 

cielo24 Interactive Transcript Widget Instructions for iFrame Embed 

  • The instructions for creating an iFrame supported version of the widget for embedding content is similar to the Mediaspace setup. The value to copy into ‘‘Plugin Configuration String’ is different:

IframeCustomPluginJs1=//mediadataplayer-cdn.cielo24.com/v2/stable/kaltura.js&cielo24Transcriptions.DynaTransWindowHeight=400&cielo24Transcriptions.DynaTransWindowTitle=MediaDataPlayer&cielo24Transcriptions.DynaTransClientLogo=https://mediadataplayer-cdn.cielo24.com/v2/stable/widget/img/logo-transparent.png&cielo24Transcriptions.DynaTransHideGear=FALSE&cielo24Transcriptions.DynaTransHideShare=FALSE&cielo24Transcriptions.DynaTransHidePrint=FALSE&cielo24Transcriptions.DynaTransHideDownload=FALSE&cielo24Transcriptions.DynaTransHideLeftMenu=FALSE&cielo24Transcriptions.DynaTransHideSpeakers=FALSE&cielo24Transcriptions.DynaTransHideTimestamps=TRUE&cielo24Transcriptions.DynaTransAutoscrollOff=FALSE&cielo24Transcriptions.DynaTransWidgetUrl=https://mediadataplayer-cdn.cielo24.com/v2/stable/widget/widget.html&cielo24Transcriptions.DynaTransHideMetaTopics=FALSE&cielo24Transcriptions.DynaTransHideMetaSpeakers=FALSE&cielo24Transcriptions.DynaTransHideMetaKeywords=FALSE&cielo24Transcriptions.DynaTransEnableAdditionalCSS=TRUE&cielo24Transcriptions.DynaTransHideFooter=FALSE&cielo24Transcriptions.DynaTransAdditionalCSS=.action-edit #wrapper.video{margin-bottom:0}#mediaContainer #wrapper.video{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #wrapper.video #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}body{background-color:white}&onPageCss1=//mediadataplayer-cdn.cielo24.com/v2/stable/widget/css/kaltura/iframeEmbedOnPageStyle.css

  • To verify and ensure that the iFrame embed widget is configured correctly, review the following differences under the UI variables compared to the Mediaspace version of the widget:
    • In UI Variables, instead of onPageJs1, the key is: IframeCustomPluginJs1
    • A new UI Variable, key onPageCss1 is set to value://mediadataplayer-cdn.cielo24.com/v2/stable/widget/css/kaltura/iframeEmbedOnPageStyle.css
    • Additional Style declaration body {background-color:white} added to additionalCSS:

.action-edit #wrapper.video{margin-bottom:0}#mediaContainer #wrapper.video{height:auto;padding-bottom:0!important;padding-top:0!important}#mediaContainer #wrapper.video #player div.kWidgetIframeContainer{position:relative;padding-bottom:56.25%;padding-top:36px;left:auto;top:auto}.entryTitle,.stat_data{margin-top:20px}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer{background:#FFF;height:auto;left:auto;position:relative;top:auto;width:auto}#mediaContainer #wrapper.video #player #cielo24-iframe-wrapper-kplayer iframe{background-color:#FFF;height:inherit;left:unset;position:unset;top:unset;width:none}body{background-color:white}

  • To update the embed sizes for ‘browseandembed' (Mashup) or ‘embed’ functions either in the KAF as the default, or per embedded video to support the additional widget size (ex. 400px) configured for the interactive transcript player add the widget height to sizes:
      • Small: 304 x 595
      • Medium: 400 x 650
      • Large: 608 x 765
  • Once setup, copy an embed code set embed type to ‘iframe’ and select 'HTTPS support'.
      • If you have set the ‘embed' defaults in KAF the height will already be adjusted or copy the iframe embed code and manipulate directly.
  • To have the height and width dynamic (responsive) within iFrame use adjust the code:
  • By default, the embed code generated from Kaltura will look like this:

<iframe src="<your link from generated embed code>" width="560" height="395" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" style="width: 560px; height: 395px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"><span itemprop="name" content="Your title"></span><span itemprop="description" content="Your Description"></span><span itemprop="duration" content="189"></span><span itemprop="thumbnail" content="<your link from generated embed code>"></span><span itemprop="width" content="560"></span><span itemprop="height" content="395"></span></iframe>

    • Update the embed code per below (note: the updated bits of code are in bold):

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe title="Your Title" src="your same link from generated embed code"width="100%" height="100%" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></div></div></div> 

 

Please contact your account manager or support@cielo24.com if you have any questions.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk