Question 215603 in Html Question posted in
Some basic documentation can be found here.

Html – How can I change the hover cursor when a video is playing or not?

I’ve been working on a web project that requires me to change the cursor to a custom image when hovering over an object. This is the code I have used:

.add-to-wishlist:hover {
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;
}

I now want to be able to extend that to detect the state of the object and show a different image depending on that state.

The key example is when hovering over a video player, show one image if the video is playing and show another image if it is not. These would be an image that says ‘pause’ or ‘play’ respectively.

I am just not sure how to do this, with pure CSS or including JavaScript. How do I detect if a video is playing and change the hover cursor image accordingly?

Thank you!

Tags:

2

Answers


  1. 0

    You can do this with javascript.

    I don’t know if you can do it with CSS alone.

    Look at eventhandlers for entereing the video here:

    https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

    And here is a link to some easy to implement code to detect the playingstate of a video

    Detect if video is playing

    Write some javascript that executes on mouseenter and mouseleave.

    Login or Signup to reply.
  2. 0

    Using video element events "play" and "pause" you can add toggle a class .playing to the element, and the rest is simple css, as seen in comments.

    video.addEventListener("play", function(ev) {
  ev.target.classList.add("playing");
})


video.addEventListener("pause", function(ev) {
  ev.target.classList.remove("playing");
})
    #video {
  border: 5px solid green;
}

#video:hover {
  border: 5px solid blue;
}

#video.playing {
  border: 5px solid red;
}

#video.playing:hover {
  border: 5px solid yellow;
}
    <h2>play/pause/hover</h2>

<video id="video" controls width="250">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
</video>

    This approach hasn’t been tested with all cases (maybe error doesn’t fire pause etc). But you can take this idea to other methods of detecting video play. according to chatGPT you can:

    const videoElement = document.getElementById('myVideo');

function isVideoPlaying() {
  return !videoElement.paused;
}

// Example usage:
if (isVideoPlaying()) {
  console.log('Video is playing!');
} else {
  console.log('Video is paused or not yet started.');
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search