Mid roll clip · Flowplayer

 

<head/>

<script>

flowplayer.conf.cuepoints = [0.3, 5, 10];

flowplayer(function (api) {

  var seekable = !/iPad/.test(navigator.userAgent);
     doresume = false;

   api.bind("cuepoint", function (e, api, cuepoint) {

      var bauhaus = /bauhaus/.test(api.video.src);

      function resume(api) {
         api.seek(5.2);
         $(".fp-ui").show();
         $(".info").text("feature resumed at 5.2 seconds");
         doresume = false;
      }

      if (cuepoint.time === 0.3 && !seekable && bauhaus && doresume) {

         // iPad (+others?) refuse to seek in play callback
         resume(api);

      } else if (cuepoint.time === 5 && bauhaus) {

         api.play([
            {mp4: "http://stream.flowplayer.org/functional/624x260.mp4"},
            {webm: "http://stream.flowplayer.org/functional/624x260.webm"},
            {webm: "http://stream.flowplayer.org/functional/624x260.webm"},
            {flash: "mp4:functional/624x260"}
         ]);

         $(".fp-ui").hide();
         $(".info").text("playing 10 second midroll at " + cuepoint.time + " seconds");
         doresume = true;

      } else if (cuepoint.time === 10 && /functional/.test(api.video.src)) {

         api.play([
            {mp4: "http://stream.flowplayer.org/bauhaus/624x260.mp4"},
            {webm: "http://stream.flowplayer.org/bauhaus/624x260.webm"},
            {webm: "http://stream.flowplayer.org/bauhaus/624x260.webm"},
            {flash: "mp4:bauhaus/624x260"}
         ], function (e, api) {

            if (seekable) {
               resume(api);
            }

         });
      }
   });
});