Electroteque Media

Markers Editor API

Editing , adding, removing markers

Chapters

This example demonstrates using the javascript api to dynamically add, remove and update the markers. Markers are automatically added and removed to the player cuepoints. The api methods are added as extensions to the player.

The markers can be moved by selecting and dragging to the new cuepoint time. The markers can be deleted by double clicking.

The framework example is using Alpine JS. 

function app() {
  return {

    init() {
      //do init stuff here
    },
    addMarker(e) {
        player.addMarker({startTime: player.video.time, text: "TEST"});
    },
    addMarkers(e) {
        player.addMarkers([
            { startTime: 10, text: "cue1" },
            { startTime: 100, text: "cue2" },
            { startTime: 610, text: "cue2" }
        ]);
    },
    setMarkers(e) {
        player.setMarkers([
            { startTime: 120, text: "cue1", data: { color: "#FFFFFF"} },
            { startTime: 160, text: "cue2", data: { color: "#CCCCCC"} },
            { startTime: 200, text: "cue3", data: { color: "#999999"} }
        ]);
    },
    removeMarkers(e) {
        player.removeMarkers([120,300,510]);
    },
    getMarkers(e) {
        console.log("Markers: ", player.getMarkers());
    },
    removeMarker(e) {
        player.removeMarker(50);
    },
    prevMarker(e) {
        player.prevMarker();
    },
    nextMarker(e) {
        player.nextMarker();
    },
    getMarkersVTT(e) {
        console.log(player.getMarkersVTT());
    }
  }
}

Include editor plugin files

<script src="/flowplayer/flowplayer7/controls-markers/js/controls-markers-editor-7.2.7.js"></script>
<link rel="stylesheet" href="/flowplayer/flowplayer7/controls-markers/css/controls-markers.min.css" type="text/css" />

Customising editor cue bars

Cue bars are added between cues which can be styled using the color data property

{ "startTime": 120, "text": "cue1", "data": { "color": "#FFFFFF"} }

    
   <div class="flex w-full">
          <div id="editor" class="cue-editor"></div>
  </div>

  <script type="text/javascript">

  	var player = flowplayer("#editor", {
    "clip": {
        "sources": [
            {
                "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.webm",
                "type": "video/webm"
            },
            {
                "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.mp4",
                "type": "video/mp4"
            },
            {
                "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.ogv",
                "type": "video/ogg"
            }
        ]
    },
    "marker": {
        "container": "#markers-api-list"
    },
    "share": false
});

  </script>