vue-video-player ， ios中无法播放的坑

最新推荐文章于 2024-04-09 15:27:34 发布

天河飞猪

最新推荐文章于 2024-04-09 15:27:34 发布

阅读量7.3k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript html 前端

本文链接：https://blog.csdn.net/qq_43373320/article/details/111309724

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

ios开启静音才能自动播放，播放后关闭静音

    <video-player
      id="myVideo"
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="playsinline"
      webkit-playsinline="true"
      x5-playsinline="true"
      x5-video-orientation="landscape"
      style="object-fit:fill;"
    >
    </video-player>
    data() {
    return {
      playerOptions: {
        muted: true, // 默认情况下将会消除任何音频。 //**关键问题** ios开启静音才能自动播放
      },
      
    };
    methods: {
    isIos() {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //
      if (isIOS) {
        return false;
      } else {
        return true;
      }
    },

  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
    playsinline() {
      this.playerOptions.muted = false;  // 播放之后关闭静音 
      return this.isIos();
    },

  }
};