Jessica Sowalsky

How to get the Cielo24 Transcription Player for Kaltura working in Canvas and MediaSpace

Discussion created by Jessica Sowalsky on Nov 24, 2017

Instructions for Setting Up Cielo24 Transcription Player

**Note: We use the same Quiz BSE Player in both Canvas and Kaltura MediaSpace*

 

 

  • In Canvas check and make sure that the Kaltura applications are pointing to the correct Kaltura Application Framework (KAF):

 

  1. Login to Canvas in your Internet browser
  2. Select Admin from the left-hand panel
  3. Select root level account
  4. Select Settings
  5. Select Apps

 

 

  • If you do not see My Media, Media Gallery, and In-Video Quizzing listed:

 

  1. Select +App button to add each of these items separately and title each app their designated title
  2. Consumer Key is the partner ID found in the Kaltura Management Console (KMC) under integration settings
  3. Shared Secret is the Administrator Secret found in the KMC under integration settings
  4. Under custom fields copy and paste the XML code provided by Kaltura for each application: My Media, Media Gallery, and In-Video Quizzing
  5. Select the Submit button

 

 

  • If you do see My Media, Media Gallery, and In-Video Quizzing listed:

 

  1. Select the down arrow next to the gear of each app, select Edit, and check and make sure the Launch URL listed in the app is pointing to the correct KAF

 

  •    Go to a new tab in your Internet browser for the following steps (KAF Admin):

 

  1. Login to your KAF admin
  2. Select the Player module and write down on a piece of paper the ID of your Canvas Player
  3. Select the Quiz module and write down on a piece of paper the ID of your BSE Player
  4. Select Browse and Embed Module and type in the following:
    1. Under Large: 800x930
    2. Under Medium: 560x775
    3. Under Small: 380x660
    4. Select the Save button
    5. At the top of the page select the Clear The Cache button (this can take up to 20 minutes to be reflected in Canvas)

 

 

  • Go to your Firefox Internet browser and type in the URL address for your KMC, within the KMC locate and update Canvas Player and Quiz BSE player to add Cielo24 transcription code:

 

Canvas player:

 

  1. Login to KMC in your Internet browser and select Studio
  2. Locate the Canvas player by typing in the Player ID that you have written down (we have the height and width for this player at 560 by 327), select the player, then select the electrical plug, and then select UI variables
  3. Select the Import Plugin button and copy and paste the onPageJS code below or found here: https://cielo24.zendesk.com/hc/en-us/articles/212086718-cielo24-Media-Intelligence-and-Interactive-Transcript-Widget:

 

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}

 

  1. Select the Import button to save the plugin
  2. If you would like to hide the cielo24Transcriptions.DynaTransHideShare to share to social media type in TRUE instead of FALSE
  3. Select the Save the Player Settings button (this can take up to 20 minutes to be reflected in Canvas)

 

Quiz BSE player:

 

  1. Login to KMC in your Internet browser and select Studio
  2. Locate the Quiz BSE player by typing in the Player ID that you have written down (we have the height and width for this player at 528 by 300), select the electrical plug, and then select UI variables
  3. Select the Import Plugin button and copy and paste the onPageJS code below or found here https://cielo24.zendesk.com/hc/en-us/articles/212086718-cielo24-Media-Intelligence-and-Interactive-Transcript-Widget:

 

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}

 

  1. Select the Import button to save the plugin
  2. If you would like to hide the cielo24Transcriptions.DynaTransHideShare to share to social media type in TRUE instead of FALSE
  3. Select the Save the Player Settings button (this can take up to 20 minutes to be reflected in Canvas)

 

To test in Canvas the Canvas Player and Quiz Player in My Media:

 

  1. Login to Canvas in your Internet browser
  2. Select a Canvas course you can test in by selecting Course in Canvas
  3. Select Settings then select Navigation and drag up: My Media and Media Gallery and select Save button
  4. Select My Media from the navigation and a select a video that uses the Canvas player to show the Cielo24 Transcription Player and test it out
  5. Select My Media from the navigation and a select a video that uses the Quiz player to show the Cielo24 Transcription Player and test it out

 

To test in Canvas the Quiz Player in Assignments if you want quizzes to go to the gradebook:

 

  1. Login to Canvas in your Internet browser
  2. Select a Canvas course you can test in by selecting Course in Canvas
  3. Select Assignments
  4. Select +Assignments
  5. Provide a title for the assignment
  6. Select under Submission Type select External Tool
  7. Select Find and Select the In-Video Quizzing integration
  8. Select In-Video Quiz you would like to be displayed and then select the select button
  9. Select the Save and Publish button at the bottom of the page
  10. Test out the video and the answers to questions from the quiz will go into the gradebook

 

To test in Canvas the Quiz Player in Assignments or Pages if you want to embed quizzes or videos in the rich-text editor:

 

  1. Login to Canvas in your Internet browser
  2. Select a Canvas course you can test in by selecting Course in Canvas
  3. Select Assignments or Pages  
  4. Select +Assignments or +Page
  5. Provide a title for the assignment or page
  6. Select the down facing arrow or Embed Kaltura Media button in the rich-text editor
  7. Select video you would like to be displayed and select the select button or select small, medium or large (this setting make the video scroll so an adjustment to the height will need to occur)
  8. To resize the video from scrolling select HTML Editor and type in 760 for the height then select Rich Text Editor
  9. Select the Save and Publish button at the bottom of the page
  10. Test out the video

 

KMS (Kaltura MediaSpace):

 

  • Go to a new tab in your Internet browser for the following steps (KMS Admin):
  1. Login to your KMS admin
  2. Select the Player module and write down on a piece of paper the ID of your MediaSpace Player
  3. Select the Quiz module and write down on a piece of paper the ID of your BSE Player

 

 

  • Go to your Firefox Internet browser and type in the URL address for your KMC, within the KMC locate and update Canvas Player and Quiz BSE player to add Cielo24 transcription code:

 

KMS player:

 

  1. Login to KMC in your Internet browser and select Studio
  2. Locate the MediaSpace player by typing in the Player ID that you have written down (we have the Aspect Ratio at 16/9 with a height and width for this player at 560 by 315), select the player, then select the electrical plug, and then select UI variables
  3. Select the Import Plugin button and copy and paste the onPageJS code below or found here: https://cielo24.zendesk.com/hc/en-us/articles/212086718-cielo24-Media-Intelligence-and-Interactive-Transcript-Widget:

 

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}

 

  1. Select the Import button to save the plugin
  2. If you would like to hide the cielo24Transcriptions.DynaTransHideShare to share to social media type in TRUE instead of FALSE
  3. Select the Save the Player Settings button (this can take up to 20 minutes to be reflected in KMS)

 

Quiz BSE player:

 

  1. Login to KMC in your Internet browser and select Studio
  2. Locate the Quiz BSE player by typing in the Player ID that you have written down (we have the height and width for this player at 528 by 300), select the electrical plug, and then select UI variables
  3. Select the Import Plugin button and copy and paste the onPageJS code below or found here https://cielo24.zendesk.com/hc/en-us/articles/212086718-cielo24-Media-Intelligence-and-Interactive-Transcript-Widget:

 

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}

 

  1. Select the Import button to save the plugin
  2. If you would like to hide the cielo24Transcriptions.DynaTransHideShare to share to social media type in TRUE instead of FALSE
  3. Select the Save the Player Settings button (this can take up to 20 minutes to be reflected in KMS)

Outcomes