HotSpots and Dynamic settings.
-- Hi all,
I'm hoping for some assistance. I'm Extremely new to web-coding let alone the java side of things and I'm having some issues getting things going with hotspots on my videos on JWPlayer.
I have a Video that I have done which I want a hotspot to appear at 00:01:05.000 and stay till end of video (00:01:15.000)
I looked at the Experiment for hotspots (https://developer.jwplayer.com/jw-player/demos/innovation/hot-spots/) but I'm in a little over my head with it. the link just does not appear at all. at any point in the video.
What I have done is I have a basic Page setup:
(running through a WAMP server) localhost/test.html
[code]
<!DOCTYPE html>
<head>
<title>Raw Testing of Coding</title>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css"></link>
<link rel="stylesheet" href="./css/style.css"></link>
<!-- Scripts -->
<script type="text/javascript" src="./scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./scripts/main.js"></script>
<script type="text/javascript" src="./scripts/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key = "";</script> <!-- Removed for posting -->
</head>
<body>
<div id="hotspots"></div>
<script type="text/javascript">
jwplayer("hotspots").setup({
file: "testingvid.mp4",
height: "50%",
width: "50%"
});
</script>
</body>
</html>
[/code]
The Java file is the one obtained from the site just edited
r.open('GET','assets/hotspots.vtt',true);
to
r.open('GET','../assets/hotspots.vtt',true);
Then the assets I have the 3 files.
and Edited the hotspots.vtt to this
[code]
WEBVTT
00:01:05.000 --> 00:01:15.000
{
"href":"Testing2.html",
"left":"20%",
"top":"10%"
}
[/code]
And lastly my style.css id as follows
[code]
#myElement {
position: absolute;
top:15%;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
#hotspots {
width: 720px;
height: 405px;
position: absolute;
z-index: 99;
pointer-events: none;
margin: 0 auto;
left: 24%;
}
#hotspots span {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../assets/spot.png);
background-repeat: no-repeat;
background-position: center center;
opacity: 0.5;
cursor: pointer;
pointer-events: auto;
transition: 0.2s;
transform: scale(0,0);
-webkit-transition: 0.2s;
-webkit-transform: scale(0,0);
}
[/code]
Thanks ahead of time for any and all assist, I'm really not coming right with this.
