Playlist using raw url with poster options

Comments

3 comments

  • Official comment
    Avatar
    Akshay Joshi

    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

     

    Comment actions Permalink
  • Avatar
    Dobri Genchev

    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
    Comment actions Permalink
  • Avatar
    Thomas Gurung

    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
    Comment actions Permalink

Please sign in to leave a comment.