Possible to use video plyr for just audio with an image?

Question

I am using Plyr for a meditation app, I have it working well using and linking an mp3 file, I have done it this way as I get the fullscreen attributes, but I am really stuck with regards to showing a bg image instead of a video. At the moment it is just a black screen, I've been searching for hours but to no avail. I used the data-poster but soon realized it was for the initial load.

I wanted to work out a way I can get a player to behave like the image shown, that can allow fullscreen and the controls but show an image throughout. Thanks

meditation player from insight timer

score 0 · Answer 1 · answered Sep 06 '22 at 18:07

I was thinking using canvas to stream to <video>. It works basically.

const video = document.getElementById('player')
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

image.crossOrigin = "Anonymous";
image.addEventListener('load', (e) => {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  video.srcObject = canvas.captureStream();
  const player = new Plyr(video);
});
image.src = "https://picsum.photos/200"

<script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
<video id="player" playsinline controls></video>
<canvas id="canvas"></canvas>
<img id="source">

Possible to use video plyr for just audio with an image?

1 Answers1