Electroteque Media

Alternate Styling

Alternating colors and height example

This example demonstrates configuring the plugin with alternating style and colors to display variation.

Alternating Style Config

The style name alternate can be configured like so: 

.jw-cue.alternate { background-color:#FFFFFF !important; }

Configuring the selector

{
  "marker": {
    "alternate": "alternate"
  }
}

    <div class="flex w-full h-auto my-auto">
          <div id="alternate-style" class=""></div>
  </div>

  <script type="text/javascript">

  	var player = jwplayer("alternate-style").setup({
    "aspectratio": "16:9",
    "markers": [
        {
            "endTime": 180,
            "startTime": 120,
            "text": "Marker 1"
        },
        {
            "endTime": 360,
            "startTime": 300,
            "text": "Marker 2"
        },
        {
            "endTime": 570,
            "startTime": 510,
            "text": "Marker 3"
        }
    ],
    "playbackRateControls": true,
    "plugins": {
        "../../js/videomarkers-8.1.0.js": {
            "alternate": "alternate"
        }
    },
    "sources": [
        {
            "file": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.webm",
            "type": "webm"
        },
        {
            "file": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.mp4",
            "type": "mp4"
        }
    ],
    "width": "100%"
});

  </script>