videoplayer.html

<m-group sx="0.4" sy="0.4" ry="-90">
  <m-video
    y="7"
    width="25"
    rx="0"
    ry="0"
    start-time="0"
    loop="true"
    src="https://public.mml.io/charge.mp4"
  >
    <m-label
      onclick="restart(event.currentTarget.parentNode)"
      content="restart"
      x="10"
      y="-6"
      font-size="100"
      width="4.5"
      alignment="center"
      height="1.5"
      color="#cccccc"
    ></m-label>
    <m-label
      onclick="pause(event.currentTarget.parentNode)"
      content="pause"
      x="-10"
      y="-6"
      font-size="100"
      width="4.5"
      alignment="center"
      height="1.5"
      color="#cccccc"
    ></m-label>
    <m-label
      onclick="unpause(event.currentTarget.parentNode)"
      content="unpause"
      x="-5"
      y="-6"
      font-size="100"
      width="4.5"
      alignment="center"
      height="1.5"
      color="#cccccc"
    ></m-label>
    <m-label
      onclick="resume(event.currentTarget.parentNode)"
      content="resume"
      x="5"
      y="-6"
      font-size="100"
      width="4.5"
      alignment="center"
      height="1.5"
      color="#cccccc"
    ></m-label>
    <m-label
      onclick="toggleEnabled(event.currentTarget.parentNode)"
      content="enable"
      x="0"
      y="-6"
      font-size="100"
      width="4.5"
      alignment="center"
      height="1.5"
      color="#cccccc"
    ></m-label>
    <m-label
      class="attributes-label"
      content="attrs:"
      x="0"
      y="6.5"
      padding="20"
      font-size="50"
      width="25"
      alignment="center"
      height="2"
      color="green"
      font-color="white"
    ></m-label>
  </m-video>
</m-group>
<script>
  function updateAttributesLabel(videoTag) {
    const attributes = [];
    for (const attr of videoTag.getAttributeNames()) {
      const val = videoTag.getAttribute(attr);
      attributes.push(`${attr}="${val}"`);
    }
    const attributesLabel = videoTag.querySelector(".attributes-label");
    if (attributesLabel) {
      attributesLabel.setAttribute("content", `<m-video ${attributes.join(" ")}></m-video>`);
    }
  }

  function restart(videoTag) {
    videoTag.setAttribute("pause-time", document.timeline.currentTime);
    videoTag.setAttribute("start-time", document.timeline.currentTime);
    videoTag.removeAttribute("pause-time");
    updateAttributesLabel(videoTag);
  }

  function toggleEnabled(videoTag) {
    const enabled = videoTag.getAttribute("enabled") !== "false";
    videoTag.setAttribute("enabled", (!enabled).toString());
    updateAttributesLabel(videoTag);
  }

  function pause(videoTag) {
    videoTag.setAttribute("pause-time", document.timeline.currentTime);
    updateAttributesLabel(videoTag);
  }

  function unpause(videoTag) {
    videoTag.removeAttribute("pause-time");
    updateAttributesLabel(videoTag);
  }

  function resume(videoTag) {
    if (!videoTag.hasAttribute("pause-time")) return;
    const startTime = parseFloat(videoTag.getAttribute("start-time")) || 0;
    const pauseTime = parseFloat(videoTag.getAttribute("pause-time")) || 0;
    const playedDuration = pauseTime - startTime;
    const newStartTime = document.timeline.currentTime - playedDuration;
    videoTag.removeAttribute("pause-time");
    videoTag.setAttribute("start-time", newStartTime);
    updateAttributesLabel(videoTag);
  }

  for (const video of document.querySelectorAll("m-video")) {
    updateAttributesLabel(video);
  }
</script>