Demo

HTML

<div id="cuezones_demo">
  <div class="container">
    <div class="background">
      <img class="bg ch0" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch0.jpg" />
      <img class="bg ch1" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch1.jpg" />
      <img class="bg ch2" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch2.jpg" />
      <img class="bg ch3" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch3.jpg" />
      <img class="bg ch4" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch4.jpg" />
      <img class="bg ch5" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch5.jpg" />
      <img class="bg ch6" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch6.jpg" />
      <img class="bg ch7" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch7.jpg" />
      <img class="bg ch8" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch8.jpg" />
      <img class="bg ch9" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch9.jpg" />
      <img class="bg ch10" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch10.jpg" />
      <img class="bg ch11" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch11.jpg" />
      <img class="bg ch12" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch12.jpg" />
    </div>
    <div id="title"></div>
    <div class="player">
      <video id="video1" data-settings="uid:demo-cue-zones-background-and-title-update; player-kit:3; initial-overlay-enable:false; fullmode-enable:false;" title="Demo: Cue Zones, Background image and title update" width="400" height="225" preload="none" poster="http://media.sublimevideo.net/vpa/ms_800.jpg">
        <source src="http://media.sublimevideo.net/vpa/ms_360p.mp4" />
        <source src="http://media.sublimevideo.net/vpa/ms_360p.webm" />
      </video>
    </div>
  </div>
</div>

JavaScript

sublime.ready(function() {

  // Every zone here ends when the next one begins, so in
  // this case we don"t need to specify the "to:" value.
  var cuezones = [{
    id: "ch1",
    from: 0,
    text: "Lava"
  }, {
    id: "ch2",
    from: 13.95,
    text: "Icebergs in Jökulsárlón"
  }, {
    id: "ch3",
    from: 19,
    text: "Plane wreck"
  }, {
    id: "ch4",
    from: 22.8,
    text: "Budir Church"
  }, {
    id: "ch5",
    from: 28.2,
    text: "Lupin field"
  }, {
    id: "ch6",
    from: 34.15,
    text: "Landmannalaugar"
  }, {
    id: "ch7",
    from: 38.15,
    text: "Lava field"
  }, {
    id: "ch8",
    from: 44.3,
    text: "Dyrhólaey Beach"
  }, {
    id: "ch9",
    from: 51.8,
    text: "West Fjords"
  }, {
    id: "ch10",
    from: 59.5,
    text: "Dyrhólaey Beach"
  }, {
    id: "ch11",
    from: 64.55,
    text: "Landmannalaugar"
  }, {
    id: "ch12",
    from: 69.4,
    text: "Hverfjall Crater"
  }];

  // Show default background image (the one displayed at the beginning, when the video is still stopped)
  $(".bg.ch0").fadeIn();

  // Cue Zones set up
  sublime.prepare("video1", function(player) {
    player.cuezones.addGroup({
      id: "places",
      cuezones: cuezones,
      onenter: function(player, groupId, cuezone, index) {
        $("img.bg." + cuezone.id).fadeIn("slow");
        $("#title").html(cuezone.text);
        $("#" + cuezone.id).addClass("active");
      },
      onexit: function(player, groupId, cuezone, index) {
        $("img.bg." + cuezone.id).fadeOut("slow");
        $("#" + cuezone.id).removeClass("active");
      }
    });
  });

});

// Adjust background img ratio
$(document).ready(function(){
  fixBackgroundImageSize();
});
$(window).resize(function(){
  fixBackgroundImageSize();
});

function fixBackgroundImageSize() {
  var container = $("#cuezones_demo");
  var background = $("#cuezones_demo .background");
  if (container.width()/container.height() < 16/9) {
    background.addClass("tall");
  } else {
    background.removeClass("tall");
  }
}

CSS

#cuezones_demo .container {
  width:100%;
  height:440px;
  overflow:hidden;
  position:relative;
  background-color:#000;
}

#cuezones_demo .background {
  opacity:0.8;
  -moz-opacity:0.8;
  filter:alpha(opacity=80);
}

#cuezones_demo img.bg {
  width:100%;
  height:auto;
  position: absolute;
  top:0;
  left:0;
  display:none;
}

#cuezones_demo .background.tall img.bg {
  width:auto;
  height:100%;
}

#title {
  font-family:Georgia, Times, serif;
  font-size:28px;
  font-style:italic;
  text-align:center;
  color:#fff;
  text-shadow:rgba(0,0,0,0.6) 0 1px 5px;
  position:absolute;
  top:45px;
  left:0;
  width:100%;
}

#cuezones_demo .player {
  position:relative;
  width:400px;
  height:225px;
  margin:110px auto;
  -webkit-box-shadow: rgba(0,0,0,0.7) 0px 2px 30px;
     -moz-box-shadow: rgba(0,0,0,0.7) 0px 2px 30px;
          box-shadow: rgba(0,0,0,0.7) 0px 2px 30px;
}