search

tjenkinson / clappr-thumbnails-plugin

A plugin for clappr which will display thumbnails when hovering over the scrub bar. Thumbnails can either be individual images or a sprite sheet.
https://tjenkinson.github.io/clappr-thumbnails-plugin/demo/
MIT License
44 stars 14 forks source link

simulate hover for mobile devices #132

Closed anesuc closed 1 year ago

anesuc commented 1 year ago

Hi all,

I am trying to make my clappr player more mobile friendly. One of the features is dragging left and right on the player should allow user to precisely seek. It should be showing thumbnails as they do this. Ideas on simulating hovering at a given position on the seek bar?

anesuc commented 1 year ago

Figured it out eventually. Not the cleanest solution though so if anyone has a better solution you can re-open this.

My solution is:

var playbackBar = $(".bar-background")[0];
var event = new MouseEvent('mousemove', {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: posX,
    clientY: playbackBarRect.top + (playbackBarRect.height / 2)
});

playbackBar.dispatchEvent(event);