Skinning

About

The StreamOne Player can be skinned using a simple xml based skinning file. This xml file also controls some of the player’s behaviour.

Part 1: Properties

First, open the skin and the properties node, then specify all of the desired properties and close the properties node:

<skin>
   <properties>
      <property name="controls_inside">true</property>
      <!-- etc... -->
   </properties>

The following is an overview of all possible properties:

Properties Value
controls_inside ‘true’ if controls should be placed on top of the video, ‘false’ if they should be at the bottom beneath the video
controls_inside_fullscreen same as controls_inside, but in fullscreen mode
controls_autohide ‘true’ if controls should autohide while playing, otherwide ‘false’
controls_autohide_fullscreen same as controls_autohide, but in fullscreen mode
controls_autohide_after e.g. ‘2000’; autohide after 2000 milliseconds (2 seconds)
button_default_disabled_filter transparency for disabled buttons, in json: {“alpha”:0.25} (25% opaque)
button_default_enabled_filter transparency for enabled buttons, in json: {“alpha”:1} (100% opaque)
video_click_play_pause ‘true’ if clicking the video should toggle play/pause, ‘false’ if it shouldn’t
share_networks enabled sharing options (comma-separated, no spaces): embedCode,url,twitter,linkedin,facebook,hyves

Part 2: Plugins

In the StreamOne Player, various functions are controlled through plugins:

  • start_button = Behaviour of the big start button in the player
  • notification = Layout of notifications (such as error messages)
  • subtitles = Behaviour and layout of subtitles
  • google_ima = Layout of Google IMA (such as skipping ads layout)
  • share = Layout of sharing options
  • loading = Layout of loading/buffering screen
  • related = Layout of related contents

In the plugin properties you can define when the plugin should be loaded. For example for the loading screen:

<properties events="bufferingStateEntered,trackChanged,locationChanged,seeking,loading"
backgroundClose="true" closeEvents="playingStateEntered,playheadUpdate" pauseVideo="false"/>

Plugins should be specified as follows:

<plugins>
   <plugin name="loading" type="loading">
   <elements>
      <element name="background" type="background" image="//tweakimg.net/g/video/player/plugin-background.png"/>
      <element name="icon" type="image" image="//tweakimg.net/g/video/player/loading.png" width="90" height="90">
         <properties rotation="30" rotationSpeed="100"/>
      </element>
   </elements>
</plugins>

For more information about other plugins and their workings, please see our example skin bundled with the default player. Please note google_ima is loaded through the XSPF playlist.

Part 3: Formats

This part of the skin xml defines the formats that are used for displaying durations and certain texts. Only displayed in this example xml because options are reasonably static:

<formats>
   <format name="position">{position} / {duration}</format>
   <format name="time">%M:%S</format>
   <format name="google_ima_skip">Skip ad in %M:%S seconds</format>
   <format name="google_ima_skipable">Skip ad now</format>
   <format name="google_ima_countdown">This ad will close in %M:%S seconds</format>
</formats>

Options for displaying times/durations: %H:%M:%S.%ms

Part 4: Elements

Elements define behaviour of controls (see Part 5), and their layout. Because all elements are reasonably unique, we refer you to our example skin bundled with the default player.

It is possible to add your own buttons by creating extra elements, for example to add a button to expand the player screen size:

<element name="expand_button" type="toggle_button">
   <action name="" type="event" event="expandStateChanged" checkToggleExternal="videoGetExpandState"/>
   <element name="button" type="button" image="//tweakimg.net/g/video/player/expand.png" imageOver="//tweakimg.net/g/video/player/expand_hover.png"/>
   <element name="button_active" type="button" image="//tweakimg.net/g/video/player/shrink.png" imageOver="//tweakimg.net/g/video/player/shrink_hover.png"/>
</element>

Part 5: Controls

In the controls part, the controlbar layout is specified per row. All controls are optional. The progress bar row is specified as follows:

<controls>
   <row height="10">
      <element name="progress_bar"/>
   </row>

Next, the controlbar buttons are specified in the second row:

<!-- example continues -->
   <row background="controls_background" height="25">
      <element name="play_pause_button"/>
      <element name="divider"/>
      <element name="volume_button"/>
      <element name="divider"/>
      <element name="position"/>
      <element name="spacefiller"/>
      <element name="divider"/>
      <element name="quality_button"/>
      <element name="divider"/>
      <element name="expand_button"/> <!-- remember the element we added? -->
      <element name="divider"/>
      <element name="fullscreen_button"/>
   </row>
</controls>

The following elements are supported by default (see Part 2: Elements):

Element name About
divider Dividing image such as a narrow vertical line
cc_button Button for closed captioning and subtitles
play_pause_button Play/pause button
previous_button Previous button (if playlist is longer than 1 item)
next_button Next button (if playlist is longer than 1 item)
volume_button Volume button
position Position (text)
spacefiller Filler, separating the left part from the right part of the control bar
quality_button Quality selection (uses playlist s1:label)
fullscreen_button Fullscreen toggle