解决问题：不全屏播放 播放一次就不能播放，IOS一开始是白屏，返回后不能播放

• 核心是判断手机为安卓还是ios，然后分开写

下面是几个核心的关键代码：

• controls 解决播放一次就不能播放
• webkit-playsinline="" playsinline=“true” 解决一播放就是全屏
• preload=“none” 解决浪费资源问题 一打开网页就加载mp4 造成不必要的损失
• poster 视频为开始时，显示的图片

以下是代码

<template>
	<div class="_contenter flex_center">
	  <div class="videoBox">
	    <video
	      v-if="mobile=='android'"
	      id="video"
	      width="100%"
	      height="100%"
	      x5-video-player-fullscreen="true"
	      x5-playsinline
	      playsinline
	      webkit-playsinline
	      preload="none"
	      :src="videoSrc"
	      :poster="videoImg"
	      controls
	    ></video>
	    <video
	      v-if="mobile=='iPhone'"
	      id="video"
	      width="100%"
	      height="100%"
	      controls
	      preload="none"
	      webkit-playsinline
	      playsinline="true"
	      :poster="videoImg"
	      :src="videoSrc"
	    ></video>
	  </div>
	</div>
</template>

视频地址是本地存储获取的，你们需要改为自己的视频地址

<script>
export default {
  data() {
    return {
      videoSrc: "",
      videoImg: "../assets/images/play.png",
      mobile: "",
      text: ""
    };
  },
  created() {
    this.videoSrc = localStorage.getItem("remark");
    this.text = navigator.appVersion;
    this.mobile =
      navigator.appVersion.indexOf("iPhone") !== -1 ? "iPhone" : "android";
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
._contenter {
  height: 100%;
  width: 100%;
  background: #000;
  .videoBox {
    position: relative;
    width: 100%;
    video {
      width: 100%;
      height: 180px;
      overflow: hidden;
      display: block;
    }
    #video {
      display: block;
      width: 100%;
      height: 180px;
      .video-show {
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
  }
}
</style>