Amphtml: amp-ima-video freezes on mobile browsers when started via tap and drag

[shawnbuso]

What's the issue?

amp-ima-video freezes when started via tap and drag instead of just a tap.

How do we reproduce the issue?

1. Open a scrollable page with an amp-ima-video extesion. e.g. https://ampbyexample.com/components/amp-ima-video/
2. Tap the video and scroll the page a bit while tapping.

Expected: Either the video works or nothing happens
Actual: The video attempts to play but freezes on the first frame of ads or content, depending on the platform.

What browsers are affected?

So far, mobile Safari and Android Chrome. I haven't tested other mobile browsers.

Which AMP version is affected?

All versions that contain amp-ima-video. This issue has existed since the amp-ima-video extension was created - it is not a regression.

/assign shawnbuso

[shawnbuso]

@aghassemi I think I have a working solution for this one, I just need to test on iPhone, but I'm running into lots of issues. I tried the ngrok solution in DEVELOPING.md and that's making my iframe 404 with "The requested URL /1515094745957/frame.html was not found on this server."

When that failed I tried pushing to heroku and loading from there, but that's erroring with "[Error] Failed to load resource: Could not connect to the server. http://ads.localhost/dist.3p/current/frame.max.html (frame.max.html, line 0)" I've confirmed that I have AMP_TESTING_HOST set to "amp-ima-video.herokuapp.com" which is the domain I'm loading from. I also have NPM_CONFIG_PRODUCTION set to false but I'm not sure if that's related. Any help would be much appreciated :) Thanks!

[rsimha]

@shawnbuso We've had long-standing issues with testing ads on non-localhost servers, documented in #12054. I would have expected #12673 to fix the heroku case too. I'm taking a look right now.

Could you send me your exact repro steps?

/cc @lannka @erwinmombay @bradfrizzell @aghassemi

[shawnbuso]

Sure thing - here's what I did:

1. In an existing fork I've been using for development, checkout master and pull upstream.
2. git checkout -b feature_branch
3. yarn (to make sure I'm up to date with dependencies)
4. gulp
5. Verify that things are working correctly at localhost:8000
6. Kill gulp.
7. Run ngrok http 8000
8. Load up the URL it gives my on my iPhone. See the 404 error mentioned above.
9. Give up on ngrok, try heroku - I have a heroku instance that was previously set up using the instructions here.
10. git push heroku feature_branch:master -f
11. Load up amp-ima-video.herokuapp.com on my iPhone and see the error mentioned above in the console.
12. Try loading heroku on my desktop, see a different error - "GET http://ads.localhost/dist.3p/current/integration.js net::ERR_CONNECTION_REFUSED"

Along the way I would occasionally get errors about my experiment being disabled, so I'd just run AMP.toggleExperiment('amp-ima-video') in the console as needed to resolve those.

[rsimha]

@shawnbuso Thanks for the steps. I took a look at our heroku setup code, and it's fairly outdated.

I've published a fix in #12703 which enables localDev in the 3p ad frame in addition to the AMP runtime, and updates (and simplifies) the heroku setup. I'll check in with you once the fix is reviewed and merged.

[rsimha]

@shawnbuso Could you sync your branch past #12703 and see if your heroku tests run okay?

[shawnbuso]

Works like a charm, thanks! I should have a PR out to fix this issue by the end of the week.