QVV Video Player

Usage

Add the qvv-video.js script tag to the header.
Add the qvv-video tag to your page layout.
Listen to custom events qvv-video play and pause on document level.

You can add multiple qvv-video tags to the DOM if you need multiple players.
Open browser console to watch initialization and event.

<head>
  <script
    type="module"
    src="https://qvv-video.netlify.com/qvv-video.js"
  ></script>
</head>
<body>
  <qvv-video
    controls
    id="player-1"
    poster="poster.jpg"
    video="video.mp4"
  />
</body>

Attributes

audio ✓: optional Audio file for usage as an audio-only player (.mp3).
autoplay ✓: optionalIf set, the video automatically begins to play. In some browsers autoplay doesn't work if no muted attribute is present.
controls ✓: optionalIf set, the player will offer controls.
crossorigin ✓: optionalSet to fix CORS related issues.
id ✓: requiredA player id is mandatory and is part of all custom events.
loop ✓: optionalIf set, the player will loop the content.
mediaid todo: optionalRequired for Brightcove tracking.
muted ✓: optionalIf set, the player will not play audio.
poster ✓: optionalPoster image to show while the video is downloading
video ✓: optionalHLS manifest for adaptive streaming (.m3u8).
videofallback ✓: requiredMP4 video file for basic streaming (.mp4).
vtt ✓: optionalWeb Video Text Tracks.

<qvv-video
  audio="audio-file.mp3"
  autoplay
  controls
  id="player-1"
  loop
  muted
  poster="poster.jpg"
  video="video.m3u8"
  videofallback="video.mp4"
/>

Custom Events

The player dispatches and listens to custom qvv-video events on document level.

play
pause
progress
ended

// Play event example
{
  detail: {
    action: "play",
    id: "player-1", // if id attribute is set; otherwise not present
    progress: 0,  // progress in %
  },
  type: "qvv-video"
}

// Pause event example
{
  detail: {
    action: "pause",
    id: "player-1",
    progress: 21,
  },
  type: "qvv-video"
}

// Progress event example
{
  detail: {
    action: "progress",
    id: "player-1",
    progress: 25,
  },
  type: "qvv-video"
}

// Ended event example
{
  detail: {
    action: "ended",
    id: "player-1",
    progress: 100,
  },
  type: "qvv-video"
}

Event Listener Example

Listen to player events.

<script>
  // Simple event listener example
  function handleEvent(ev) {
    console.log(`Custom event type: ${ev.type}, detail: ${ev.detail}`);
  }
  document.addEventListener('qvv-video', handleEvent);
</script>