React Native Android WebView Vimeo Player Control bar dissapearing

Question

So I was facing the problem on React Native WebView on Android where page containing Vimeo video would load and I could play the video, but the control would disappear eventually and I would not be able to control thereafter (pause, etc).

I've done some debugging and found a (hacky) solution so I'd like to share my findings:

Arezzini

Answer 1

Here are my findings:

1. There is a warning on the console of WebView that says at Line 18 of player.js located at https://f.vimeocdn.com/p/2.68.16/js/player.js:
   [Deprecation] 'HTMLVideoElement.webkitSupportsFullscreen' is deprecated. Please use 'Document.fullscreenEnabled' instead. when the problem will/do occurs.

2. Changing the user agent stops this warning to show up, and the issue does not occur.

3. User agent containing term Android seems to cause the issue. For example, my user agent is Mozilla/5.0 (Linux; Android 7.1.1; ONEPLUS A5000 Build/NMF26X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/64.0.3282.137 Mobile Safari/537.36 but when I remove the Android from it, it works fine.

From this in mind, setting user agent as simple as " " fixes this problem as well (although not recommended).

So to me it seems like an issue caused by the actual Vimeo player's code (not in this library), which seems to be doing a lot of things with user agent. It'll be great if we can get some insights from someone who is familiar with the player.js.

Arezzini

This deprecation message is still showing over a year later. (There could be a technical reason Vimeo was blocking this originally, but after a year, it seems like this should be resolved.) – Japeth