Gyro/Motion not work in ios13.3.1

[dblate]

Description

I have a test with https://videojs-vr.netlify.com/, gyro is not work in iponex(ios 13.3.1).

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. start 360 Video example(https://videojs-vr.netlify.com/examples/360.html)
2. rotate your iphone, video content will not rotate with your phone

Results

Expected

When I rotate my phone, the video content interact

Actual

When I rotate my phone, the video conteng will not rotate

Error output

If there are any errors at all, please include them here.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? latest

browsers

what browser are affected? Safari

OSes

what platforms (operating systems and devices) are affected? ios 13.3.1 iphonex

plugins

are any videojs plugins being used on the page? If so, please list them below.

[dblate]

Hi folks, I have figured this problem out. In ios13 safari and chrome, we need these 2 conditions to get gyro usable:

1. website servers in https
2. get permission from user

for example we need these code to get permission in safari (https website):

try {
  var buttonEl = document.getElementById('button-el');
  buttonEl.addEventListener('click', function () {
    DeviceMotionEvent.requestPermission().then(response => {
      alert('We are get the permission!, response is ' + response);
      if (response == 'granted') {
        window.addEventListener('devicemotion', (e) => {
          // do something with e
        })
    }
  }).catch(alert)
});
} catch (ex) {
  alert('eval code err: ' + ex);
}