1

When I watch videos on YouTube such as pewdiepie and that time I adjust the audio. And that time it shows the thumbnail of the video like below

The Image When It Shows in the system during watching YouTube

It Also Shows A Image In Shortcut Player On Chrome

Shortcut player in Chrome

But I also want to make a player and give a thumbnail like the above images. I tried this

<video src="..." poster="./example.png">
</video>
/* 
Who Don't knows about it
link to know more about the poster attribute:- https://www.w3schools.com/tags/att_video_poster.asp#:~:text=The%20poster%20attribute%20specifies%20an,video%20will%20be%20used%20instead.
*/

And Also Tried This

<video src="...">
<img src="./example.jpg"/>
</video>

But It Also Didn't work I search almost everywhere for the answer But It Gives A Result Like This: In the system player (windows)

system player result for my code

In the shortcut player (chrome)

shortcut player result for my code

If My codes not working then how is YouTube giving a thumbnail and also a subtitle(in the there is the title and bottom of that it is written PewDiePie)

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Kazi Raheeb
  • 21
  • 3
  • Btw here is an older answer to your question from another post: https://stackoverflow.com/questions/44418606/how-do-i-set-a-thumbnail-when-playing-audio-in-ios-safari – Krokodil Apr 07 '21 at 17:12

1 Answers1

5

What you are looking for is the Media Session API.

Here is a sample code from MDN which describes the various methods of this API:

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('stop', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekto', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('skipad', function() { /* Code excerpted. */ });
}

Here is the same API referenced on Google Developers Web which highlights your use case. Customize Media Notifications and Handle Playlists

shadow-lad
  • 498
  • 5
  • 10
  • Lol i was just about to post the same answer, lucky i decided to refresh the page and check! – Krokodil Apr 07 '21 at 17:11
  • @Kazi Raheeb: if this answer solved your question, please accept it by clicking the checkmark on the left. – eol Apr 21 '21 at 09:22