-- 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]
Raw Testing of Coding
jwplayer.key = "";
jwplayer("hotspots").setup({
file: "testingvid.mp4",
height: "50%",
width: "50%"
});
[/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.
↧