Chapters

Vimeo with chapters selection using the controls markers plugin

PlayerCode player.on("cuepoint", function (e) { const cue = e.data; if (cue.chapters) { console.log("Cuepoint Marker ", cue); } }) .on("markerselect", function (e) { console.log("Marker ", e.data); }).on("chapter-markers", function(e) { console.log("Markers ", e.data); });

Chapters

Vimeo Chapters available to Pro users and above have the opportunity to edit chapter markers on their videos. With the use of the Controls Markers plugin. The chapter information can be displayed on the controlbar and controlled to seek to cuepoints from a Chapters menu or an external Html list.

    
  <div class="flex flex-col w-full">
          <div id="chapters" class=""></div>

  </div>
  <script type="text/javascript">
  	var player = flowplayer("#chapters", {
    "controlsmarkers": {
        "container": "#markers-list",
        "menu": true
    },
    "src": [
        {
            "src": "https://vimeo.com/399759138",
            "type": "video/vimeo"
        }
    ],
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw",
    "vimeo": {
        "chapters": true,
        "pro": true
    }
});
  </script>