How to show full video(full screen mode should be adaptive based on device and portrait or landscape view) in mobile devices on click on video image

Community Forums
1

We are using KALTURA videos for our business in desktop and trying to implement the same for mobile devices.
could you please give some examples how it works in full screen when you click on video image. The full screen view should be adaptive based on device type (screen size) and should be adaptive for portrait and landscape views.
Thanks, Narayan

2

Hello,

You can see sample videos here:
https://portal.mediaspace.kaltura.com/

The player has a full screen functionality and can work in both portrait and landscape modes.
Both Android and iOS are supported.

Thanks,

3

Hi Jess,

i had a look at the given examples but non of the videos not taking full screen auto play when you click on video image.

i’m looking for a solution when user click on video image as soon as play in full screen with device adaptability.

Thanks,
Reddy

4

Hi Jess,

I’m following the code below still it’s not working when browser mode turn to mobile view.
is anything missing?
http://kaltura.github.io/EmbedCodeGenerator/demo/

Thanks,
Reddy

5

Hi @narayan2203,

Are you working with the Kaltura SaaS [www.kaltura.com] or with a self hosted ENV [Community Edition/OnPrem]?
That demo’s defaults are looking at a SaaS partner [423851] with a UI conf ID that points to an old and deprecated Flash player [11598752].
You’re supposed to change the partner ID, UI conf ID and entry ID and, if working on your own self hosted ENV, also the ‘Host’ and ‘Secure Host’ fields, to match your own.

Make sure you are using a HTML5 player, which you can create by going to KMC->Studio.
Also, you don’t really need that demo to preview a player, after creating and customising your HTML5 player, you can go to KMC->Content and from from the “Actions” select box, choose “Preview & Embed”, there, select your desired player and you’ll see “View a standalone page with this player”, click on the link and you’ll get a page with the selected player embedded on the page.

6

Hi Jess,

The following code work for few device only.
It works for all iphone versions but not any IPAD.
It works for few other mobile version Samsun s3,Note2,3 but not galaxy S5 and Nokia N9 and other devices.
As well i found that the touch functionality(on video touch play & pause) is not working on any devices.
Please help me which could solve my issues.

Thank you.

kWidget.embed({
‘targetId’: ‘video’,
‘wid’: ‘_1109652’,
‘uiconf_id’: ‘39268121’,
‘entry_id’: videoFilename,
‘flashvars’: { ‘autoPlay’: false, ‘controlBarContainer.plugin’: false }, ‘IframeCustomPluginCss1’: ‘productpage.css’,
‘readyCallback’: playerId => {
console.log(‘Player:’ + playerId + ’ is ready ');
kdp = document.getElementById(playerId);
kdp.kBind(“doPlay”, () => {
kdp.setKDPAttribute(“controlBarContainer”, “plugin”, true);
kdp.sendNotification(‘openFullScreen’);
});
kdp.kBind(“doPause”, () => {
kdp.sendNotification(‘closeFullScreen’);
});
var events = [‘layoutBuildDone’, ‘playerReady’, ‘mediaLoaded’, ‘mediaError’, ‘playerStateChange’, ‘firstPlay’, ‘playerPlayed’, ‘playerPaused’, ‘preSeek’, ‘seek’, ‘seeked’, ‘playerUpdatePlayhead’, ‘openFullScreen’, ‘closeFullScreen’, ‘volumeChanged’, ‘mute’, ‘unmute’, ‘bufferChange’, ‘cuePointReached’, ‘playerPlayEnd’, ‘onChangeMedia’, ‘onChangeMediaDone’];
for (var i = 0; i < events.length; i++) {
(i => {
kdp.kBind(events[i], event => {
console.log('Kaltura player event triggered: ’ + events[i] + ', event data: ’ + JSON.stringify(event));
});
})(i);
}
}
});