Last active
July 5, 2019 17:16
-
-
Save zoharbabin/81a7881e9c44f36fb8a7ae48af362a20 to your computer and use it in GitHub Desktop.
Sample code - how to embed the Kaltura Player v7 on a site that uses requireJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| //This goes on your backend - never include API secret keys in front end code | |
| $expire=60*60*24; //one day | |
| $uniqueUserId = 'someUniqueUserId'; //Make sure this is set to your real user IDs so that Analytics and Entitlements will really be tracked according to your business needs | |
| $partnerId = REPLACE_ME; //https://kmc.kaltura.com/index.php/kmcng/settings/integrationSettings | |
| $apiAdminSecret = 'REPLACE_ME'; //https://kmc.kaltura.com/index.php/kmcng/settings/integrationSettings | |
| $uiconfId = REPLACE_ME; //https://kmc.kaltura.com/index.php/kmcng/studio/v3 | |
| $entryId = 'REPLACE_ME'; //https://kmc.kaltura.com/index.php/kmcng/content/entries/list | |
| $appName = 'MyAppName'; //used to designate your application name, this can be used in the Analytics later to differentiate usage across different apps (such as website vs. mobile iOS vs. mobile Android vs. partner site) | |
| $appDomain = 'my.appdomain.com'; // the domain to track this playback session to | |
| //generate the Kaltura Session for secure and tracked playback session | |
| $privacyContext = null; //'YourCategoryName'; //if your entries are inside a category with a defined privacyContext, this must be specified too | |
| $sessionStartRESTAPIUrl = 'https://cdnapisec.kaltura.com/api_v3/service/session/action/start/format/1/secret/'.$apiAdminSecret.'/partnerId/'.$partnerId.'/type/0/expiry/'.$expire.'/userId/'.$uniqueUserId.'/privileges/sview:'.$entryId.',appid:'.$appName.'-'.$appDomain.($privacyContext != null ? ',privacycontext:'.$privacyContext : ''); | |
| // The Kaltura Session: | |
| $ks = file_get_contents($sessionStartRESTAPIUrl); | |
| // The Kaltura Player JS Library: | |
| $kalturaJSSrc = 'https://cdnapisec.kaltura.com/p/'.$partnerId.'/embedPlaykitJs/uiconf_id/'.$uiconfId; | |
| ?> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Responsive Embed Kaltura Player v3</title> | |
| <!-- CSS overrides to the kaltura player UX --> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: #999; | |
| } | |
| .responsive-video{ | |
| position:relative; | |
| padding-bottom:30%; | |
| } | |
| @media only screen and (max-width: 1200px) { | |
| .responsive-video{ | |
| padding-bottom:38%; | |
| } | |
| } | |
| @media only screen and (max-width: 900px) { | |
| .responsive-video{ | |
| padding-bottom:48%; | |
| } | |
| } | |
| @media only screen and (max-width: 700px) { | |
| .responsive-video{ | |
| padding-bottom:60%; | |
| } | |
| } | |
| @media only screen and (max-width: 550px) { | |
| .responsive-video{ | |
| padding-bottom:70%; | |
| } | |
| } | |
| .video-player { | |
| width:100%; | |
| height:100%; | |
| position:absolute; | |
| } | |
| .video-bg-white .playkit-video-player, | |
| .video-bg-white .kaltura-player-container, | |
| .video-bg-white .playkit-player, | |
| .video-bg-white .playkit-loading-backdrop, | |
| .video-bg-white .playkit-pre-playback-play-overlay.playkit-has-poster { | |
| background-color: white !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="video-body" itemprop="articleBody"> | |
| <div class="responsive-video"> | |
| <div class="video-player video-bg-white" id="kaltura-player"></div> | |
| <!-- load requireJS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> | |
| <!-- load Kaltura Player JS --> | |
| <script src="<?php echo $kalturaJSSrc; ?>"></script> | |
| <script type="text/javascript"> | |
| // check if requireJS was loaded | |
| if (typeof requirejs !== 'undefined' || typeof require !== 'undefined') { | |
| // if requireJS, than add KalturaPlayer to require | |
| require.config({ | |
| paths: { KalturaPlayer: "<?php echo $kalturaJSSrc; ?>" } | |
| }); | |
| require(["KalturaPlayer"], function(KalturaPlayer){ | |
| window.KalturaPlayer = KalturaPlayer; | |
| // then render the Kaltura Player | |
| renderPlayer (); | |
| }); | |
| } else { | |
| // if requireJS is not loaded, simply continue to render the Kaltura Player | |
| renderPlayer (); | |
| } | |
| function renderPlayer () { | |
| let playerConfig = { | |
| targetId: "kaltura-player", | |
| provider: { | |
| partnerId: <?php echo $partnerId; ?>, | |
| uiConfId: <?php echo $uiconfId; ?>, | |
| ks: <?php echo $ks; ?> | |
| } | |
| // see more config: https://developer.kaltura.com/player/web/configuration-web | |
| }; | |
| let kalturaPlayer = KalturaPlayer.setup(playerConfig); | |
| /* | |
| // example event listener: | |
| kalturaPlayer.addEventListener(kalturaPlayer.Event.ENDED, event => { | |
| console.log('Kaltura player finished playback!'); | |
| //loop: setTimeout(()=>kalturaPlayer.play(),0); | |
| });*/ | |
| kalturaPlayer.loadMedia({entryId: "<?php echo $entryId; ?>"}).then(() => { | |
| kalturaPlayer.load(); | |
| }); | |
| } | |
| </script> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment