How to make video-time-based cursors?

[Winston]

function timerpoint() {
 if (vid.duration = vid.duration * 0) {
 document.getElementById("clock").style.cursor = "url(point/Percent00.cur)";    
 } else if (vid.duration > vid.duration * 0) {
 document.getElementById("clock").style.cursor = "url(point/Percent00.cur)";    
 } else if (vid.duration > vid.duration * 0.1) {
 document.getElementById("clock").style.cursor = "url(point/Percent10.cur)";    
 } else if (vid.duration > vid.duration * 0.2) {
 document.getElementById("clock").style.cursor = "url(point/Percent20.cur)";    
 } else if (vid.duration > vid.duration * 0.3) {
 document.getElementById("clock").style.cursor = "url(point/Percent30.cur)";    
 } else if (vid.duration > vid.duration * 0.4) {
 document.getElementById("clock").style.cursor = "url(point/Percent40.cur)";    
 } else if (vid.duration > vid.duration * 0.5) {
 document.getElementById("clock").style.cursor = "url(point/Percent50.cur)";    
 } else if (vid.duration > vid.duration * 0.6) {
 document.getElementById("clock").style.cursor = "url(point/Percent60.cur)";    
 } else if (vid.duration > vid.duration * 0.7) {
 document.getElementById("clock").style.cursor = "url(point/Percent70.cur)";    
 } else if (vid.duration > vid.duration * 0.8) {
 document.getElementById("clock").style.cursor = "url(point/Percent80.cur)";    
 } else if (vid.duration > vid.duration * 0.9) {
 document.getElementById("clock").style.cursor = "url(point/Percent90.cur)";    
 } else if (vid.duration = vid.duration * 1) {
 document.getElementById("clock").style.cursor = "url(point/Percent00.cur)";    
 } else { 
 document.getElementById("clock").style.cursor = "default";
}
}

This is the code I tried, but stops up parts of the page. I want to show when the video hovers over this

<a class="clocktime">Video Clock: <a id="clock" style="cursor:default">000.00</a>&#x25;</a>

a specific pointer comes up based on how far the video played. Is there a simple and/or quick code to do this?

[Ingolme]

I'm not entirely sure what you're asking for.

• Do you want the cursor to appear on the video itself or on this <a> element?
• Do you actually want the cursor image to update or do you just want to update value of the text inside the <a> element?
• Are you trying to have the <a> element follow the mouse pointer?

Since I don't know what you're really looking for, I can only make guesses.

 Guess 1: Making the video cursor change

This code will change which cursor is displayed when hovering over the video. No <a> element is needed, the cursor is shown on the video itself. This is the simplest code which could fit one of your requirements.

<video id="video"> ... </video>

<script>
setInterval(updateCursor, 1000);
function updateCursor() {
  const cursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent01.cur)",
    "url(point/Percent02.cur)",
    "url(point/Percent03.cur)",
    "url(point/Percent04.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent06.cur)",
    "url(point/Percent07.cur)",
    "url(point/Percent08.cur)",
    "url(point/Percent09.cur)",
    "url(point/Percent00.cur)",
  ];
  
  // Get a reference to the video
  let video = document.getElementById("video");

  // Get a value from 0 to 10 based on how far the video has played
  let index = Math.floor(10 * video.currentTime / video.duration);
  
  // Select a cursor based on the index and assign it to the video element
  video.style.cursor = cursors[index];
}
</script>

 

Guess 2: Showing video percentage on the page

This code will update some text on the page indicating what percentage of the video has been played. If you want this text to follow the mouse cursor while hovering over the video, it can be done but the code is much more complicated.

<video id="video"> ... </video>
<br>
<a class="clocktime">Video Clock: <a id="clock">00.00</a>%</a>

<script>
// When the video plays, begin a timer to update the percentage
var video = document.getElementById("video");
video.addEventListener("play", () => { setTimeout(updateClock, 500); });

function updateClock(e) {
  let video = document.getElementById("video");
  
  // Calculate the percentage
  let percentage = 100 * video.currentTime / video.duration;
  
  // Show the percentage in the <a id="clock"> element with two digits of precision
  document.getElementById("clock").innerHTML = percentage.toFixed(2);
  
  // Continue updating the clock if the video is playing
  if(!video.paused) { setTimeout(updateClock, 500); }
}
</script>

 

[Winston]

I wanted to show: "url(point/Percent00.cur)" at 0% to 9%, "url(point/Percent01.cur)" at 10% to 19%, "url(point/Percent02.cur)" at 20 to 29%, up until "url(point/Percent09.cur)" Showing 90% to 99%, and just reset to "url(point/Percent00.cur)" at 100%.

 

For example, halfway through the video, I want to show "url(point/Percent50.cur)".

[Ingolme]

The first example I wrote will do that. But you haven't specified where and when to show the cursor.

[Winston]

Where and when? Where: I hover over this:
 

<a> Video Clock: <a id="timar" class="" onhover="" onmouseout="">0</a>&#x25;</a>

When: I am hovering over it. (I think I might need "onmouseout/onmouseleave" to stop the cursors when I move off the command)

[Winston]

Can you give me code to enable it when I hover over a specific <a> and disable it when I hover-out or leave?

[Winston]

I noticed I accidently used "vid.duration" on both at the beginning, I meant one to be "vid.currentTime".

 

[Winston]

Sorry if I wasn't clear, but to answer the questions...

 

Do I want the cursor to appear on the video itself or on this <a> element?

In the <a> element.

 

Do I actually want the cursor image to update or do I just want to update value of the text inside the <a> element?

The cursor image, I eventually already did the text.

 

Am I trying to have the <a> element follow the mouse pointer?

No, just show the custom cursor in the <a>, and when I hover-out of the <a>, return to normal.

 

Please reply, soon.

[Ingolme]

The code I wrote which updates the cursor while the video is playing just needs one change to put the cursor on the link.

Just change this line:

video.style.cursor = cursors[index];

Replacing the variable "video" with a reference to the <a> element you want the cursor to be attached to.

[Winston]

How do I do that? I tried this...

<a id="clocksper" class="clocksper" element="clocksper"><a>...</a></a>
  
<script>
setInterval(timeCursor, 200);
function timeCursor() {
  const timecursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent01.cur)",
    "url(point/Percent02.cur)",
    "url(point/Percent03.cur)",
    "url(point/Percent04.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent06.cur)",
    "url(point/Percent07.cur)",
    "url(point/Percent08.cur)",
    "url(point/Percent09.cur)",
    "url(point/Percent00.cur)",
  ];
  
  let index = Math.floor(10 * vid.currentTime / vid.duration);
  
  clocksper.style.cursor = timecursors[index];
}
  </script>
  

This is part of the code, what I think I need to change, but as you can see, I tried using "clocksper" in "id", "class" and "element". None of them worked; still shows the "Select Text" cursor. Do you need more code?

[Winston]

How to do it in an element name? For example, I don't want all <a> to be effected, but just <a id="example">

[Winston]

Silly me, I had the names wrong. I had Percent00 - Percent10 instead of Percent00 - Percent90. (And I added more cursors for 5, 15, 25...) Could you give me an update, something like...?:

setInterval(timeCursor, 200);
function timeCursor() {
  const timecursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent10.cur)",
    "url(point/Percent15.cur)",
    "url(point/Percent20.cur)",
    "url(point/Percent25.cur)",
    "url(point/Percent30.cur)",
    "url(point/Percent35.cur)",
    "url(point/Percent40.cur)",
    "url(point/Percent45.cur)",
    "url(point/Percent50.cur)",
    "url(point/Percent55.cur)",
    "url(point/Percent60.cur)",
    "url(point/Percent65.cur)",
    "url(point/Percent70.cur)",
    "url(point/Percent75.cur)",
    "url(point/Percent80.cur)",
    "url(point/Percent85.cur)",
    "url(point/Percent90.cur)",
    "url(point/Percent95.cur)",
    "url(point/Percent00.cur)",
  ];
  
  let index = Math.floor(20 * vid.currentTime / vid.duration);
  
  a.clocksper.style.cursor = timecursors[index];
}
 

setInterval(timeCursor, 200);
function timeCursor() {
  const timecursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent10.cur)",
    "url(point/Percent15.cur)",
    "url(point/Percent20.cur)",
    "url(point/Percent25.cur)",
    "url(point/Percent30.cur)",
    "url(point/Percent35.cur)",
    "url(point/Percent40.cur)",
    "url(point/Percent45.cur)",
    "url(point/Percent50.cur)",
    "url(point/Percent55.cur)",
    "url(point/Percent60.cur)",
    "url(point/Percent65.cur)",
    "url(point/Percent70.cur)",
    "url(point/Percent75.cur)",
    "url(point/Percent80.cur)",
    "url(point/Percent85.cur)",
    "url(point/Percent90.cur)",
    "url(point/Percent95.cur)",
    "url(point/Percent00.cur)",
  ];
  
  let index = Math.floor(20 * vid.currentTime / vid.duration);
  
  a.clocksper.style.cursor = timecursors[index];
}

 

[Winston]

Sorry, I wrote it twice. Ignore that. I meant just one code, not two.

 

[Winston]

I meant a specific <a>, like <a id="example"> or <a class="example">, not all of them.

[Winston]

Ingolme Are you busy? I'm sorry if I am not being specific, I was up since Midnight trying to figure this out, so I'm probably a bit confused to the point I'm not adding enough detail. Would you like to see the entire page to correct the mistake?

[Ingolme]

I have a job, so I'm not able to check the forums during work hours.

Your code is almost perfect, all you need to do is get a reference to the link. The JavaScript DOM Mehods tutorial has information on how to get a reference to the link that you want. You just need to use getElementById() which is explained on that tutorial page.

You won't be able to learn if I write all of the code for you, it would be helpful if you go through the tutorials again to get a better idea of how the languages work.

[Winston]

 

Is it possible to link something in <style> from/to <script>?

 

 

[Ingolme]

I'm not sure what kind of link you're looking for.

Both CSS and Javascript are connected to the HTML. Javascript can read and write data into the HTML DOM while CSS changes the appearance of the HTML.

Through use of an HTML element's style property, Javascript is able to assign CSS rules to an HTML element.

[Winston]

I have tried setting it up like this:

<style>
  .clocksper {cursor: timecursors[index],auto}
</style>

<a id="" class="clocksper" onmouseover="" style="cursor:timecursors[index];">...</a>

<script>
  clocksper.ontimeupdate = function() {timeCursor()};
function timeCursor() {
  const timecursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent10.cur)",
    "url(point/Percent15.cur)",
    "url(point/Percent20.cur)",
    "url(point/Percent25.cur)",
    "url(point/Percent30.cur)",
    "url(point/Percent35.cur)",
    "url(point/Percent40.cur)",
    "url(point/Percent45.cur)",
    "url(point/Percent50.cur)",
    "url(point/Percent55.cur)",
    "url(point/Percent60.cur)",
    "url(point/Percent65.cur)",
    "url(point/Percent70.cur)",
    "url(point/Percent75.cur)",
    "url(point/Percent80.cur)",
    "url(point/Percent85.cur)",
    "url(point/Percent90.cur)",
    "url(point/Percent95.cur)",
    "url(point/Percent00.cur)",
  ];
  
  let index = Math.floor(20 * vid.currentTime / vid.duration);
  
  document.getElementsByClassName("clocksper").style.cursor = document.getElementsByClassName("clocksper").style.cursor == timecursors[index];
}
</script> 

I'm stuck, I can't seem to show the cursor at a specific video time. I tried rephrasing in If-Then-Else, Tried using "?" and ":", Tried renaming Id, Tried even resetting the browser, nothing worked.

 

Could you please give me code to do it in an named <a> element? (<a id=""> <a class=""> <a onmouseover="">) And disable it when off the element?

[Ingolme]

No, CSS cannot use Javascript variables. None of this work can be done by CSS, it can only be done with Javascript.

I've finished writing the code for you. I have put comments explaining exactly what each line of code is for in the hope that if you need to change something you understand how it works and will know what to change.

<video id="video"> ... </video>
<br>
<a class="clocktime">Video Clock: <a id="clock">00.00</a>%</a>

<script>
// This line of code tells the browser to call the function timeCursor() every 200 milliseconds.
setInterval(timeCursor, 200);

// This is the timeCursor function
function timeCursor() {
  
  // This array has a all of the possible cursors in order.
  const timecursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent10.cur)",
    "url(point/Percent15.cur)",
    "url(point/Percent20.cur)",
    "url(point/Percent25.cur)",
    "url(point/Percent30.cur)",
    "url(point/Percent35.cur)",
    "url(point/Percent40.cur)",
    "url(point/Percent45.cur)",
    "url(point/Percent50.cur)",
    "url(point/Percent55.cur)",
    "url(point/Percent60.cur)",
    "url(point/Percent65.cur)",
    "url(point/Percent70.cur)",
    "url(point/Percent75.cur)",
    "url(point/Percent80.cur)",
    "url(point/Percent85.cur)",
    "url(point/Percent90.cur)",
    "url(point/Percent95.cur)",
    "url(point/Percent00.cur)",
  ];
  
  // A reference to the video is REQUIRED in order to measure how much time has passed.
  // The variable is named "video" and any code that says "video" in the rest of this
  // script is using THIS variable.
  let video = document.getElementById("video");
  
  // This generates a number between 0 and 20 based on the
  // amount of time that has passed in the video which will
  // let us select the right cursor from the array above.
  let index = Math.floor(20 * video.currentTime / video.duration);
  
  // We need a reference to the link which will show the cursor.
  // We use getElementById() because the link we want has an id attribute with a value "clock"
  let a = document.getElementById("clock");
  
  // The variable "a" we created above lets us change the cursor for this link.
  // "timecursors" is the array we defined above and "index" selects
  // one of the values from that array.
  a.style.cursor = timecursors[index];
}
</script>

A lot of the mistakes you are making in your code show that you are not familiar with the basics of Javascript, you need to study the Javascript tutorial thoroughly.

[Winston]

I hate to say it, but it still isn't working, can I have an alternate code (like an "if-then-else" statement or something)?

Edited November 16, 2021 by Winston

[Winston]

Just thought about this: Does it not work on updating text? Is there a way around? As it counts (or whenever more specifically), I try to hover over it, but the pointer remains showing the "select" cursor.

[Winston]

  let a = document.getElementById("clock");
  
  a.style.cursor = timecursors[index];

Wouldn't this replace all <a> elements? it says "a".

[Ingolme]

There are some reasons which might cause the code not to work:

• The cursor images do not exist.
• The cursor images are in the wrong location in the filesystem.
• A different script on the page is interfering.

Without seeing the website for myself I can't know why it's not working.

 

2 hours ago, Winston said:

  let a = document.getElementById("clock");
  
  a.style.cursor = timecursors[index];

Wouldn't this replace all <a> elements? it says "a".

"a" is the name of the variable which was declared in the line above with the let keyword. It contains a reference to getElementById("clock")

It doesn't have to be called "a", I could call it whatever I want. This code is exactly the same as the above code:

let whateverIwant = document.getElementById("clock");
whateverIwant.style.cursor = timecursors[index];

You should read about variables in the tutorial: https://www.w3schools.com/js/js_variables.asp

[Winston]

The other still pointers work fine, it's just when I try to animate one and sync it to the video. I managed to make the pointer animate somewhat, but not in sync with anything:

<!DOCTYPE html>
<html>
<body>

<p>Flipping diagonal pointers.</p>

<script>
var myVar = setInterval(setColor, 300);
 
function setColor() {
  var clickthis = document.body;
  clickthis.style.cursor = clickthis.style.cursor == "sw-resize" ? "nw-resize" : "sw-resize";
}

</script>

</body>
</html>

Hover over the text and it changes.

Is it possible to make an If-Then-Else version of animated cursors and stay working (without glitching and resetting automatically in background) and sync the cursor to the timeline of a video? If so, what would I write to do that? (Would it be similar to my first post with If-Then-Else?)

Edited November 17, 2021 by Winston