Playlist using raw url with poster options

Dobri Genchev

April 18, 2022 08:33

Hi guys,

I'd like to create a Playlist out of raw urls with proper poster/thumbnail.

example: https://codepen.io/genchev-dobri/pen/bGaOgaZ

I have few problems:

1. All videos load one and the same poster/thumbnail
2. Clicking on the next videos does not work correctly 

Probably I can follow the documentation and specify public id instead of a raw url if there is a way to get all transformations out of a url. 

Best,

Dobri

 

0

• Official comment

  

  Akshay Joshi

  April 18, 2022 15:19

  Hi Dobri,

  I tried to reproduce your issue but both the videos worked correctly for me.  Could you explain more where the video fails to work correctly? 

  You can specify the public id in the playlist and use our transformations to get the desired results instead of using raw URLs.

  Here is the documentation that points to the transformations that can be done in the playlist: https://cloudinary.com/documentation/video_player_api_reference#transformation

  Let me know if it works for you.

  Regards,

  Akshay

   
• 

  Dobri Genchev

  April 19, 2022 07:01

  Hi Akshay,

  I expect a separate poster/thumbnail for each video,  Instead all videos have one poster/thumbnail - https://prnt.sc/qbKL8NhCMNPG
  Can I set a separate poster/thumbnail for each video in the playlist when I use raw URLs?

  The reason I am using raw URLs over public IDs is "Transformation presets" utilization, so the video format is predefined by the "Transformation presets" and reflected/played by the video player. Probably if I have a chance to get all transformations out of the url and modify and reuse them it will be great.

  Example:

  
  let trans= <cloudinary sdk>.getTransformationsFromUrl(url);
  
  //modify the transformation
  trans.width(400);
  
  //set transformation
  vplayer.transformation(trans)

   

  BTW, this is CMS integration so the customer will be able to configure a Cloudinary Video Player widget with a list of raw URLs in predefined format.

  The other issue (in the codepen example) is clicking over the playlist results in unexpected change of the playlist itself.

  Example:

  1.  Go to the Codepen
  2. Click on the video in the playlist 
  3. Expected behavior the new video is playing and you still have an option to chose previous or next from the list
  4. Exact result is the playlist shows only the currently played video, previous or next are missing from the list.

  Thank you in advance!

  Dobri

   

   

   

   

  0
• 

  Thomas Gurung

  April 20, 2022 13:52 Edited

  Hello Dobri,

  Thanks for getting back and for your patience. 

  You can use URLs for poster images as well but a better approach is probably to use transformation parameters where possible. This way you do not need to worry about accidentally specifying the wrong URLs as well as being highly re-usable for any video by simply updating the public id. 

  Having said that here is an updated version from your example which should behave to your expectations. A few things I did was:

  • Updated "<div>" width to 400px - same as the width of your video
  • Replaced "posterOptions" with "poster"
  • Added "w_400" to "source2" to make it the same as "source1" and "<div>" 
  • Updated "playlistWidget" to "total: 2" - it's better to specify this value to the number of videos you are displaying in your widget
  • Updated "repeat" to "true" so previous video stays in the widget

  <link href="https://unpkg.com/cloudinary-video-player@1.9.0/dist/cld-video-player.min.css" rel="stylesheet">
  <script src="https://unpkg.com/cloudinary-video-player@1.9.0/dist/cld-video-player.min.js" type="text/javascript"></script>
  
  <div style="max-width: 400px">
    <video id="playlist_player_id" controls muted class="cld-video-player cld-video-player-skin-dark">
    </video>
  </div>
  
  <script>
   const cld = cloudinary.Cloudinary.new({
     cloud_name: 'hms-test'
   });
  
   var source1 = {
     publicId: 'https://res.cloudinary.com/hms-test/video/upload/g_center,c_fill,ar_2:3,w_400/f_mp4,vc_h264,ac_aac,af_22050,fps_1-30/v1639467942/Videos/Intro.mp4',
     poster: {
       publicId: 'https://res.cloudinary.com/hms-test/video/upload/g_center,c_fill,ar_2:3,w_400/f_mp4,vc_h264,ac_aac,af_22050,fps_1-30/so_10,f_jpg/v1639467942/Videos/Intro.jpg'
     }
   };
  
   var source2 = {
     publicId: 'https://res.cloudinary.com/hms-test/video/upload/g_center,c_fill,ar_2:3,w_400/f_mp4,vc_h264,ac_aac,af_22050,fps_1-30/v1638881626/Videos/VIDDYOZE-Droid_Intro.mp4',
     poster: {
       publicId: 'https://res.cloudinary.com/hms-test/video/upload/v1638881626/Videos/VIDDYOZE-Droid_Intro.jpeg'
     }
   };
  
   const player = cld.videoPlayer('playlist_player_id', {
     playlistWidget: {
       direction: "horizontal",
       total: 2
     }
   });
  
  
   player.playlist([source1, source2], {
     autoAdvance: true,
     repeat: true,
     presentUpcoming: 2
   });
  </script>

  Please let me know if you have any other questions.

  Kind Regards,
  Thomas

  0

Post is closed for comments.