If you don't find an answer, please click here to post your question.
Reply
Occasional Advisor
Posts: 9
Registered: ‎08-20-2017
Accepted Solution

external buttons

How can i add external buttons in the ooyala player v4 and what is the parameter to be used for it


Accepted Solutions
Ooyalan
Posts: 14
Registered: ‎05-10-2016

Re: external buttons

[ Edited ]

Hi Iankurb,

 

Here are the steps to adding a button in the control bar:

1. Modify "skin.json" file in "/html5-skin/config/" of the downloaded source code to place the button in the control bar. The new button is added after the "fullscreen" button. See statements in bold.

 

  "buttons": {
    "desktopContent": [
      {"name":"playPause", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"volume", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":240 },
      {"name":"live", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45},
      {"name":"timeDuration", "location":"controlBar", "whenDoesNotFit":"drop", "minWidth":145 },
      {"name":"flexibleSpace", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":1 },
      {"name":"share", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"discovery", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"closedCaption", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"quality", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"logo", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":125 },
      {"name":"fullscreen", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"test", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"moreOptions", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 }
    ],
...

"icons": {
"play": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0068", "fontStyleClass": "oo-icon oo-icon-play-slick"},
"pause": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0067", "fontStyleClass": "oo-icon oo-icon-pause-slick"},
...
"warning": {"fontFamilyName": "fontawesome", "fontString": "\uf06a", "fontStyleClass": ""},
"auto": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0064", "fontStyleClass": "oo-icon oo-icon-system-auto"},
"test": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u006f", "fontStyleClass": "oo-icon oo-icon-share"}
}

 

Note that I am re-using the the "share" icon ("fontString": "\u006f").

 

2. Add the following code in "controlbar.js" file found in "/html5-skin/js/components/" of the downloaded source code to handle the click function. See statements in bold.

 

 

handleShareClick: function() {
this.props.controller.toggleShareScreen();
},

handleTestClick: function() {
alert("Click me!");
},

....

      "fullscreen": <a className="oo-fullscreen oo-control-bar-item"
        onClick={this.handleFullscreenClick} key="fullscreen">
        <Icon {...this.props} icon={fullscreenIcon} style={dynamicStyles.iconCharacter}
          onMouseOver={this.highlight} onMouseOut={this.removeHighlight}/>
      </a>,
      
      "test": <a className="oo-cc oo-control-bar-item"
        onClick={this.handleTestClick} key="test">
        <Icon {...this.props} icon="test" style={dynamicStyles.iconCharacter}
          onMouseOver={this.highlight} onMouseOut={this.removeHighlight}/>
      </a>,
...

With the above changes, this is how the control bar on the player will look like:

 

control_bar.png

 

The last icon is the one that is added. When you click this icon, it will pop up an alert showing "Click me!" message.

 

 

 

NOTE: The above example is meant for reference. Please do make any necessary modification and perform necessary testing to ensure it works for you and according to your requirement Do take note of the following regarding making the repository changes as stated in "http://help.ooyala.com/users/video-platform/concepts/pbv4_customize.html".

 

Customization_Support.png

I hope this helps.

 

Thanks,

Clara

 

 

View solution in original post

Highlighted
Ooyalan
Posts: 14
Registered: ‎05-10-2016

Re: external buttons

Hi Iankurb,

 

 

I have given the steps with the sample script that you can do in the previous comment. You need to download the source code first and made the changes.

 

Thanks,

Clara

View solution in original post


All Replies
Ooyalan
Posts: 14
Registered: ‎05-10-2016

Re: external buttons

Hi Iahkurb,

 

To add external buttons will require modification to the source code for the skin. The source code modification approach is documented in "Fork and modify the source code. (HTML5, iOS SDK, and Android SDK)" section in "http://help.ooyala.com/video-platform/concepts/pbv4_customize.html". Please refer to this section for full details. 


Depending on where you are adding the external button, you need to make script modification on the relevant script. For example, to remove the Quality button will require you to modify the script in "moreOptionsPanel.js" in the downloaded source code. 

I hope this information helps.

 

Thanks,

Clara

Occasional Advisor
Posts: 9
Registered: ‎08-20-2017

Re: external buttons

can you please help me with a eg. scripting for it

Ooyalan
Posts: 14
Registered: ‎05-10-2016

Re: external buttons

[ Edited ]

Hi Iankurb,

 

Here are the steps to adding a button in the control bar:

1. Modify "skin.json" file in "/html5-skin/config/" of the downloaded source code to place the button in the control bar. The new button is added after the "fullscreen" button. See statements in bold.

 

  "buttons": {
    "desktopContent": [
      {"name":"playPause", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"volume", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":240 },
      {"name":"live", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45},
      {"name":"timeDuration", "location":"controlBar", "whenDoesNotFit":"drop", "minWidth":145 },
      {"name":"flexibleSpace", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":1 },
      {"name":"share", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"discovery", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"closedCaption", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"quality", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"logo", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":125 },
      {"name":"fullscreen", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"test", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"moreOptions", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 }
    ],
...

"icons": {
"play": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0068", "fontStyleClass": "oo-icon oo-icon-play-slick"},
"pause": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0067", "fontStyleClass": "oo-icon oo-icon-pause-slick"},
...
"warning": {"fontFamilyName": "fontawesome", "fontString": "\uf06a", "fontStyleClass": ""},
"auto": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0064", "fontStyleClass": "oo-icon oo-icon-system-auto"},
"test": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u006f", "fontStyleClass": "oo-icon oo-icon-share"}
}

 

Note that I am re-using the the "share" icon ("fontString": "\u006f").

 

2. Add the following code in "controlbar.js" file found in "/html5-skin/js/components/" of the downloaded source code to handle the click function. See statements in bold.

 

 

handleShareClick: function() {
this.props.controller.toggleShareScreen();
},

handleTestClick: function() {
alert("Click me!");
},

....

      "fullscreen": <a className="oo-fullscreen oo-control-bar-item"
        onClick={this.handleFullscreenClick} key="fullscreen">
        <Icon {...this.props} icon={fullscreenIcon} style={dynamicStyles.iconCharacter}
          onMouseOver={this.highlight} onMouseOut={this.removeHighlight}/>
      </a>,
      
      "test": <a className="oo-cc oo-control-bar-item"
        onClick={this.handleTestClick} key="test">
        <Icon {...this.props} icon="test" style={dynamicStyles.iconCharacter}
          onMouseOver={this.highlight} onMouseOut={this.removeHighlight}/>
      </a>,
...

With the above changes, this is how the control bar on the player will look like:

 

control_bar.png

 

The last icon is the one that is added. When you click this icon, it will pop up an alert showing "Click me!" message.

 

 

 

NOTE: The above example is meant for reference. Please do make any necessary modification and perform necessary testing to ensure it works for you and according to your requirement Do take note of the following regarding making the repository changes as stated in "http://help.ooyala.com/users/video-platform/concepts/pbv4_customize.html".

 

Customization_Support.png

I hope this helps.

 

Thanks,

Clara

 

 

Occasional Advisor
Posts: 9
Registered: ‎08-20-2017

Re: external buttons

can you please write a sample scripting for it. if you dont mind

Occasional Advisor
Posts: 9
Registered: ‎08-20-2017

Re: external buttons


clarab wrote:

Hi Iankurb,

 

Here are the steps to adding a button in the control bar:

1. Modify "skin.json" file in "/html5-skin/config/" of the downloaded source code to place the button in the control bar. The new button is added after the "fullscreen" button. See statements in bold.

 

  "buttons": {
    "desktopContent": [
      {"name":"playPause", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"volume", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":240 },
      {"name":"live", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45},
      {"name":"timeDuration", "location":"controlBar", "whenDoesNotFit":"drop", "minWidth":145 },
      {"name":"flexibleSpace", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":1 },
      {"name":"share", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"discovery", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"closedCaption", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"quality", "location":"controlBar", "whenDoesNotFit":"moveToMoreOptions", "minWidth":45 },
      {"name":"logo", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":125 },
      {"name":"fullscreen", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"test", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 },
      {"name":"moreOptions", "location":"controlBar", "whenDoesNotFit":"keep", "minWidth":45 }
    ],
...

"icons": {
"play": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0068", "fontStyleClass": "oo-icon oo-icon-play-slick"},
"pause": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0067", "fontStyleClass": "oo-icon oo-icon-pause-slick"},
...
"warning": {"fontFamilyName": "fontawesome", "fontString": "\uf06a", "fontStyleClass": ""},
"auto": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u0064", "fontStyleClass": "oo-icon oo-icon-system-auto"},
"test": {"fontFamilyName": "ooyala-slick-type", "fontString": "\u006f", "fontStyleClass": "oo-icon oo-icon-share"}
}

 

Note that I am re-using the the "share" icon ("fontString": "\u006f").

 

2. Add the following code in "controlbar.js" file found in "/html5-skin/js/components/" of the downloaded source code to handle the click function. See statements in bold.

 

 

handleShareClick: function() {
this.props.controller.toggleShareScreen();
},
handleTestClick: function() {
alert("Click me!");
},

....

      "fullscreen": <a className="oo-fullscreen oo-control-bar-item"
        onClick={this.handleFullscreenClick} key="fullscreen">
        <Icon {...this.props} icon={fullscreenIcon} style={dynamicStyles.iconCharacter}
          onMouseOver={this.highlight} onMouseOut={this.removeHighlight}/>
      </a>,
      
      "test": <a className="oo-cc oo-control-bar-item"
        onClick={this.handleTestClick} key="test">
        <Icon {...this.props} icon="test" style={dynamicStyles.iconCharacter}
          onMouseOver={this.highlight} onMouseOut={this.removeHighlight}/>
      </a>,
...

With the above changes, this is how the control bar on the player will look like:

 

control_bar.png

 

The last icon is the one that is added. When you click this icon, it will pop up an alert showing "Click me!" message.

 

 

 

NOTE: The above example is meant for reference. Please do make any necessary modification and perform necessary testing to ensure it works for you and according to your requirement Do take note of the following regarding making the repository changes as stated in "http://help.ooyala.com/users/video-platform/concepts/pbv4_customize.html".

 

Customization_Support.png

I hope this helps.

 

Thanks,

Clara

 

 



can you please write a sample scripting for it. if you dont mind

Highlighted
Ooyalan
Posts: 14
Registered: ‎05-10-2016

Re: external buttons

Hi Iankurb,

 

 

I have given the steps with the sample script that you can do in the previous comment. You need to download the source code first and made the changes.

 

Thanks,

Clara