Capture Image

[Davidkulpe]

• [X] Issue does not already exist
• [ ] Issue observed on https://plyr.io

Expected behaviour

Add a function to capture a frame at xx:xx:xx All other players have this ability

Players affected:

• [X] HTML5 Video
• [ ] HTML5 Audio
• [X] YouTube
• [X] Vimeo

[sampotts]

Links to other players that do this? Would require loading the whole video to do this so I'm interested in how they do it.

[Davidkulpe]

How they do it? I have no idea but the way I used to do it is like that : var canvas = document.createElement('canvas'); canvas.width = 640; canvas.height = 480; var ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); var imgURI = canvas.toDataURL('image/jpeg'); // or 'image/png'

I just cannot get the video element in plyr.io, If I could access the video element, it would be over

also look at https://videojs.electroteque.org/snapshot - plugin for videojs just google "javascript player capture current frame"

[jmprovencher]

Any update on this feature?

[friday]

Why do you need Plyr to do this? How do you want Plyr to do this? Should it be a button or just API? and what should it do with the image? Download it to your computer? Set as your desktop background image? ;)

It's super easy to do, so I don't see why Plyr should handle it. Here's an example that overrides the poster image (assumes your player is named "player", like on on plyr.io):

(() => {
  const width = player.media.videoWidth;
  const height = player.media.videoHeight;
  const canvas = Object.assign(document.createElement('canvas'), {width, height});
  canvas.getContext('2d').drawImage(player.media, 0, 0, width, height);
  // Set as poster (will show if you run `player.stop()` for example)
  player.elements.poster.style.backgroundImage = `url(${canvas.toDataURL()})`;
})();

Vimeo/youtube support is likely not possible.

[jmprovencher]

Yeah you're right. Plyr should probably not handle it since it's easy to retrieve the image and do whatever we want with it in javascript. Thanks for example! :)

[ctf0]

there is no need for plyr to handle this, u can do it natively https://stackoverflow.com/questions/7323053/dynamically-using-the-first-frame-as-poster-in-html5-video

<video id="player" src="myvideo.mp4#t=1.0" preload="metadata"/>