Display still images in the Kaltura Player

Community Forums Player SDK
1

We are using Kaltura CE 11.2.0 and are loading video and still images. We created a player we like for playing video, but when we view stills they appear like video;

https://kaltura.babyflix.net/tiny/lko01

Are there UI variables or other config that can suppress the play function?

2

Hi Steve,

Yes, you can go into Studio, plugins and under UI Vars, add:
playPauseBtn.plugin: false
largePlayBtn.plugin: false

Should do it.

You may also want:
scrubber.plugin: false
controlBarContainer.plugin: false

3

Hi Jess,

Related to this issue we are having a problem getting a still image to go to full screen. When the user hits the fullscreen the player enlarges but the photo stays the same size. Are there any other UI variables for this?

Steve

4

Hi @steve_corey,

Yes, I am able to confirm that. It appears as though a much better behaviour would be for the playerPoster class defined in modules/EmbedPlayer/resources/EmbedPlayer.css to read:

.playerPoster {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
}

I will discuss this with the player’s dev team but in the meantime, you can update the CSS file directly, if you’re working on a self hosted ENV or, if using our SaaS, override the default playerPoster class with a custom one, here is a full example:

<script src="http://cdnapi.kaltura.com/p/2137952/sp/213795200/embedIframeJs/uiconf_id/40427531/partner_id/2137952"></script>
<div id="kaltura_player_1505307455" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
  "targetId": "kaltura_player_1505307455",
  "wid": "_2137952",
  "uiconf_id": 40427531,
  "cache_st": 1505307455,
  "entry_id": "1_bitkro02",
        'flashvars': {
                "IframeCustomPluginCss1" : "http://jessex/customPluginCss1.css"
        }
});
</script>

Where http://jessex/customPluginCss1.css should be replaced with your own URL where you host the customPluginCss1.css file and its contents should be:

.playerPoster {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        margin: auto;
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain !important;
}