<div>
  <dotlottie-player
    id="player-control-example"
    src="https://lottie.host/your-animation-id.lottie"
    <!--
    Replace
    with
    your
    animation
    URL
    --
  >
    style="width: 300px; height: 300px; display: block; margin: 0 auto;" >
  </dotlottie-player>
  <div style="text-align: center; margin-top: 10px;">
    <button id="playButton">Play</button>
    <button id="pauseButton">Pause</button>
    <button id="stopButton">Stop</button>
  </div>
</div>

<script>
  const playerElement = document.getElementById("player-control-example");
  const playButton = document.getElementById("playButton");
  const pauseButton = document.getElementById("pauseButton");
  const stopButton = document.getElementById("stopButton");
  let dotLottie = null; // Variable to hold the core instance

  // Wait for the component to load the animation
  playerElement.addEventListener("load", () => {
    console.log("Player loaded, dotLottie instance should be available.");
    dotLottie = playerElement.dotLottie; // Get the core instance

    if (!dotLottie) {
      console.error("Failed to get dotLottie instance after load!");
      return;
    }

    // Enable buttons now that the instance is ready
    playButton.disabled = false;
    pauseButton.disabled = false;
    stopButton.disabled = false;

    // Optional: Add listeners to update button states if needed
    dotLottie.addEventListener("play", () => console.log("Playback started"));
    dotLottie.addEventListener("pause", () => console.log("Playback paused"));
    dotLottie.addEventListener("stop", () => console.log("Playback stopped"));
  });

  playerElement.addEventListener("error", (e) => {
    console.error("Player encountered an error:", e);
    // Disable buttons on error
    playButton.disabled = true;
    pauseButton.disabled = true;
    stopButton.disabled = true;
  });

  // Initial button states (disabled until load)
  playButton.disabled = true;
  pauseButton.disabled = true;
  stopButton.disabled = true;

  // Button click handlers
  playButton.addEventListener("click", () => {
    if (dotLottie) {
      dotLottie.play();
    }
  });

  pauseButton.addEventListener("click", () => {
    if (dotLottie) {
      dotLottie.pause();
    }
  });

  stopButton.addEventListener("click", () => {
    if (dotLottie) {
      dotLottie.stop();
    }
  });
</script>

<dotlottie-player
  id="player-event-example"
  src="https://lottie.host/your-animation-id.lottie"
  <!--
  Replace
  with
  your
  animation
  URL
  --
>
  autoplay loop style="width: 200px; height: 200px; display: block; margin: 10px
  auto;" >
</dotlottie-player>
<div
  id="eventLog"
  style="border: 1px solid #eee; padding: 10px; height: 100px; overflow-y: scroll;"
>
  Event log:
</div>

<script>
  const playerEventElement = document.getElementById("player-event-example");
  const eventLog = document.getElementById("eventLog");
  let dotLottieEvents = null;

  function logEvent(message) {
    console.log(message);
    const entry = document.createElement("p");
    entry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
    eventLog.appendChild(entry);
    eventLog.scrollTop = eventLog.scrollHeight; // Scroll to bottom
  }

  function handleLoad() {
    logEvent("Animation loaded");
  }
  function handlePlay() {
    logEvent("Playback started");
  }
  function handlePause() {
    logEvent("Playback paused");
  }
  function handleComplete() {
    logEvent("Playback completed (looping)");
  }
  function handleLoop() {
    logEvent("Animation looped");
  }
  function handleStop() {
    logEvent("Playback stopped");
  }
  function handleError(event) {
    logEvent(`Error loading animation: ${event}`);
    console.error("Animation error:", event);
  }

  function setupEventListeners() {
    if (dotLottieEvents) {
      dotLottieEvents.addEventListener("load", handleLoad);
      dotLottieEvents.addEventListener("play", handlePlay);
      dotLottieEvents.addEventListener("pause", handlePause);
      dotLottieEvents.addEventListener("complete", handleComplete);
      dotLottieEvents.addEventListener("loop", handleLoop);
      dotLottieEvents.addEventListener("stop", handleStop);
      dotLottieEvents.addEventListener("loadError", handleError);
      logEvent("Event listeners attached to dotLottie instance.");
    } else {
      logEvent("Failed to attach listeners: dotLottie instance not ready.");
    }
  }

  // Wait for the player's load event to ensure the instance is ready
  playerEventElement.addEventListener("load", () => {
    logEvent("Component 'load' event fired.");
    dotLottieEvents = playerEventElement.dotLottie;
    if (dotLottieEvents) {
      setupEventListeners();
      // Check initial state if needed
      logEvent(`Initial state: isPlaying=${dotLottieEvents.isPlaying}`);
    } else {
      logEvent("dotLottie instance not found after component 'load'.");
    }
  });

  playerEventElement.addEventListener("error", (e) => {
    logEvent(`Component 'error' event fired: ${e}`);
  });

  // Note: Proper cleanup (removeEventListeners) would be needed in a real application
  // when the element is removed from the DOM.
</script>