This is a migrated thread and some comments may be shown as answers.
Force video poster
5 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
Karol
Top achievements
Rank 1
Karol asked on 04 Feb 2021, 01:17 PM

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…

5 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 08 Feb 2021, 11:42 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Karol
Top achievements
Rank 1
answered on 08 Feb 2021, 01:33 PM

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.

0
Eyup
Telerik team
answered on 10 Feb 2021, 12:13 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Karol
Top achievements
Rank 1
answered on 10 Feb 2021, 12:36 PM

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.

0
Eyup
Telerik team
answered on 12 Feb 2021, 08:45 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Karol
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Karol
Top achievements
Rank 1
Share this question
or