Skip to main content

Custom HTML Element

New Feature (v6.1.0): Custom HTML element wms-controls.

Create Controls In HTML​

<!-- Create controls with single Play button -->
<wms-controls id="controlsId" single-play></wms-controls>

<!-- Create controls with single Play/Stop toggle button -->
<wms-controls id="controlsId" single-play-stop play-label="Play" stopLabel="Stop"></wms-controls>

<!-- Create controls with Play and Stop buttons, with custom labels -->
<wms-controls id="controlsId" play-stop play-label="▶" stop-label="⏹"></wms-controls>

<!-- Create controls with Play, Pause and Stop buttons -->
<wms-controls id="controlsId" play-pause-stop></wms-controls>
💡
Default labels if omitted are "Play", "Pause" and "Stop".
💡
Library v6.3.4 fixed attribute names to kebab-case (e.g. singlePlay =>single-play).Old attribute names have no effect.

Bind Controls In JavaScript​

<script>
    // Bind document to controls
    doc.bindElement("controlsId");

    // Use default player and bind to controls (since v6.3.0)
    const player = doc.getDefaultPlayer();
    player.bindElement("controlsId");

    // Create new player and bind to controls (since v6.3.0)
    const player = new Score.Player(doc);
    player.bindElement("controlsId");
</script>
New Feature (v6.3.0): doc.getDefaultPlayer() and player.bindElement().

Live Example​