How to show vertical volume controller o...

Home
Archive

How to show vertical volume controller on control bar.

abhisheksa — Jul 23, 2015 11:48AM EDT

We have created own skin file and We are not unable to show volume controller on control bar.

We have two delivery Live and On Demand. Volume controller shows in live delivery. But is not showing in On Demand delivery.

<?xml version="1.0" encoding="utf-8" ?>
<skin target='6.0' name='OnDemandVideoSkin' author='skinAuthor'>
<settings>
<setting name="backcolor" value="0x000000" />
<setting name="frontcolor" value="0xeeeeee" />
<setting name="lightcolor" value="0xeeeeee" />
<setting name="screencolor" value="0x000000" />
</settings>

<components>
<component name="controlbar">
<settings>
<setting name="margin" value="0" />
<setting name="fontsize" value="11" />
<setting name="fontcolor" value="0xd2d2d2" />
<setting name="buttoncolor" value="0xEEEEEE" />
</settings>

<elements>
<element name="background" src="background.png" />
<element name="capLeft" src="divider.png" />
<element name="capRight" src="divider.png" />
<element name="divider" src="divider.png" />
<element name="blankButton" src="blankButton.png" />
<element name="fullscreenButton" src="fullscreenButton.png" />
<element name="fullscreenButtonOver" src="fullscreenButtonOver.png" />
<element name="pauseButton" src="pauseButton.png" />
<element name="pauseButtonOver" src="pauseButtonOver.png" />
<element name="playButton" src="playButton.png" />
<element name="playButtonOver" src="playButtonOver.png" />

<element name="elapsedBackground" src="spacer.png" />
<element name="durationBackground" src="spacer.png" />
<element name="timeSliderBuffer" src="timeSliderBuffer.png" />
<element name="timeSliderProgress" src="timeSliderProgress.png" />
<element name="timeSliderThumb" src="timeSliderThumb.png" />
<element name="timeSliderRail" src="timeSliderRail.png" />
<element name="timeSliderCue" src="timeSliderCue.png" />
<element name="normalscreenButton" src="normalscreenButton.png" />
<element name="normalscreenButtonOver" src="normalscreenButtonOver.png" />
<element name="ccButtonOff" src="ccButtonOff.png" />
<element name="ccButton" src="ccButton.png" />
<element name="muteButton" src="muteButton.png" />
<element name="muteButtonOver" src="muteButtonOver.png" />
<element name="unmuteButton" src="unmuteButton.png" />
<element name="unmuteButtonOver" src="unmuteButtonOver.png" />

<element name="volumeCapLeft" src="volumeCapLeft.png" />
<element name="volumeCapRight" src="volumeCapRight.png" />
<element name="volumeRail" src="volumeRail.png" />
<element name="volumeRailCapLeft" src="volumeRailCapLeft.png" />
<element name="volumeRailCapRight" src="volumeRailCapRight.png" />
<element name="volumeProgress" src="volumeProgress.png" />
<element name="volumeProgressCapLeft" src="volumeProgressCapLeft.png" />
<element name="volumeProgressCapRight" src="volumeProgressCapRight.png" />
</elements>
</component>

<component name="tooltip">
<settings>
<setting name="fontcase" value="normal" />
<setting name="fontcolor" value="0xacacac" />
<setting name="fontsize" value="11" />
<setting name="fontweight" value="bold" />
<setting name="activecolor" value="0xffffff" />
<setting name="overcolor" value="0xffffff" />
</settings>

<elements>
<element name="background" src="background.png" />
<element name="arrow" src="arrow.png" />
<element name="capTop" src="capTop.png" />
<element name="capBottom" src="capBottom.png" />
<element name="capLeft" src="capLeft.png" />
<element name="capRight" src="capRight.png" />
<element name="capTopLeft" src="capTopLeft.png" />
<element name="capTopRight" src="capTopRight.png" />
<element name="capBottomLeft" src="capBottomLeft.png" />
<element name="capBottomRight" src="capBottomRight.png" />

<element name="menuOption" src="menuOption.png" />
<element name="menuOptionActive" src="menuOptionActive.png" />

<element name="volumeCapTop" src="volumeCap.png" />
<element name="volumeCapBottom" src="volumeCap.png" />
<element name="volumeRailCapTop" src="volumeRailCapTop.png" />
<element name="volumeRailCapBottom" src="volumeRailCapBottom.png" />
<element name="volumeRail" src="volumeRail.png" />
<element name="volumeProgress" src="volumeProgress.png" />
<element name="volumeProgressCapTop" src="volumeProgressCapTop.png" />
<element name="volumeProgressCapBottom" src="volumeProgressCapBottom.png" />
<element name="volumeThumb" src="volumeThumb.png" />
</elements>
</component>

</components>

</skin>

6 Community Answers

Up Down

Cooper Reid

JW Player Support Agent

Jul 23, 2015 05:39PM EDT 0 rated :

Hmm, the volume bar is vertical by default. Can you elaborate on what you’re seeing?

Up Down

abhisheksa

User

Jul 25, 2015 01:54AM EDT 0 rated :

Hi Cooper

Thanks for the quick reply.
We are using JWPlayer and Wowza Media Server for our program. There are two basic stream in our program. First is LIVE and Second is OnDemand. The Live delivery streams on specific time by Wowza Media Server and JWPlayer plays it for the client users. The OnDemand delivery is available at all time. Client user comes and see the video.

Now, when the Live video stream, it is displaying the Vertical Volume bar on the tooltip of Volume control but when OnDemand video streams, client user is not able to see the Vertical Volume bar on tooltip.

We have designed custom skin for Live and OnDemand video. Both are same. The same skin I have attached into the first post. Can we include this dynamically with the help of Javascript? Can you please let me know the way I can assign that vertical volume bar on the tooltip of volume button.

Thanks

Up Down

abhisheksa

User

Jul 25, 2015 02:00AM EDT 0 rated :

Hi Cooper

We are using following version.
JWplayer Version : 6.7.4071
Previously, we updated the latest version but we were getting number of exceptions so we rollbacked to the JWplayer Version : 6.7.4071.

Please let me know if you need any other information.

Thanks

Up Down

Cooper Reid

JW Player Support Agent

Jul 28, 2015 01:20PM EDT 0 rated :

Can you please show me a page or a screenshot of what you’re describing? It sounds like you’ve simply removed the volume elements from your custom skin -
Cooper

Up Down

abhisheksa

User

Jul 29, 2015 01:24PM EDT 0 rated :

Hi Cooper

We are unable to attached screen shot. Can you give us your email id or any alternate, so that we can sent to you screen shot.

As we discuss to delivery.

Vertical volume bar shows in live streaming skin file when
mouse over sound button.
Vertical volume bar not showing in On demand streaming skin file when mouse over sound button.

Hear. We sending customized on demand skin file.

<?xml version="1.0" encoding="utf-8" ?>
<skin target='6.0' name='OnDemandVideoSkin' author='skinAuthor'>
<settings>
<setting name="backcolor" value="0x000000" />
<setting name="frontcolor" value="0xeeeeee" />
<setting name="lightcolor" value="0xeeeeee" />
<setting name="screencolor" value="0x000000" />
</settings>

<components>
<component name="controlbar">
<settings>
<setting name="margin" value="0" />
<setting name="fontsize" value="11" />
<setting name="fontcolor" value="0xd2d2d2" />
<setting name="buttoncolor" value="0xEEEEEE" />
</settings>

<elements>
<element name="background" src="background.png" />
<element name="capLeft" src="divider.png" />
<element name="capRight" src="divider.png" />
<element name="divider" src="divider.png" />
<element name="blankButton" src="blankButton.png" />
<element name="fullscreenButton" src="fullscreenButton.png" />
<element name="fullscreenButtonOver" src="fullscreenButtonOver.png" />
<element name="pauseButton" src="pauseButton.png" />
<element name="pauseButtonOver" src="pauseButtonOver.png" />
<element name="playButton" src="playButton.png" />
<element name="playButtonOver" src="playButtonOver.png" />

<element name="elapsedBackground" src="spacer.png" />
<element name="durationBackground" src="spacer.png" />
<element name="timeSliderBuffer" src="timeSliderBuffer.png" />
<element name="timeSliderProgress" src="timeSliderProgress.png" />
<element name="timeSliderThumb" src="timeSliderThumb.png" />
<element name="timeSliderRail" src="timeSliderRail.png" />
<element name="timeSliderCue" src="timeSliderCue.png" />
<element name="normalscreenButton" src="normalscreenButton.png" />
<element name="normalscreenButtonOver" src="normalscreenButtonOver.png" />
<element name="ccButtonOff" src="ccButtonOff.png" />
<element name="ccButton" src="ccButton.png" />
<element name="muteButton" src="muteButton.png" />
<element name="muteButtonOver" src="muteButtonOver.png" />
<element name="unmuteButton" src="unmuteButton.png" />
<element name="unmuteButtonOver" src="unmuteButtonOver.png" />

<element name="volumeCapLeft" src="volumeCapLeft.png" />
<element name="volumeCapRight" src="volumeCapRight.png" />
<element name="volumeRail" src="volumeRail.png" />
<element name="volumeRailCapLeft" src="volumeRailCapLeft.png" />
<element name="volumeRailCapRight" src="volumeRailCapRight.png" />
<element name="volumeProgress" src="volumeProgress.png" />
<element name="volumeProgressCapLeft" src="volumeProgressCapLeft.png" />
<element name="volumeProgressCapRight" src="volumeProgressCapRight.png" />
</elements>
</component>

<component name="tooltip">
<settings>
<setting name="fontcase" value="normal" />
<setting name="fontcolor" value="0xacacac" />
<setting name="fontsize" value="11" />
<setting name="fontweight" value="bold" />
<setting name="activecolor" value="0xffffff" />
<setting name="overcolor" value="0xffffff" />
</settings>

<elements>
<element name="background" src="background.png" />
<element name="arrow" src="arrow.png" />
<element name="capTop" src="capTop.png" />
<element name="capBottom" src="capBottom.png" />
<element name="capLeft" src="capLeft.png" />
<element name="capRight" src="capRight.png" />
<element name="capTopLeft" src="capTopLeft.png" />
<element name="capTopRight" src="capTopRight.png" />
<element name="capBottomLeft" src="capBottomLeft.png" />
<element name="capBottomRight" src="capBottomRight.png" />

<element name="menuOption" src="menuOption.png" />
<element name="menuOptionActive" src="menuOptionActive.png" />

<element name="volumeCapTop" src="volumeCap.png" />
<element name="volumeCapBottom" src="volumeCap.png" />
<element name="volumeRailCapTop" src="volumeRailCapTop.png" />
<element name="volumeRailCapBottom" src="volumeRailCapBottom.png" />
<element name="volumeRail" src="volumeRail.png" />
<element name="volumeProgress" src="volumeProgress.png" />
<element name="volumeProgressCapTop" src="volumeProgressCapTop.png" />
<element name="volumeProgressCapBottom" src="volumeProgressCapBottom.png" />
<element name="volumeThumb" src="volumeThumb.png" />
</elements>
</component>

</components>

</skin>

Up Down

Todd

JW Player Support Agent

Aug 04, 2015 06:39PM EDT 0 rated :

The latest version of our player, JW 7, has moved to a CSS skinning model. Perhaps you will find this much easier to customize that the XML in JW 6. Please read more about the JW 7 CSS skins at http://support.jwplayer.com/customer/portal/articles/1406968-using-jw-player-skins and http://support.jwplayer.com/customer/portal/articles/1412123-building-jw-player-skins and http://support.jwplayer.com/customer/portal/articles/2067702-skin-css-reference

This question has received the maximum number of answers.