@playkit-js/rapt
Version:
Kaltura Interactive player based on Rapt engine
267 lines (246 loc) • 6.71 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kaltura Interactive Player </title>
</head>
<body>
<!-- relevant for development only! -->
<script src="http://cdnapisec.kaltura.com/p/27017/embedPlaykitJs/uiconf_id/43327771"></script>
<script src="dist/path-kaltura-player.js" type="text/javascript"></script>
<script src="http://localhost:35729/livereload.js"></script>
<!-- end of relevant for development only! -->
<!-- 350 x 197 / 260 x 146 / 500 x 281 / 150 x 84 ⬇ ︎-->
<style>
#player {
width:500px;
height:281px;
}
</style>
<h3>test.template.html</h3>
<h4 id="projDetails"></h4>
<div id="player"></div>
<div id="logDiv" style="width: 450px;height: 100%;position: absolute;left:650px;top:0"></div>
<script>
var optionalPlaylists = [
{
name: "Animals" ,
id: "1_60y5a49y" ,
}
,
{
name: "Complex" ,
id: "1_51tet0hy",
} ,
{
name: "Empty" ,
id: "1_sxcxb5e2",
} ,
{
name: "Start 2 Start" ,
id: "1_guuku0l9",
} ,
{
name: "1 to 2,3,4" ,
id: "1_4sjm8veb",
selected: true,
} ,
{
name: "Same-node" ,
id: "1_4weuna20",
} ,
{
name: "defaultPath" ,
id: "1_r33krd2s",
} ,
{
name: "self-loop" ,
id: "1_s0d8kump",
} ,
{
name: "split same" ,
id: "1_a2m8w1pi",
} ,
];
var selectedItem = optionalPlaylists.find(item => item.selected === true);
document.getElementById("projDetails").textContent = selectedItem.name + " - " + selectedItem.id;
var config = {
session:{
// ks: "MjE4ZjZhMTY5NzAyMTFmYWE5YjdjYzIwOTZlM2NhODFhY2I1YTNiNnwyNzAxNzsyNzAxNzsxNTM5Njg2ODM5OzI7MTc3O19fQURNSU5fXzI2Njg3OyosZGlzYWJsZWVudGl0bGVtZW50"
},
targetId: 'player',
playback:{
autoplay:true,
preload:"auto"
},
provider: {
partnerId: 27017 // 2413351 - balconet 0_dl86knxb
},
rapt:{
debug:true,
bufferNextNodes: true,
bufferTime: 4
}
};
var kip = PathKalturaPlayer.setup(config);
kip.loadMedia({entryId: selectedItem.id});
var bufferingEvents = ["buffering","destroying","destroyed","doneBuffering","allBuffered","catchup","allUnbuffered"];
var apiEvents = [
"browser:hidden",
"browser:open",
"cue:forward",
"cue:reverse",
"hotspot:click",
"node:enter",
"node:ended",
"node:exit",
"project:load",
"project:ready",
"project:start",
"project:unload",
"project:ended",
"player:play",
"player:pause",
"player:progress",
"player:ratechange",
"player:timeupdate",
"player:volumechange"
];
var allEvents;
allEvents = bufferingEvents ;
// apiEvents.concat(bufferingEvents);
// allEvents = apiEvents.concat(bufferingEvents);
for (var i = 0 ; i< allEvents.length; i++){
kip.addListener(allEvents[i] , function (event) {
logDebugMsg(event);
});
}
// logger - debug mode !
function logDebugMsg(event){
const oneLine = document.createElement("div");
// mark buffering event in green
var printStr = event.type;
var payload = event.payload;
oneLine.style.cssText = "color: blue";
switch (event.type) {
case "player:timeupdate":
return; // we do not want to print this - it junks the log
case "cue:forward":
case "cue:revere":
printStr+='<span style="color: darkcyan"> ['+payload.cue.customData+']</span>' ;
break;
case "hotspot:click":
printStr+='<span style="color: darkcyan"> ['+payload.hotspot.name+']</span>' ;
break;
case "node:enter":
case "node:ended":
case "node:exit":
printStr+='<span style="color: darkcyan"> ['+payload.node.name+']</span>' ;
break;
case "player:progress":
printStr+='<span style="color: darkcyan"> ['+payload.progress+']</span>' ;
break;
case "browser:open":
printStr+='<span style="color: darkcyan"> ['+payload.href+']</span>' ;
break;
default:
if(!isEmpty(payload)){
printStr+='<span style="color: #9f4e8e"> ['+payload.toString()+']</span>' ;
}
// this is a Rapt event
}
oneLine.innerHTML = printStr;
document.getElementById("logDiv").appendChild(oneLine);
}
var playKip = function(){
kip.play();
}
function pauseKip(){
kip.pause();
}
function replayKip(){
kip.replay();
}
function resetKip(){
kip.reset();
}
function jumpToNodeKip(o){
kip.jump(o);
}
function seekKip(n){
kip.seek(n)
}
function getNodes() {
console.table(kip.data.nodes);
}
function getMetadata(){
console.table(kip.metadata.account);
}
function currentTime(){
console.log(kip.currentTime);
}
function duration(){
console.log(kip.duration);
}
function currentNode(){
console.log(kip.currentNode);
}
function currentVolume(){
console.log(kip.volume); // player bug - initial value ?
}
function setVolume(n){
kip.volume = n;
}
function muted(){
console.log(kip.muted); // player bug
}
function playbackRate(){
console.log(kip.playbackRate); // player bug
}
// helpers
function isEmpty(obj) {
for(var key in obj) {
if(obj.hasOwnProperty(key))
return false;
}
return true;
}
</script>
<br/>
<div>
<button onclick="playKip()">play</button>
<button onclick="pauseKip()">pause</button>
<button onclick="replayKip()">replay</button>
<button onclick="resetKip()">reset</button>
<button onclick="seekKip(5)">Seek to 5</button>
<button onclick="seekKip(15)">Seek to 15</button>
<button onclick="seekKip(kip.duration-3)" style="background: #f4cd98">Seek to -3sec</button>
<br/>
<br/>
<button onclick="jumpToNodeKip({id:'7354fd9b-6401-4c10-b261-99b4d183d07e'})">JumpToNode {id:'7354fd9b-6401-4c10-b261-99b4d183d07e'}</button>
<button onclick="jumpToNodeKip({name:'Start'})">JumpToNode {name:'Start'}</button>
<br/>
<button onclick="jumpToNodeKip({ref:'1_4f9mue48'})">JumpToNode {ref:'1_4f9mue48'}</button>
<!--<button onclick="jumpToNodeKip({ref:'1_4f9mue48'})">JumpToNode {xref:'1_4f9mue48'}</button>-->
<br/>
<br/>
<button onclick="getNodes()">player.data.nodes</button>
<button onclick="getMetadata()">player.metadata.account</button>
<br/>
<br/>
<button onclick="currentTime()">player.currentTime</button>
<button onclick="duration()">player.duration</button>
<button onclick="currentNode()">player.currentNode</button>
<button onclick="currentNode()">player.currentNode</button>
<br>
<br>
<button onclick="currentVolume()">player.volume</button>
<button onclick="setVolume(0.5)">player.volume = 0.5</button>
<button onclick="setVolume(1)">player.volume = 1</button>
<button onclick="setVolume(0)">player.volume = 0</button>
<button onclick="muted()">player.muted</button>
<br>
<button onclick="playbackRate()">player.playbackRate</button>
</div>
</body>
</html>