@playkit-js/rapt
Version:
Kaltura Interactive player based on Rapt engine
502 lines (484 loc) • 13.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Kaltura Interactive Player</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
</head>
<body>
<!-- relevant for development only! -->
<!-- 0.36.6 -->
<!-- <script src="https://qa-apache-php7.dev.kaltura.com/p/6222/embedPlaykitJs/uiconf_id/15219305"></script> -->
<!-- THIS UICONF HAS GA -->
<!-- 0.37.3 -->
<script src="https://cdnapisec.kaltura.com/p/4393802/embedPlaykitJs/uiconf_id/53470752"></script>
<!-- 0.39.0 -->
<!-- <script src="http://cdnapisec.kaltura.com/p/27017/embedPlaykitJs/uiconf_id/43642002"></script> -->
<script src="dist/playkit-rapt.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 <span id="data-source"></span></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: "links and hotspots",
id: "1_pdnk89fb"
},
{
name: "prefetch API",
id: "0_vd5gg2z6"
},
{
name: "defautlPath shorts",
id: "0_ogg6ii7b"
},
{
name: "a-bb-a",
id: "1_o9h3609b"
},
{
name: "3 by 4",
id: "1_tltksr4c"
},
{
name: "9 by 16",
id: "1_st9lvajb"
},
{
name: "short",
id: "1_91tbi9q8"
},
{
name: "Multi Audio",
id: "1_q94de4ui"
},
{
name: "Quality",
id: "1_4nsj0e6n"
},
{
name: "Links ",
id: "1_sktk76eq"
},
{
name: "CL1",
id: "0_ugurmytu"
},
{
name: "CL2",
id: "0_5huki1y3"
},
{
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",
},
{
name: "Same-node",
id: "1_4weuna20"
},
{
name: "defaultPath",
id: "1_r33krd2s"
},
{
name: "self-loop",
id: "1_s0d8kump"
},
{
name: "split same",
id: "1_a2m8w1pi"
},
{
name: "balconette ",
id: "0_dl86knxb",
pid: 2413351
},
{
name: "Deloitte ",
id: "1_t9w32b41",
pid: 2421271,
},
{
name: "NEW FORMAT !!!!!!!!!!!!!",
id: "1_6ctxftz0",
pid: 27017,
},
{
name: "pause",
id: "1_pvsfk007",
pid: 27017,
},
{
name: "hybrid !!!!!!!!!!!!!",
id: "0_i6imu7f7",
pid: 6603,
isQA: true
},
{
name: "QA BE ",
id: "0_3ifwiywl",
pid: 5885,
isQA: true
},
{
name: "QA BE PATH-534",
id: "0_0u39duty",
pid: 5885,
isQA: true
},
{
name: "JUMP TO ",
id: "0_gkvwxfwk",
pid: 5885,
isQA: true
},
{
name: "QA BE ",
id: "0_uvhsksyx",
pid: 5809,
isQA: true
},
{
name: "bug Adi",
id: "0_n70vktfa",
pid: 6603,
selected: false, ///////////////////////
isQA: true
},
{
name: "tzipi Adi",
id: "1_0aft3h1i",
pid: 4393802,
selected: true, ///////////////////////
isQA: false
},
];
var selectedItem;
for (var j = 0; j < optionalPlaylists.length; j++) {
if (optionalPlaylists[j].selected) {
selectedItem = optionalPlaylists[j];
}
}
var env = {};
if (selectedItem.isQA) {
env = {
serviceUrl: "//qa-apache-php7.dev.kaltura.com/api_v3",
cdnUrl: "//qa-apache-php7.dev.kaltura.com"
};
}
var pid = "2171811"; // default
if (selectedItem.pid) {
pid = selectedItem.pid;
}
document.getElementById("projDetails").textContent =
selectedItem.name + " - " + selectedItem.id;
var config = {
targetId: "player",
playback: {
// autoplay: false,
preload: "auto"
},
provider: {
partnerId: pid,
},
rapt: {
initialBitrate: 75e4,
debug: true,
capabilityCheck: true,
bufferNextNodes: true,
bufferTime: 6,
showScrubber: true,
showTimers: true,
showSettings: true
}
};
setTimeout(() => {
$("#data-source").text( config.rapt.capabilityCheck ? "Hybrid" : "Normal" )
}, 1000)
var kip = PathKalturaPlayer.setup(config);
var allEvents = [
"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"
];
for (var i = 0; i < allEvents.length; i++) {
kip.addListener(allEvents[i], function(event) {
logDebugMsg(event);
});
}
kip.loadMedia({ playlistId: selectedItem.id });
// logger - debug mode !
function logDebugMsg(event) {
var 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: #8b227c"> [' +
payload.cue.customData +
"]</span>";
break;
case "hotspot:click":
printStr +=
'<span style="color: #648b24"> [' +
payload.hotspot.name +
"]</span>";
break;
case "node:enter":
case "node:ended":
case "node:exit":
printStr +=
'<span style="color: #24468b"> [' +
payload.node.name +
"]</span>";
break;
case "player:progress":
printStr +=
'<span style="color: #8b2136"> [' + payload.progress + "]</span>";
break;
case "browser:open":
printStr +=
'<span style="color: #648b24"> [' + 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 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
}
function replaceMe() {
var player1Video = $.find("#kaltura-container__1 video")[0];
var player2Video = $.find("#kaltura-container__2 video")[0];
var player2 = $.find("#kaltura-container__2");
var player1 = $.find("#kaltura-container__1");
player1Video.pause();
player2Video.play();
setTimeout( () => {
$(player1).removeClass("current-playing");
$(player2).addClass("current-playing");
})
}
// helpers
function isEmpty(obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) return false;
}
return true;
}
function scaleUp(key) {
$("#player").width($("#player").width() * 1.1);
$("#player").height($("#player").height() * 1.1);
}
function scaleDown(key) {
$("#player").width($("#player").width() / 1.1);
$("#player").height($("#player").height() / 1.1);
}
function evaluateKip(key) {
var output = kip.evaluate(key);
console.log("evaluate :" + key + " > " + output);
}
</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>
<button onclick="seekKip(kip.duration-7)" style="background: #f4Fd98">
Seek to -7sec
</button>
<button onclick="replaceMe()" style="background: #f4FF98">
REPLACE
</button>
<br />
<br />
<button
onclick="kip.sendNotification('raptMedia_doCommand',{type:'player:play'})"
style="background: #f4cd55"
>
play
</button>
<button
onclick="kip.sendNotification('raptMedia_doCommand',{type:'player:pause'})"
style="background: #f4cd55"
>
pause
</button>
<button
onclick="kip.sendNotification('raptMedia_doCommand',{type:'project:reset'})"
style="background: #f4cd55"
>
replay
</button>
<button
onclick="kip.execute({type:'project:reset'})"
style="background: #f4cd55"
>
replay1
</button>
<button
onclick="kip.sendNotification('raptMedia_doCommand',{type: 'player:seek', payload: { time: 5 } })"
style="background: #f4cd55"
>
Seek to 5
</button>
<br />
<br />
<br />
<button onclick="jumpToNodeKip({name:'Start'})">
JumpToNode {name:'Start'}
</button>
<button
onclick="jumpToNodeKip({id:'7354fd9b-6401-4c10-b261-99b4d183d07e'})"
>
JumpToNode {id:'7354fd9b-6401-4c10-b261-99b4d183d07e'}
</button>
<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="evaluateKip('nodes')" style="background: #f4Fd98">
player.data.nodes
</button>
<button onclick="evaluateKip('{raptMedia.status}')">Status</button>
<button onclick="evaluateKip('account')" style="background: #f4Fd98">
account
</button>
<button
onclick="evaluateKip('{raptMedia.info}')"
style="background: #f4Fd98"
>
{raptMedia.info}
</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>
<button onclick="scaleUp()">+</button>
<button onclick="scaleDown()">-</button>
</div>
</body>
</html>