h5 ios自动播放audio h5 ios自动播放video

　　在H5页面中嵌入视频的情况是比较多件的，有时候会碰到需要自动播放的情况，之前根本觉得这不是问题，但是自己的项目中需要视频的时候就有点sb了，达不到老板的要求，那个急呀~~~

　　各种查资料，找到一个方法，记录一下。核心是监听了canplaythrough事件，然后自己去让视频play()。

安卓上需要设置muted才能自动播放，ios没这个限制，当然，多媒体播放政策呢，厂商也一直在调整，需要关注。

　　还有就是有时候视频也可能有问题，导致不能自动播放，之前就是碰到了这个坑（在iphone8 plus,安卓上正常，但是在iPhone X，XR上不能自动播放），调了半天不行，最后发现视频的问题

 　　我这里还区分了安卓和ios，因为安卓全屏不仅丑，二期你直接返回呢不是退出视频，而是退出页面了，这个很蛋疼，ios的视频就挺好的，系统自带有操作按钮

　　所以安卓上取消了所有的控制按钮，ios就放开了按钮

　　

<video v-show="os!=='iOS'"
               class="video"
               preload="auto"
               autoplay
               loop muted
               webkit-playsinline="true"
               playsinline="true"
               @loadstart="videoLoadStart"
               @canplaythrough="videoLoaded"
               poster="./images/cover.png"
               ref="videoEle"
               id="android"
        >
          <source :src="src" type="video/mp4">
 
        </video>

　　videoLoaded(){

　　　　this.$refs.videoEle.play();

　　}

 说道视频，还有一个问题，之前碰到过，就是切换不同的tag然后切换视频，发现吧视频路径写在source里面，就像上面那样是有问题的，直接把连接写在video里面，就像下面这样<video ref="video" id="video" preload="metadata" :src="videoSrc[videoIndex]" :poster="preSrc[videoIndex]" webkit-playsinline playsinline</video>

data(){
preSrc:[
  require("./images/pre1.png"),
  require("./images/video-pre.jpg")
],
videoSrc:[
  require("./images/invader-video.mp4"),
  require("./images/brithday.mp4")
],

}


每次切换视频的时候需要先暂停视频，在切换，这样会比较好。
写的不好多多包涵，欢迎大家留言，共同学习进步！

上面的是对于自动播放的设置，其实video的东西还是非常多的，可监听的事件也很多，最近又在搞视频，并且是自己控制播放、暂停、loading之类的状态，然后参考w3c以及别人的实现，
自己整理了一下，在此过程中又发现了一些之前自己不爱知道的东西，比如设置播放速度，比如监听waiting之类的
当然，还是集成在vue项目里面，我贴一下自己写的组件吧。

<template>
  <div class="video-item">
    <div class="cover" @click="play">
      <div class="loading" v-if="state === 0"></div>
      <img
        class="loaded"
        v-if="state !== 1 && canplay"
        src="../assets/video/icon-paly.png"
        alt=""
      />
      <img
        class="pause"
        v-if="state === 2"
        src="../assets/video/pause.png"
        alt=""
      />
    </div>
    <!--

      @loadstart="loadStart"
      @canplay="canPlay"
      @playing="playing"
      @pause="pause"
      @waiting="waiting"
      @ended="ended"

     -->
    <video
      width="500"
      src="https://www-test.loopslive.com/web-loops/gz/loopsActives/test/offline-party/assets/media/video.63581e4c.mp4"
      ref="videoEl"
    ></video>
  </div>
</template>

<script>
export default {
  name: "VideoItem",
  data() {
    return {
      canplay: false, //是否可以开始播放了
      state: 0 // 0 loading 1 playing 2 pause 3 其他
    };
  },
  methods: {
    init() {
      let videoEl = this.$refs.videoEl;
      // videoEl.currentTime = 0;
      videoEl.addEventListener("loadstart", this.loadStart);
      videoEl.addEventListener("canplay", this.canPlay);
      videoEl.addEventListener("playing", this.playing);
      videoEl.addEventListener("pause", this.pause);
      videoEl.addEventListener("waiting", this.waiting);
      videoEl.addEventListener("ended", this.ended);
    },
    unbind() {
      console.log("解绑");
      let videoEl = this.$refs.videoEl;
      videoEl.removeEventListener("loadstart", this.loadStart);
      videoEl.removeEventListener("canplay", this.canPlay);
      videoEl.removeEventListener("playing", this.playing);
      videoEl.removeEventListener("pause", this.pause);
      videoEl.removeEventListener("waiting", this.waiting);
      videoEl.removeEventListener("ended", this.ended);
    },
    play() {
      // console.log("play");
      // this.$refs.videoEl.play();
      let state = this.$refs.videoEl.paused;
      // console.log(state);
      if (state) {
        this.$refs.videoEl.play();
        this.$refs.videoEl.playbackRate = 5;
      } else {
        this.$refs.videoEl.pause();
      }
      // console.log(this.$refs.videoEl.readyState);
      // setTimeout(()=>{
      //   console.log(this.$refs.videoEl.paused);
      // },0)
    },
    //在文件开始加载且未实际加载任何数据前运行的脚本
    loadStart() {
      console.log("loadstart");
      this.state = 0;
    },
    //当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
    canPlay() {
      console.log("canplay");
      this.state = 3;
      this.canplay = true;
      //可以显示播放按钮了
    },
    //当媒介已开始播放时运行的脚本
    playing() {
      console.log("playing");
      //正在播放
      this.state = 1;
      this.canplay = false;
    },
    //当媒介被用户或程序暂停时运行的脚本。
    pause() {
      console.log("pause");
      //暂停状态
      this.state = 2;
    },
    //当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
    waiting() {
      console.log("waiting");
      this.state = 0;
    },
    ended() {
      console.log("ended");
      //播放结束，需要将状态变为播放状态
      this.state = 3;
      this.canplay = true;
    }
  },
  mounted() {
    this.init();
  },
  activated() {
    console.log("activated");
    this.init();
  },
  deactivated() {
    console.log("deactivated");
    this.unbind();
  }
};
</script>
<style scoped>
.video-item {
  position: relative;
  width: 480px;
  height: 260px;
}
video {
  width: 480px;
  height: 260px;
  border-radius: 10px;
}
.cover {
  position: absolute;
  z-index: 10;
  width: 480px;
  height: 260px;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1em solid rgba(255, 255, 255, 0.2);
  border-left: 1em solid #fff;
  transform: rotateZ(0);
  animation: rotate 1.1s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
</style>

其实就是监听各种事件，然后显示相对应得图标，当然，还有待完善的地方，比如，点击播放按钮之后，要显示播放的按钮一会，然后自动消失，就像西瓜视频或者B站似的，当然，西瓜视频有开源的播放器，有空可以下载下来研究一下。