search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
38.1k stars 7.45k forks source link

video.js conflicts with fastclick, zepto and the solution I suggest #6613

Closed sg1093754565 closed 4 years ago

sg1093754565 commented 4 years ago

Description

When the project uses video.js, fastclick and zepto at the same time, we will find that the click event will be triggered more than once。 This is not a new bug, but when I look for solutions that people have provided in the past, they only say that they should not be used together. Few people locate the cause and provide better solutions. So I try to find a solution for this and finally locate the cause： When video.js, zepto, and fastclick handle click events, they all choose to manually trigger a tap event in the callback of 'touchend'. Although both fastclick and zepto call preventDefault and stopImmediatePropagation in the 'click' event to prevent the 'click' event from continuing, they have not handled the 'touchend' event. So when the 'click' event comes, all three respond in 'touchend' and do not prevent each other, which results in the 'click' event responding more than once. My solution is very simple, design a "source" attribute for events of video.js, video.js also only responds to the "tap" event whose source is "video.js", which can effectively avoid this kind of problem appear. But besides that, I have two questions, I hope video.js can give me answers:       1. My current problem needs to be solved as soon as possible, but this method needs to modify the source code. Can I copy and modify the video.js source code for using?       2. The reason why fastclick and zepto adopt this method is to solve the "ios 300ms delay" problem, but why should video.js use this method? I don't understand.

At the last, I want to receive feedback as soon as possible。Thank you!

welcome[bot] commented 4 years ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

gkatsev commented 4 years ago 
   1. My current problem needs to be solved as soon as possible, but this method needs to modify the source code. Can I copy and modify the video.js source code for using?

Video.js is open source and licensed under the Apache-2.0 license. You can modify the source and do whatever you want as long as you follow the license. If you have a fix for this in a fork, consider opening a pull request, and we'll review and if it's a reasonable change we'll be happy to merge it in to Video.js.

  2. The reason why fastclick and zepto adopt this method is to solve the "ios 300ms delay" problem, but why should video.js use this method? I don't understand.

We do so to make internal code changes easier so that we don't need to worry about whether a touchend is really part of a click or if the finger moved a bit and thus we shouldn't register it as a tap. It simplifies other parts of the code.

Also, it seems like fastclick (and probably zepto as well) has a way to have it ignore certain elemets https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick, so, adding needsclick class to the video.js player may be easiest way of fixing the issue.

sg1093754565 commented 4 years ago 
   1. My current problem needs to be solved as soon as possible, but this method needs to modify the source code. Can I copy and modify the video.js source code for using?

Video.js is open source and licensed under the Apache-2.0 license. You can modify the source and do whatever you want as long as you follow the license. If you have a fix for this in a fork, consider opening a pull request, and we'll review and if it's a reasonable change we'll be happy to merge it in to Video.js.

  2. The reason why fastclick and zepto adopt this method is to solve the "ios 300ms delay" problem, but why should video.js use this method? I don't understand.

We do so to make internal code changes easier so that we don't need to worry about whether a touchend is really part of a click or if the finger moved a bit and thus we shouldn't register it as a tap. It simplifies other parts of the code.

Also, it seems like fastclick (and probably zepto as well) has a way to have it ignore certain elemets https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick, so, adding needsclick class to the video.js player may be easiest way of fixing the issue.

I know that fastclick has 'needsclick' but zepto don'ts have.Besides, I can't decide whether to use zepto for pages that use my component。so I need to change the source code.How can I open a pull request? I don't have permission to push the code to the remote branch。

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.