QVV Video Player

Multiple Instances Example

Multiple player instances on the same page.

<qvv-video
  autoplay="true"
  class="article-image"
  data-dtl="{"vName":"https:\/\/www.addendum.org\/content\/uploads\/2021\/07\/109-Coronavirus-XX-Ampel-Landingpage-CLIP.mp4","pName":null,"proartID":null,"duration":null,"id":null}"
  id="player-84697-378415410"
  loop=""
  muted="true"
  poster=""
  video="https://www.crafted.systems/demos/addendum.org/qvv-video/video1.mp4"
  videofallback="https://www.crafted.systems/demos/addendum.org/qvv-video/video1.mp4"
  vtt=""
/>

<qvv-video
  controls
  data-dtl="{"vName":"https:\/\/www.addendum.org\/content\/uploads\/2021\/07\/109-Coronavirus-XX-Ampel-Landingpage-CLIP.mp4","pName":null,"proartID":null,"duration":null,"id":null}"
  id="player-84697-378415410b"
  poster="https://www.crafted.systems/demos/addendum.org/qvv-video/poster1.jpg"
  video="https://www.crafted.systems/demos/addendum.org/qvv-video/video1.mp4"
  videofallback="https://www.crafted.systems/demos/addendum.org/qvv-video/video1.mp4"
  vtt=""
/>

Inspect HTML and see wrapper style attribute for a theme settings example.

<qvv-video
  controls
  id="player-2"
  poster="https://www.crafted.systems/demos/addendum.org/qvv-video/poster1.jpg"
  video="https://www.crafted.systems/demos/addendum.org/qvv-video/video1.mp4"
  videofallback="https://www.crafted.systems/demos/addendum.org/qvv-video/video1.mp4"
/>