JWplayer Configurations - HLS setup

info — Jan 11, 2018 04:52AM EST

---

Good Day all,

Hoping someone can see where it is I'm going wrong here, have only the fundamental knowledge here.

I have my video Element
[code]
<div class="embed-responsive embed-responsive-16by9 actionable-video">
<div id="myElement" class="embed-responsive-item" data-video="<?php ECHO $VideoPath ?>">
Loading the player...
</div>
<div id="hotspots"></div>
</div>
[/code]

then later I have the Configuration
[code]
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
var preBufferDone = true;
playerInstance.setup({
file: $("#myElement").data("video"),
stretching: "uniform",
width:"100%",
aspectratio:"16:9",
autostart: true,
tracks: [{
file: 'assets/vids/Gugu.srt',
label: 'Zulu',
default: true
}] ,
captions: {
edgeStyle: 'uniform',
backgroundOpacity: '0',
}
});
playerInstance.setVolume(50);
</script>
[/code]

Now I have a new setup to have Dynamic Bit rates, so i see the code when testing the Demo is
[code]
{
"playlist": [
{
"sources": [
{
"default": false,
"file": " **** ",
"label": "0",
"type": "hls",
"preload": "none"
}
]
}
],
"primary": "html5",
"hlshtml": true,
"autostart": true,
"id": "stream-tester-player-https"
}
[/code]

but I don't seem to be having luck when i try setup like this it keeps saying no playable source found,

[code]
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
var preBufferDone = true;
playerInstance.setup({
"playlist": [ {
"sources": [ {
"default": false,
"file": "<?php ECHO $VideoPath ?>",
"label": "0",
"type": "hls",
"preload": "none"
} ]
} ],
"primary": "html5",
"hlshtml": true,
"autostart": true,
"width":"100%",
"aspectratio":"16:9",
});
playerInstance.setVolume(50);
</script>
[/code]

not sure what it is I'm doing incorrectly here.