h5嵌ios，播放视频全屏无法关闭处理方法

1.让ios自己做app浏览器的处理（一个安卓的老员工告诉我的）

这些都是要做优化的，比如uc那种人家都是自己做处理的。
并不需要我这个h5操心.(但我不知道，所以做了2）

2.不使用控件的全屏播放，自己做弹出框
（缺点：交互复杂，且不能实现真的全屏）
思路：当视频在页面时，可以使用video标签截出第一帧当封面，且不设置control。
当点击到video时，弹出一个预览框，可以直接播放视频。


踩坑：试用了video.js,vue-mini-player.还是全屏播放后不能进行任何操作。
但发现video.js还是对多个视频初始化以及交互比较好，所以使用video.js

在main.js

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

在页面.vue

div item.allUrl是视频链接
<video  style="width: 2.1rem;height: 2.1rem" :id="'myVideo'+index"  class="video-js"  :poster="item.allUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,w_200,h_200,m_fast'">
            <source type="video/mp4" :src="item.allUrl">
            <source type="video/webm" :src="item.allUrl">
            <source type="video/ogg" :src="item.allUrl">
          </video>
          
data
options:{
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: true,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "300px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "300px",
          //封面图
          x5Playsinline: "true",
          webkitPlaysinline: "true",
          playsinline: true
        },
        
 method
 //点击页面后，对视频做初始化处理
        showVideo(){
      		  this['myVideo'+index]=this.$video('myVideo'+index,this.options )
              this['myVideo'+index].autoplay(true)
              this['myVideo'+index].play()
        }
        
 style 禁止全屏播放
        video::-webkit-media-controls-fullscreen-button {
    display: none;
  }
  ::v-deep .video-js .vjs-fullscreen-control{
    display: none;
  }