Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mouse selection doesn't work with video tag controls #160

Open
AlexiZ opened this issue Feb 24, 2022 · 4 comments
Open

Mouse selection doesn't work with video tag controls #160

AlexiZ opened this issue Feb 24, 2022 · 4 comments
Labels
browser quirk Browser / devices specific issue help wanted Extra attention is needed

Comments

@AlexiZ
Copy link

AlexiZ commented Feb 24, 2022

What is the problem?

Mouse selection doesn't work with interactive tags like "video", in my case.

What is the current behavior?

It is not possible to start a mouse selection within an html video tag with controls on, with my own content and not an iframe or a third-party service like Youtube or Vimeo.
It's also impossible to end a mouse selection in a video tag. The selection-area is stuck to the cursor until I click outside of the video tag.

Please provide the steps to reproduce and create a CodeSandbox.

Here is a codepen where you can try to :

  • make a mouse selection starting from the blue area, go above the, release mouse left => selection is stuck to the mouse and you have to click elsewhere to close it.
  • start mouse selection on video => doesn't work but launches the video.

What is the expected behavior?

I would like to stop the mouse selection on mouse release, wherever the cursor is, even on a video tag.

Your environment:

Toolset (e.g. webpack, vite, vue-cli...): 
Version (@viselect/<insert package>):
Browser:  
OS:  

see codepen above

@AlexiZ AlexiZ added the unconfirmed Problem is not confirmed yet label Feb 24, 2022
@AlexiZ
Copy link
Author

AlexiZ commented Mar 25, 2022

@simonwep Sorry to bother but do you have any time to check this please ?

@simonwep
Copy link
Owner

Hey! I'll try to take a look at it this weekend :)

@simonwep
Copy link
Owner

Jup, seems to be an bug - the "mouseup" event doesn't bubble up to the document if it's origin is a video tag. I'd have to bind events to each such elements manually first... not sure how this can be efficiently fixed though. Maybe I can take a closer look somewhere next week, can't promise anything though - sorry :/

@simonwep simonwep added bug Something isn't working browser quirk Browser / devices specific issue and removed unconfirmed Problem is not confirmed yet labels Mar 27, 2022
@AlexiZ
Copy link
Author

AlexiZ commented Mar 27, 2022

Thank you for your answer, it actually helped me understand what was going on here.
So, it seems that video tags aren't an element in the DOM, and that's why some events like mouseup are not triggered.
Issue can be avoided by using object tag like so, but video now autoplays itself and that's a new problem to solve...
If you find a solution for the video tag one day, I'll take it :)
Meanwhile, thank you for your time again and I wish you a good day.

@simonwep simonwep added help wanted Extra attention is needed and removed bug Something isn't working labels Jul 15, 2022
@simonwep simonwep removed their assignment Oct 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser quirk Browser / devices specific issue help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants