Skip to content

Video Objects Capture Click Events and Prevent Scroll #1120

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.

Sign up for GitHub

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

Jump to bottom
Closed
calendee opened this issue Apr 12, 2014 · 5 comments
Closed

Video Objects Capture Click Events and Prevent Scroll #1120

calendee opened this issue Apr 12, 2014 · 5 comments
Assignees
@adamdbradley

Comments

@calendee
Copy link

iOS : When a view has a <video> object, on an iOS device, the video is playable by clicking on it. However, the view cannot be scrolled if the touchstart event begins in the video area.

Chome with Touch Emulation : When a view has a <video> object, on in emulation mode, the video cannot be played. However, the view CAN be scrolled if the touchstart event begins in the video area.

Chome without Emulation : Video object can be scrolled and started.

Forum : http://forum.ionicframework.com/t/scroll-originating-on-video-element-does-not-work-on-ios-devices/2877

Reproduce :

  • ionic start myApp blank

  • Edit HTML to contain this :
  <body ng-app="starter">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Video Problems</h1>
    </ion-header-bar>

    <ion-content padding="true">
      <h2>Content</h2>
      <video controls width=450 height=260 poster="https://www.apple.com/home/images/promo_iphone5s.jpg">
        <source src="http://mastbaumbishop.wikispaces.com/file/view/sample.m4v/77739109/sample.m4v">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">
      </video>  
    </ion-content>

  </body>

FYI : This is related to #723

If you modify the IS_EMBEDDED_OBJECT_REGEX to include video, things get ever more crazy.
@adamdbradley adamdbradley self-assigned this Apr 12, 2014
This was referenced Apr 17, 2014
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
@adamdbradley
Copy link
Contributor

Closed in aac1d17

@adamdbradley adamdbradley mentioned this issue Apr 17, 2014
Closed
@calendee
Copy link
Author

@adamdbradley Unfortunately, this is still not fixed. Using the nighty.

On iOS, you can click the video and start it. However, if you try to scroll up or down and the scroll event starts inside the video object, it will not scroll the view. It makes it really difficult to scroll if a video object fills most of the view.

@adamdbradley adamdbradley reopened this Apr 18, 2014
@adamdbradley
Copy link
Contributor

This will be an issue when using a video element inside of the JS scroll. Basically video takes control of all the touch events and never gets to our code, so if you still need to scroll on top of a video you cannot use the JS scroll method.

@mlynch
Copy link
Contributor

mlynch commented Apr 30, 2014

I recommend an image that loads the video later. It's very rare to have a list of loaded videos and on mobile the iphone will expand this into a full screen display

Sent from my iPhone

On Apr 30, 2014, at 9:19 AM, Adam Bradley notifications@github.com wrote:

This will be an issue when using a video element inside of the JS scroll. Basically video takes control of all the touch events and never gets to our code, so if you still need to scroll on top of a video you cannot use the JS scroll method.

—
Reply to this email directly or view it on GitHub.

@perrygovier perrygovier mentioned this issue Jun 16, 2014
Closed
@shivamsngh shivamsngh mentioned this issue Aug 7, 2017
Closed
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 6, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@adamdbradley adamdbradley

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mlynch @calendee @adamdbradley