Overview

Video is a basic html only implementation of a video player

Options

Basic usage

Size

By default ds-video will display at a maximum width of 800px, or narrower if it’s containing element is smaller.

The following css variables can be set using css, a style tag or javascript to control the default width:

Custom size

Controls

Control bar

If you apply the ds-video element to a container element, you can include a ds-switch element with the class __controls which will automatically be treated as a control bar positioned top left of the video.

To implement the control bar controls will require javascript. The following example demonstrates adding display controls:

const videoComponents = document.querySelectorAll('[class*="ds-video"]');
videoComponents.forEach((videoComponent) => {
  const videoControls = videoComponent.querySelectorAll(
    '[class*="__controls"]'
  );

  if (videoControls.length > 0) {
    const videoPlayer = videoComponent.querySelector("video");
    videoControls.forEach((input) => {
      input.addEventListener("change", (e) => {
        let mode = e.target.value;
        // Remove existing widescreen if set
        videoComponent.classList.remove("--full-width");
        if (mode === "fullscreen") {
          // Trigger fullscreen and reset controls
          videoPlayer.requestFullscreen({ navigationUI: "show" });
          videoControls[0].checked = true;
        } else if (mode === "picture-in-picture") {
          // Trigger picture-in-picture and reset controls
          videoPlayer.requestPictureInPicture();
          videoControls[0].checked = true;
        } else if (mode === "wide") {
          // Trigger wide screen
          videoComponent.classList.add("--full-width");
        }
      });
    });
    videoPlayer.addEventListener("playing", (event) => {
      videoComponent.classList.add("--playing");
    });
    videoPlayer.addEventListener("pause", (event) => {
      videoComponent.classList.remove("--playing");
    });
  }
});

Play/Pause

If you apply the ds-video element to a container element, you can include an element with the class __playpause which will automatically be treated as a play/pause control positioned in the middle of the video.

To implement the play/pause control requires javascript:

const videoComponents = document.querySelectorAll('[class*="ds-video"]');
videoComponents.forEach((videoComponent) => {
  const videoPlayer = videoComponent.querySelector("video");
  const videoPlayPause = videoComponent.querySelectorAll(
    '[class*="__playpause"]'
  );
  if (videoPlayPause.length > 0) {
    videoPlayPause.forEach((playButton) => {
      playButton.addEventListener("click", handlePlayButton, false);
      let label = playButton.getElementsByTagName("span")[0];

      async function playVideo() {
        try {
          await videoPlayer.play();
          playButton.classList.replace(
            "--icon-circle-play-solid",
            "--icon-circle-pause-solid"
          );
          label.innerText = "Pause";
        } catch (err) {
          playButton.classList.replace(
            "--icon-circle-pause-solid",
            "--icon-circle-play-solid"
          );
          label.innerText = "Play";
        }
      }

      function handlePlayButton() {
        if (videoPlayer.paused) {
          playVideo();
        } else {
          videoPlayer.pause();
          playButton.classList.replace(
            "--icon-circle-pause-solid",
            "--icon-circle-play-solid"
          );
          label.innerText = "Play";
        }
      }
    });
  }
});