Force video poster

[Karol]

Hi

 

Is there a way to force poster image to be shown instead of the first video frame when autoplay is false?

 

As far as I can see Kendo generated video tag does not have poster tag and when I add it with jQuery attr() method… it does not work as video preloads first frame and just shows black rectangle.

Partial fix is adding (with jQ) preload=none attribute to video tag but then "current play time" shows actual date/time (full format) instead of 00:00:00.

I am out of ideas…

[Eyup]

Hello Karol,

 

Thank you for writing to us.

Yes, this requirement is possible to achieve, but only when the source is not an YouTube video. Can you verify that you are using a local video source?

 

Regards,
Eyup
Progress Telerik

[Karol]

Hi

I am not using Youtube. I take all video links from local JSON file and dataItem elements (inside onChange call) are like:

{
    "title": "January 26, 2021: Cisco Check-In",
    "poster": "media/test-01.jpg",
    "source": "videos/UploadedVideos/c9998517-65e3-4c9e-a813-904216145e5d.mp4"
}

Despite them being local, first video always loads black (1st frame of the video file) and ignores poster.

 

I am using your own example from:

https://demos.telerik.com/kendo-ui/mediaplayer/playlist

Changes I did are:

- local files files links instead of Youtube

- call to JSON data (via AJAX) before player initialization

P.S. I have managed to temporary fix my issue with background-image property of overlay layer (I switch it OFF on PLAY) but this is not perfect solution.

[Eyup]

Hello Karol,

 

I am glad that you have managed to resolve the issue.

As an alternative approach, you can also use the ready event in combination with the one() and load() method:

  $("#mediaplayer").data("kendoMediaPlayer").one("ready",function(e){
    var videoEl =  $("#mediaplayer").find("video");
    videoEl.attr("poster","https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Polar_Bear_AdF.jpg/400px-Polar_Bear_AdF.jpg");
    videoEl[0].load();
  });

Here is a working version of this solution:
https://dojo.telerik.com/EnEHOnax/9

 

Regards,
Eyup
Progress Telerik

[Karol]

Thank you for reply.

My trick for playlist is using overlay:

function onChange() {
                var index = this.select().index();
                var dataItem = this.dataSource.view()[index];
                $("#mediaplayer").data("kendoMediaPlayer").stop();
                $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
                $("#mediaplayer").data("kendoMediaPlayer").stop();
                $('#mediaplayer .k-mediaplayer-overlay').attr('style','background-image: url(' + dataItem.poster + ');background-size: contain;background-repeat: no-repeat;background-position-x: center;');
                $('#mediaplayer video.k-mediaplayer-media').attr('poster', dataItem.poster);
            }

 

Trying to do it in 'ready' event was not always working properly with playlist demo. It worked for single video but not for playlist.

Once playlist "clicks itself" to load first video, poster was replaced with first video frames.

In addition I have to use stop() on videos as video slider position is kept between movies.

One aside note:
I have also tried to force "preload" attribute for video to prevent 1st frame showing but the end result was having full Date() string instead of 00:00:00 for current track time.

[Eyup]

Hello Karol,

 

Thank you for sharing your own way how you resolved the issue. I hope it will prove to other developers as well.

 

Regards,
Eyup
Progress Telerik