关闭ios video自动全屏播放以及陀螺仪检测

• 问题描述：

今天需要在手机端测试一下视频播放，遇到ios video自动全屏问题，百度搜一下全是没用的答案，不知道网友为什么抄或转发这些简单而未经验证的文章。

一堆下面这样没用的代码：

this.video=document.getElementId(id)
...
...
this.video.playsinline = true
// this.video.playsinline = ‘true‘
this.video.webkitPlaysinline = true
// this.video.webkitPlaysinline' = ‘true‘

video 的这些属性我们直接通过video对象 . 设置是没用的

• 正确写法：

this.video.setAttribute('webkit-playsinline', true)
this.video.setAttribute('playsinline', true)
this.video.setAttribute('x-webkit-airplay', true)

playsinline
一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的

设置完上面这些属性后，问题得到解决。下面开始解决陀螺仪问题。

在陀螺仪检测前首先开配置本地开启https服务，因为ios陀螺仪需要https环境

1. webpack开启HTTPS

 devServer: {
    contentBase: __dirname,
    hot: true,
    https: true,
  },

2. http-server 开启HTTPS

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

启动服务

 hs -S

注意：视频链接需要是https的

• 添加按钮手动触发权限提示

<button onclick="getPermission()">开启权限</button>
...
...

function getPermission(){
 if (typeof (DeviceMotionEvent).requestPermission === 'function') {
      (DeviceMotionEvent).requestPermission().then(permissionState => {
        if (permissionState === 'granted') {
          window.addEventListener('devicemotion', (e) => {
            console.log('devicemotion', e)
          });
        }
      }).
      catch((err) => {
        alert(JSON.stringify(err));
        alert("用户未允许权限");
      })
    } else {
      // handle regular non iOS 13+ devices
      alert('noe requestPermission');
    }
}

上面按钮点击后会弹出权限提示框，点击确认后就能实时看到陀螺仪打印信息

== 没有https的测试地址怎么办? ，我去相应办法… ==

– end