videojs / video.js

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

在ios端,控制条的暂停按钮需要点击俩次才会暂停;点击全屏按钮进去之后立马又会退出来;On ios, the pause button of the control bar needs to be clicked twice before it can be paused.Click the full screen button to go in and it will exit immediately; #5674

Closed luckcv closed 5 years ago

luckcv commented 5 years ago

Description

在ios端,控制条的暂停按钮需要点击俩次才会暂停;点击全屏按钮进去之后立马又会退出来; On ios, the pause button of the control bar needs to be clicked twice before it can be paused.Click the full screen button to go in and it will exit immediately;

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue. 1.点击播放视频后,点击控制条的暂停按钮,需要点击俩次才会生效 2.点击全屏按钮,进入后立马退出,不能实现全屏; 3.在mac端设置了关闭自动播放,进入页面后还是会自动播放 4.以上问题只出现在ios设备上

  1. After clicking play video, click the pause button in the control bar. It takes two clicks to take effect
  2. Click the full-screen button and exit immediately after entering.
  3. Turn off auto-play on the MAC, and it will still play automatically after entering the page
  4. The above problems only appear on ios devices

Results

Expected

点击一次暂停,正常进入全屏

Actual

点击一次暂停无效,无法进入全屏

Error output

在Google Chrome 上报错: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. UNable to preventDefaukt inside passive event listener invocation.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? 7.3.0

browsers

MAC Google Chrome

OSes

what platforms (operating systems and devices) are affected? IOS

plugins

are any videojs plugins being used on the page? If so, please list them below.

welcome[bot] commented 5 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 5 years ago

I'm unable to reproduce this on my device on either iOS Safari or iOS Chrome. Are you using some kind of framework like ionic or a "fastclick" library on the page? This often causes issues with Video.js's tap handling on mobile devices.

luckcv commented 5 years ago

我无法在iOS Safari或iOS Chrome上的设备上重现这一点。您是否正在使用某种类型的框架,如离子或页面上的“fastclick”库?这通常会导致Video.js在移动设备上进行点击处理时出现问题。

Yes, I use it in the vue framework, and I find that my page has an additional default click event layer, which may be caused by accident, but it can't be full screen in mobile ios. I really don't understand.

gkatsev commented 5 years ago

iphone doesn't allow making non-video elements fullscreen and the video element will only go into the native player. ipads on the latest ios will, however.

luckcv commented 5 years ago

iphone不允许全视频非视频元素,视频元素只会进入原生播放器。但是,最新的ios上的ipads会。

No, my question is, it clicks into the full screen on the phone and then immediately exits.It's kind of like a flashback

luckcv commented 5 years ago

The problem with some buttons that require two clicks to work is really with the fastclick plug-in, which is also documented as needing to add the class name "needsclick," which hopefully someone who encounters this problem will see later.

zx32000000 commented 5 years ago

你好!也遇到了了和你同样的问题,IOS无法全屏,点击暂停会暂停然后立即播放,需要两次点击才生效,请问您是如何解决的?谢谢!

mister-ben commented 5 years ago

Assuming you are also using fastclick, see the solution @luckcv described

https://github.com/ftlabs/fastclick/blob/master/README.md#ignore-certain-elements-with-needsclick

Or consider removing fastclick. They have this note in the project's readme:

Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.

G1King commented 5 years ago

@mister-ben thank you very much! Solved my problem

luckcv commented 5 years ago

你好!也遇到了了和你同样的问题,IOS无法全屏,点击暂停会暂停然后立即播放,需要两次点击才生效,请问您是如何解决的?谢谢!

点击俩次才生效是因为fastclick插件导致,在这个插件的文档有说明,楼下也有人解答了,ios无法全屏播放很抱歉这个问题我也没解决。

chenxxing commented 2 years ago

而且ios下音量条 事点击不了的