If you don't find an answer, please click here to post your question.
Reply
Frequent Advisor
Posts: 46
Registered: ‎07-28-2016

Re: change volume color from white to other color

Still i didn't get any solution for this question.
Ooyalan
Posts: 31
Registered: ‎06-23-2015

Re: change volume color from white to other color

Hello,

In order to change the color of the volume slider in the mobile apps, we could make use of the Ooyala Skin SDK.Below is the sample for used for demostrating UI changes. Instructions are provided in the README.md for building the app with changes in styles(UI).

 

https://github.com/ooyala/ios-sample-apps/tree/stable/OoyalaSkinSampleApp

 

I am not able to locate the specific code which is managing the color of the volume slider. I have requested our engineer team member to provide their insights. We will keep you posted. Thank you!

Regards,
Vaidee

Highlighted
Frequent Advisor
Posts: 46
Registered: ‎07-28-2016

Re: change volume color from white to other color

We have skin.json if we use this skin.json it works well in web apps but for mobile app the v4 skin layer not changing and also crashing.

 

Below is the skin.json

{
"general": {
"watermark": { "imageResource": { "url": "//player.ooyala.com/static/v4/stable/4.3.3/skin-plugin/assets/images/ooyala-watermark.png", "androidResource": "logo", "iosResource": "logo" } },
"loadingImage": { "imageResource": { "url": "//player.ooyala.com/static/v4/stable/4.3.3/skin-plugin/assets/images/loader_svg.svg" } }
},
"localization": {
"defaultLanguage": "en",
"availableLanguageFile": [{
"language": "en",
"languageFile": "//player.ooyala.com/static/v4/stable/4.3.3/skin-plugin/en.json",
"androidResource": "skin-config/en.json",
"iosResource": "en"
}, {
"language": "es",
"languageFile": "//player.ooyala.com/static/v4/stable/4.3.3/skin-plugin/es.json",
"androidResource": "skin-config/es.json",
"iosResource": "es"
}, {
"language": "zh",
"languageFile": "//player.ooyala.com/static/v4/stable/4.3.3/skin-plugin/zh.json",
"androidResource": "skin-config/zh.json",
"iosResource": "zh"
}]
},
"responsive": {
"breakpoints": {
"xs": { "id": "xs", "name": "oo-xsmall", "maxWidth": 559, "multiplier": 0.7 },
"sm": { "id": "sm", "name": "oo-small", "minWidth": 560, "maxWidth": 839, "multiplier": 1 },
"md": { "id": "md", "name": "oo-medium", "minWidth": 840, "maxWidth": 1279, "multiplier": 1 },
"lg": { "id": "lg", "name": "oo-large", "minWidth": 1280, "multiplier": 1.2 }
},
"aspectRatio": "auto"
},
"startScreen": {
"promoImageSize": "default",
"showPlayButton": true,
"playButtonPosition": "bottomleft",
"playIconStyle": {
"color": "white",
"opacity": 1
},
"showTitle": true,
"showDescription": true,
"titleFont": {
"color": "white"
},
"descriptionFont": {
"color": "white"
},
"infoPanelPosition": "bottomleft",
"showPromo": true
},
"pauseScreen": {
"showPauseIcon": true,
"pauseIconPosition": "center",
"PauseIconStyle": {
"color": "white",
"opacity": 1
},
"showTitle": true,
"showDescription": true,
"infoPanelPosition": "bottomleft",
"screenToShowOnPause": "default"
},
"endScreen": {
"screenToShowOnEnd": "discovery",
"showReplayButton": false,
"replayIconStyle": {
"color": "white",
"opacity": 1
}
},
"adScreen": {
"showAdMarquee": true,
"showControlBar": false
},
"discoveryScreen": {
"panelTitle": {
"titleFont": {
"fontSize": 28,
"fontFamily": "Roboto Condensed",
"color": "white"
}
},
"contentTitle": {
"show": true,
"font": {
"fontSize": 22,
"fontFamily": "Roboto Condensed",
"color": "white"
}
},
"contentDuration": {
"show": true,
"font": {
"fontSize": 12,
"fontFamily": "Arial-BoldMT",
"color": "white"
}
},
"showCountDownTimerOnEndScreen": true,
"countDownTime": "10"
},
"shareScreen": {
"embed": {
"source": "<iframe width='640' height='480' frameborder='0' allowfullscreen src='//player.ooyala.com/static/v4/stable/4.3.3/skin-plugin/iframe.html?ec=<ASSET_ID>&pbid=<PLAYER_ID>&pcode=<PUBLISHER_ID>'></iframe>"
}
},
"moreOptionsScreen": {
"brightOpacity": 1.0,
"darkOpacity": 0.4,
"iconSize": 30,
"color": "white",
"iconStyle": {
"active": {
"color": "#FFFFFF",
"opacity": 1
},
"inactive": {
"color": "#FFFFFF",
"opacity": 0.6
}
}
},
"closedCaptionOptions": {
"defaultEnabled": true,
"defaultLanguage": "en",
"availableLanguages": []
},
"upNext": {
"showUpNext": true,
"timeToShow": "10"
},
"controlBar": {
"volumeControl": {
"color": "#FFFFFF"
},
"iconStyle": {
"active": {
"color": "#FFFFFF",
"opacity": 1
},
"inactive": {
"color": "#FFFFFF",
"opacity": 0.6
}
},
"autoHide": false,
"height": 60,
"watermark": {
"imageResource": {},
"clickUrl": "http://www.ooyala.com/",
"width": 500,
"height": 81
},
"adScrubberBar": {
"backgroundColor": "rgba(175,175,175,1)",
"bufferedColor": "rgba(127,127,127,0)",
"playedColor": "rgba(255,0,0,1)"
},
"scrubberBar": {
"backgroundColor": "blue",
"bufferedColor": "green",
"playedColor": "yellow"
}
},
"live": {
"forceDvrDisabled": false
},
"buttons": {
"desktopContent": [
{ "name": "playPause", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 },

{ "name": "live", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 },
{ "name": "timeDuration", "location": "controlBar", "whenDoesNotFit": "drop", "minWidth": 145 },
{ "name": "flexibleSpace", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 1 },

{ "name": "discovery", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 35 },
{ "name": "closedCaption", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 35 },
{ "name": "quality", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 35 },

{ "name": "fullscreen", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 },
{ "name": "moreOptions", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 }
],
"desktopAd": [
{ "name": "playPause", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 },

{ "name": "flexibleSpace", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 1 },
{ "name": "watermark", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 130 },
{ "name": "fullscreen", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 },
{ "name": "moreOptions", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 }
],
"mobileContent": [

{ "name": "live", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 35 },
{ "name": "timeDuration", "location": "controlBar", "whenDoesNotFit": "drop", "minWidth": 100 },
{ "name": "flexibleSpace", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 1 },

{ "name": "discovery", "location": "moreOptions" },
{ "name": "closedCaption", "location": "moreOptions" },
{ "name": "fullscreen", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 40 },
{ "name": "moreOptions", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 40 }
],
"mobileAd": [

{ "name": "flexibleSpace", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 1 },
{ "name": "fullscreen", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 40 },
{ "name": "moreOptions", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 40 }
]
},
"icons": {
"play": { "fontFamilyName": "alice", "fontString": "\u0068", "fontStyleClass": "oo-icon oo-icon-play" },
"pause": { "fontFamilyName": "alice", "fontString": "\u0067", "fontStyleClass": "oo-icon oo-icon-pause" },
"volume": { "fontFamilyName": "alice", "fontString": "\u0062", "fontStyleClass": "oo-icon oo-icon-volume-mobile" },
"volumeOff": { "fontFamilyName": "alice", "fontString": "\u0070", "fontStyleClass": "oo-icon oo-icon-volume-mobile-mute" },
"expand": { "fontFamilyName": "alice", "fontString": "\u0069", "fontStyleClass": "oo-icon oo-icon-resize-large" },
"compress": { "fontFamilyName": "alice", "fontString": "\u006a", "fontStyleClass": "oo-icon oo-icon-resize-small" },
"ellipsis": { "fontFamilyName": "alice", "fontString": "\u0066", "fontStyleClass": "oo-icon oo-icon-menu" },
"replay": { "fontFamilyName": "alice", "fontString": "\u0063", "fontStyleClass": "oo-icon oo-icon-upnext-replay" },
"share": { "fontFamilyName": "alice", "fontString": "\u006f", "fontStyleClass": "oo-icon oo-icon-topmenu-share" },
"cc": { "fontFamilyName": "alice", "fontString": "\u006B", "fontStyleClass": "oo-icon oo-icon-topmenu-cc" },
"discovery": { "fontFamilyName": "alice", "fontString": "\u006C", "fontStyleClass": "oo-icon oo-icon-topmenu-discovery" },
"quality": { "fontFamilyName": "alice", "fontString": "\u006D", "fontStyleClass": "oo-icon oo-icon-topmenu-quality" },
"setting": { "fontFamilyName": "alice", "fontString": "\u006E", "fontStyleClass": "oo-icon oo-icon-topmenu-settings" },
"dismiss": { "fontFamilyName": "alice", "fontString": "\u0065", "fontStyleClass": "oo-icon oo-icon-close" },
"toggleOn": { "fontFamilyName": "fontawesome", "fontString": "\uf205", "fontStyleClass": "" },
"toggleOff": { "fontFamilyName": "fontawesome", "fontString": "\uf204", "fontStyleClass": "" },
"left": { "fontFamilyName": "alice", "fontString": "\u0072", "fontStyleClass": "oo-icon oo-icon-left" },
"right": { "fontFamilyName": "alice", "fontString": "\u0073", "fontStyleClass": "oo-icon oo-icon-right" },
"learn": { "fontFamilyName": "alice", "fontString": "\u0074", "fontStyleClass": "oo-icon oo-icon-learn" },
"skip": { "fontFamilyName": "alice", "fontString": "\u0075", "fontStyleClass": "oo-icon oo-icon-skip" },
"warning": { "fontFamilyName": "fontawesome", "fontString": "\uf06a", "fontStyleClass": "" },
"auto": { "fontFamilyName": "alice", "fontString": "\u0064", "fontStyleClass": "oo-icon oo-icon-auto" }
}
}