Video has problems on Tablets

[trouille]

Expected behavior

Video subject within a PBBP classification interface should play as expected on Tablets

Current behavior

Reported by researcher (working on https://www.zooniverse.org/projects/zooniverse/arizona-batwatch/classify). Note: I haven't had a chance to verify personally, but she was testing while I was on Skype w/ her:

• On Android Tablet in Chrome, you can't use the reduced speed options
• on iPads in Safari, the video doesn't play at all

  Additional notes

The reason this matters is that Arizona BatWatch does a lot of outreach to thousands of visitors to Mammoth Cave national park. All their outreach is via Tablets. This will be similar for other museums. It would be good to think about video working on these devices.

BUT, with that said, if you find you hit a wall and can't find a fix, let me know and I can just be clear with Shannon, the research lead for this project, that we just don't support that operating system at the moment for video. Would be a good grant to pursue.

• Operating system: Tablet
• Browser: (see notes above about which operating systems and browsers)

[eatyourgreens]

Can we split this into two issues, one for iOS and one for Android, since they seem to be two different problems.

On iOS, I'm getting the loading animation playing indefinitely ie. the video file doesn't seem to load at all. Is that the iPad bug that you're reporting here?

[eatyourgreens]

One other thought: on Android and iOS, I'd expect embedded video to play fullscreen in the OS's own video player, so it doesn't surprise me if our custom controls don't work.

Video on handheld devices might be something to consider, and maybe spec out, for someone with mobile expertise.

[eatyourgreens]

Safari on iOS and OSX may not support the canplay event.: http://stackoverflow.com/questions/9920297/html5-audio-canplay-event-doesnt-fire-on-safari-mac-desktop

[eatyourgreens]

Re. the Android problem, playbackRate may not be supported there:

Sadly the playbackRate attribute is not well supported by browsers/webviews so it's best not to use it.

from https://software.intel.com/en-us/forums/intel-xdk/topic/543325

Sad times: no changing the playback speed on Android browsers 😞

[eatyourgreens]

Ok, test page up at https://video-loading.pfe-preview.zooniverse.org/projects/zooniverse/arizona-batwatch/classify?env=production which simply removes the loading overlay from video subjects. Should work on iPads, @trouille

Looks like the transparent SVG image used by drawing tasks blocks you from tapping on the video to play it, but the play button bottom left works, as does changing the playback rate.

[eatyourgreens]

@trouille Any thoughts on my comments above?

[eatyourgreens]

Noting here that #3699 allows you to click directly onto video elements in the classifier.