收藏
回答

uni-app开发小程序,使用wx.createVideoContext()ios真机无法播放问题?

在开发工具和安卓都能正常播放,ios真机调用play()方法不起效,也不报错

试了iPhone11 ios13.3.1 和6s plus都不行 求各位大佬给点帮助 谢谢!!

附上代码

<template>
  <view class="audo-video">
    <video
      id="Video_1"
      :src="url"
      class="hidden"
      @timeupdate="timeupdate"
      ref="video"
      @loadedmetadata="loadedmetadata"
    ></video>


    <view class="slider-box">
      <text class="mm">{{timer}}</text>
      <slider
        style="width: 500upx;"
        @change="sliderChange"
        @changing="sliderChanging"
        class="audio-slider"
        block-size="16"
        :min="0"
        :max="duration"
        :value="currentTime"
        activeColor="#ff7400"
        @touchstart="lock= true"
        @touchend="lock = false"
      />
      <text class="ss">{{overTimer}}</text>
    </view>


    <button @tap="play">播放</button>
    <button @tap="stop">暫停</button>
    <button @tap="setRate(0.5)">0.5倍</button>
    <button @tap="setRate(0.75)">0.75倍</button>
    <button @tap="setRate(1)">1倍</button>
    <button @tap="setRate(1.5)">1.5倍</button>
    <button @tap="setRate(2)">2倍</button>
  </view>
</template>


<script>
export default {
  props: {},
  data() {
    return {
      lockfalse// 锁
      status1// 1暂停 2播放
      currentTime0//当前进度
      duration0// 总进度
      videoContext"",
      url:
        "https://webfs.yun.kugou.com/202003111120/e50dbbedace30fdcecfdc5c3f749fe70/G173/M07/1F/08/TYcBAF2y052AJ8TSAEHU69hU-QU049.mp3"
    };
  },
  computed: {
    timer() {
      return calcTimer(this.currentTime);
    },
    overTimer() {
      return calcTimer(this.duration);
    }
  },
  created() {
    this.videoContext = wx.createVideoContext("Video_1");
  },
  mounted() {
  },
  methods: {
    // 倍速
    setRate(num) {
      this.videoContext.playbackRate(num);
    },


    // 播放
    play() {
      this.status = 2;
      this.videoContext.play();
      console.log(this.videoContext);
    },


    // 暂停
    stop() {
      this.videoContext.pause();
      this.status = 1;
    },


    // 更新进度条
    timeupdate(event) {
      if (this.lock) return// 锁
      var currentTime, duration;
      if (event.detail.detail) {
        currentTime = event.detail.detail.currentTime;
        duration = event.detail.detail.duration;
      } else {
        currentTime = event.detail.currentTime;
        duration = event.detail.duration;
      }
      this.currentTime = currentTime;
      this.duration = duration;
    },


    // 拖动进度条
    sliderChange(data) {
      this.videoContext.seek(data.detail.value);
    },


    //拖动中
    sliderChanging(data) {
      this.currentTime = data.detail.value;
    },


    // 视频加载完成
    loadedmetadata(data) {
      this.duration = data.detail.duration;
    }
  }
};


function calcTimer(timer{
  if (timer === 0 || typeof timer !== "number") {
    return "00:00";
  }
  let mm = Math.floor(timer / 60);
  let ss = Math.floor(timer % 60);
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (ss < 10) {
    ss = "0" + ss;
  }
  return mm + ":" + ss;
}
</script>


<style scoped lang="less">
.audo-video {
  padding-bottom20upx;
}
.slider-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size26upx;
  color#999;
}


button {
  display: inline-block;
  width100upx;
  background-color#fff;
  font-size24upx;
  color#000;
  padding0;
}
.hidden {
  position: fixed;
  z-index: -1;
  width1upx;
  height1upx;
}
</style>


回答关注问题邀请回答
收藏

4 个回答

  • 王萌
    王萌
    2021-03-06


    that.videoContext = uni.createVideoContext('myVideo', this) 需要绑定this

    还不好的话 看看视频链接是接口返回的么 判断当视频链接 存在再去显示video 组件 然后去绑定 that.videoContext = uni.createVideoContext('myVideo', this)

    2021-03-06
    有用 1
    回复
  • Work hard
    Work hard
    2020-04-22

    请问解决了? 我也遇到这种问题了!

    2020-04-22
    有用
    回复
  • 西歪
    西歪
    2020-03-25

    同问,最近也遇到了 小程序调试库是2.10.3,系统和微信都是最新版

    2020-03-25
    有用
    回复
  • 是小白啊
    是小白啊
    2020-03-11

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-03-11
    有用
    回复
登录 后发表内容
问题标签