weixin_39663602
weixin_39663602
2021-01-12 14:28

Double click to go Fullscreen pause/play

Browser: any

OS: any

Clappr Version: 0.2.25

Steps to reproduce:

  • start playing a video
  • double click (or double tap) on the container
  • it should just go fullscreen without affecting playback, but it pauses and resumes instead

Did you try to reproduce this issue at http://cdn.clappr.io/ -Yep

It's not a real issue on archived content, but when watching a live stream it loses sync and one has to click "back to live" every time the player goes in and out of fullscreen mode.

Is there a way to change the behavior of "pause" and delay it just slightly, like 200ms in order to work around the issue? I tried calling player.play() and then player.pause() with a timeout, on pause event, but it appears that player.play() just overrides it and won't let it pause afterwards.

Any other way to do this?

该提问来源于开源项目:clappr/clappr

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

9条回答

  • weixin_39996134 weixin_39996134 4月前

    I did some tests and it seems that container double tap event is not working on mobile (at least with my Samsung), but double click event work on desktop.

    UPDATE: it may be the clappr zepto doubleTap event which is broken. UPDATE 2 : oh, the touch module has been removed from custom zepto build (i now remember it was bug at this time). It explains why double tap does not work on mobile device.

    点赞 评论 复制链接分享
  • weixin_39663602 weixin_39663602 4月前

    Hey , thank you for the replies.

    Sounds weird that double tap isn't working on your device, in my setup it does work on 3 devices that I've tested running android 7.1.1, android 8.0 and iOS 12.2.

    I think this issue is common with most video players out there. I feel it's a mostly neglected feature since many people won't notice it. Sites like youtube do exactly that, delay pausing for something like 200ms so when you double click it never stops playing.

    I'll have to dig further for this as it is getting a little more complicated than I anticipated. I will keep you posted if I figure it out. Thanks again for your efforts.

    点赞 评论 复制链接分享
  • weixin_39996134 weixin_39996134 4月前

    I have made a quick fix (#1784), this issue should be fixed in next release (if merged).

    点赞 评论 复制链接分享
  • weixin_39966225 weixin_39966225 4月前

    I just released 0.3.4 with the fix merged in #1784. It should be working right now.

    点赞 评论 复制链接分享
  • weixin_39996134 weixin_39996134 4月前

    A quick solution could be to disable the "click to pause" internal plugin.

    Try this code on demo page :

    javascript
    var playerElement = document.getElementById("player-wrapper");
    
    var player = new Clappr.Player({
      source: 'http://clappr.io/highline.mp4',
      height: 360,
      width: 640,
      events: {
        onReady: function() {
          var p = this.getPlugin('click_to_pause');
          p && p.disable();
        }
      },
    });
    
    player.attachTo(playerElement);
    
    点赞 评论 复制链接分享
  • weixin_39663602 weixin_39663602 4月前

    I did that, but then I realized it breaks functionality on mobile, since there is a bug when tapping on the play/pause button which wont let the media control bar hide until you change fullscreen state. So being able to tap on the video to play or pause is still essential in order for the player to work properly. I might open another issue for this, but for the moment I would just like to know whether I can delay the pause event.

    点赞 评论 复制链接分享
  • weixin_39996134 weixin_39996134 4月前

    A solution could be to override the "click to pause" plugin by a custom one which satisfy your need.

    You could also make a PR which modify the existing, and eventually adding a new player option to configure the delay (which default to zero to keep current behaviour by default).

    点赞 评论 复制链接分享
  • weixin_39663602 weixin_39663602 4月前

    You could also make a PR which modify the existing, and eventually adding a new player option to configure the delay (which default to zero to keep current behaviour by default).

    Could you please elaborate on this? (I'm new to clappr)

    点赞 评论 复制链接分享
  • weixin_39996134 weixin_39996134 4月前

    In Clappr player you can override internal plugin with a third party one if the name is the same.

    So if you create your own playback plugin and name it "click_to_pause" it will replace the internal one.

    Another path may be to modify the existing one but after checked source code, this issue may be tricky to fix, because the pause/play container click event is handled by the click_to_pause playback plugin while the container double click event is handled by the mediacontrols plugin.

    点赞 评论 复制链接分享

相关推荐