<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<p>video with generic html</p>
<video onloadeddata="this.play();this.muted=true;" playsinline loop muted width="200">
  <source src="https://i.imgur.com/MtforbJ.mp4" type="video/mp4" />
  Your browser does not support the video tag or the file format of this video.
</video>

<p>video with p5js</p>
<script>
  let videoElement;

  function setup() {
    createCanvas(150, 150);
    // Eenvoudige p5.js aanpak zonder extra complexiteit
    videoElement = createVideo('https://i.imgur.com/MtforbJ.mp4');
    videoElement.hide();
    // Gebruik de meest basale methode om te starten
    videoElement.play();
    videoElement.loop();
    videoElement.volume(0);
    videoElement.attribute('onloadeddata', 'this.play();this.muted=false;');
    videoElement.attribute('playsinline', 'true');
    videoElement.attribute('loop', 'true');
    videoElement.attribute('muted', 'true');
  }

  function draw() {
    // Teken de video als deze beschikbaar is
    if (videoElement) {
      image(videoElement, 0, 0, width, height);
    }
  }
</script>