话不多说，直接上代码
<template>
  <div class="player">
    <video-player
      class="vjs-custom-skin"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="playsinline"
      @canplay="onPlayerCanplay($event)"
    ></video-player>
  </div>
</template>
<script>
import { videoPlayer } from "vue-video-player";
import $ from 'jquery'
export default {
  name: "videoplayer",
  components: {
    videoPlayer
  },
  props: ["videosrc"],
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
    playsinline() {
      var ua = navigator.userAgent.toLocaleLowerCase();
      //x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false;
      } else {
        //ios端
        return true;
      }
    },
    playerOptions() {
      let path = this.videosrc;
      return {
        autoplay: false,
        muted: false,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            // mp4
            src: path
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ],
        poster: ""
      };
    }
  },
  methods: {
    //在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
      //解决自动全屏
      var ua = navigator.userAgent.toLocaleLowerCase();
      //x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $("body")
          .find("video")
          .attr("x-webkit-airplay", true)
          .attr("x5-playsinline", true)
          .attr("webkit-playsinline", true)
          .attr("playsinline", true);
      } else {
        //ios端
        $("body")
          .find("video")
          .attr("webkit-playsinline", "true")
          .attr("playsinline", "true");
      }
    }
  }
};
</script>
<style scoped>
@import "../css/video-js.min.css";
@import "../css/video.skin.plugin.pc.min.css";
@import "../css/video-custom.css";

</style>