Is possible to customize the video embed code so that the video player can show a control for Playback Speed? I have hosted a video on an external video site (similar to YouTube) and the player on the site does not show controls for changing the video playback speed like YouTube does. The embed code generated from that site works within my Rise course and I am able to play the video - but I'm trying to explore if it is possible to add some additional code to the video embed code within Rise to enable the playback speed.

Hi Joseph, If you are using embed code to play an external video within Rise, then the Rise video player is not being used at all. You would need to read up on the various parameters that are available on the site where you are getting your embed code.

Hi Karl, Thanks for your response. I understood that the Rise video player will not be used for playback when we insert embed code from another video hosting site. The embed code provided by the 3rd party video hosting site has two options: Embed video with player - which shows the standard player from that video service within the Rise course and plays ok. The issue is that this player does not have playback speed controls. Embed video without player - when I try to use this code within the Embed option in Rise - it shows an error that says 'Please enter valid URL or Iframe.' As I presume that Rise is designed on the basis of HTML5 standards, I was wondering if there is a way to wrap the embed code (without player) in some HTML5 code so that it can play within a generic HTML5-generated video player in Rise with the potential to control playback speed of the video. I am not an expert in HTML or web coding - so, I am not sure if this is even a practical request. Just thought no harm in checking.

Hi Joseph, you can check out this article for the attributes you can add to your iframe code. You can also share the iframe code that you are using so that we can test it? Thanks!

Lea, Many thanks for your response. I will check out the samples in the article link you shared and see if it helps. I'll be able to share the iframe code for testing depending on internal approvals. Thanks!

Lea, Following on from your request to share the iframe code for test, I'd like to share it here. Please see below - the embed code generated from the video hosting system (Widen) that we use. Embed code with Player: this code works in Rise within the Multimedia block >Embed - but the player does not have controls for playback speed <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;"><iframe src="https://aai.widen.net/view/video/ih89ggbljr/Sample-Video.mp4?u=fmtlib" webkitallowfullscreen mozallowfullscreen allowfullscreen title="Video for &quot;Sample Video.mp4&quot;" frameborder="0" allowtransparency="true" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;" ></iframe></div> Embed code without Player: this code does not work in Rise within the embed field. My request is to check whether this code can be modified a little bit to make it work within Rise such that the video can play in a generic HTML video player <video controls><source src="https://aai.widen.net/content/ih89ggbljr/mp4/Sample-Video.mp4?quality=hd&u=fmtlib" type="video/mp4"></video> We were able to get the playback speed functionality working on a generic HTML page using this code. Please see the attached zip file containing the output HTML file and the text file with the HTML source code. Just not sure how to make it do the same within Rise.

Rise video player customization | Articulate

KarlMuller
Community Member
3 years ago
Hi Joseph,

If you are using embed code to play an external video within Rise, then the Rise video player is not being used at all.

You would need to read up on the various parameters that are available on the site where you are getting your embed code.
JosephVincent-8
Community Member
3 years ago
Hi Karl,

Thanks for your response. I understood that the Rise video player will not be used for playback when we insert embed code from another video hosting site.

The embed code provided by the 3rd party video hosting site has two options:

Embed video with player - which shows the standard player from that video service within the Rise course and plays ok. The issue is that this player does not have playback speed controls.

Embed video without player - when I try to use this code within the Embed option in Rise - it shows an error that says 'Please enter valid URL or Iframe.'

As I presume that Rise is designed on the basis of HTML5 standards, I was wondering if there is a way to wrap the embed code (without player) in some HTML5 code so that it can play within a generic HTML5-generated video player in Rise with the potential to control playback speed of the video.

I am not an expert in HTML or web coding - so, I am not sure if this is even a practical request. Just thought no harm in checking.
LeaSAgato
Staff
3 years ago
Hi Joseph, you can check out this article for the attributes you can add to your iframe code. You can also share the iframe code that you are using so that we can test it? Thanks!
- JosephVincent-8
  Community Member
  3 years ago
  Lea,
  
  Many thanks for your response. I will check out the samples in the article link you shared and see if it helps.
  
  I'll be able to share the iframe code for testing depending on internal approvals. Thanks!
- JosephVincent-8
  Community Member
  3 years ago
  Lea,
  
  Following on from your request to share the iframe code for test, I'd like to share it here. Please see below - the embed code generated from the video hosting system (Widen) that we use.
  
  Embed code with Player: this code works in Rise within the Multimedia block >Embed - but the player does not have controls for playback speed
  
  <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;"><iframe src="https://aai.widen.net/view/video/ih89ggbljr/Sample-Video.mp4?u=fmtlib" webkitallowfullscreen mozallowfullscreen allowfullscreen title="Video for "Sample Video.mp4"" frameborder="0" allowtransparency="true" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;" ></iframe></div>
  
  Embed code without Player: this code does not work in Rise within the embed field. My request is to check whether this code can be modified a little bit to make it work within Rise such that the video can play in a generic HTML video player
  
  <video controls><source src="https://aai.widen.net/content/ih89ggbljr/mp4/Sample-Video.mp4?quality=hd&u=fmtlib" type="video/mp4"></video>
  
  We were able to get the playback speed functionality working on a generic HTML page using this code. Please see the attached zip file containing the output HTML file and the text file with the HTML source code. Just not sure how to make it do the same within Rise.
  HelloBOT.zip1 KB
LeaSAgato
Staff
3 years ago
Hi Joseph, thanks for sharing your iframe codes. I tried this code and the video plays with the playback speed option. Is this what you need?

<iframe src="https://aai.widen.net/content/ih89ggbljr/mp4/Sample-Video.mp4?quality=hd&u=fmtlib" allowfullscreen frameborder="0" scrolling="no"></iframe>
JosephVincent-8
Community Member
3 years ago
Lea,

This is great! Thanks so much for trying out the embed code and providing the iframe code that works within Rise.

A follow-on request: Is there any way to show the control for Closed Caption (cc) as part of this code? I have uploaded a .srt file as part of the video. The captions are shown when the video is played in the native Widen player.
AlyssaGomez
Staff
3 years ago
Hi there, Joseph! Do you know if access to this video has been removed? It looks like Lea's embed code is no longer working. If you're able to restore the video, please let us know!
- JosephVincent-8
  Community Member
  3 years ago
  Hi Alyssa,
  
  It looks like the links to the original video were altered at some point in the last few days due to updates to the video hosting system.
  
  I'm reposting the updated links:
  
  URL:
  https://aai.widen.net/s/qgmhqr8wvr/sample-video
  
  Embed code (With native Widen player)
  <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;"><iframe src="https://aai.widen.net/view/video/qsuoz6epgz/Sample-Video.mp4?u=fmtlib" webkitallowfullscreen mozallowfullscreen allowfullscreen title="Video for "Sample Video.mp4"" frameborder="0" allowtransparency="true" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;" ></iframe></div>
  
  Embed code (without player)
  <video controls><source src="https://aai.widen.net/content/qsuoz6epgz/mp4/Sample-Video.mp4?quality=hd&u=fmtlib" type="video/mp4"></video>
  
  Based on Lea's last response - the above embed code (without player) can be wrapped in an iframe code as follows and it works in Rise. It shows the playback speed control. I want to check if it is possible to also show the closed caption (cc) controls along with it.
  
  <iframe src="https://aai.widen.net/content/qsuoz6epgz/mp4/Sample-Video.mp4?quality=hd&u=fmtlib" allowfullscreen frameborder="0" scrolling="no"></iframe>
  
  Many thanks for your continued support.
  - hazelB
    Staff
    3 years ago
    Hi Joseph! Thanks for sharing the new video links. Regarding your question about Closed Captions, this article might help: Rise-360-How-to-Add-Closed-Captioning-to-a-Video.
    
    Here's a video from Articulate's YouTube Channel about adding closed captions in Rise.
JoseTansengco
Staff
3 years ago
Hello Joseph,

Happy to chime in!

There isn't an iframe attribute that can toggle the Closed Captioning of a video file, but I found this helpful technical article which explains how to add captions and subtitles to an HTML5 video. If you're familiar with HTML5, or know someone who does, we recommend checking it out!