公告列表
公告列表
收藏
回答

微信小程序video视频预加载问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 video 客户端 最新 2.7.7

- 需求的场景描述（希望解决的问题）

微信小程序video标签及相关api中没有找到有提供视频预加载，及其预加载进度的api，请问现在视频支持预加载吗？或者有什么方案解决这个问题吗？


- 希望提供的能力

支持预加载并返回进度，100%后给予回调方法。


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

5 个回答

  • 黄思程
    黄思程
    2019-07-29

    只要设置了 src 后就会开始加载，可以通过这个方式来实现下一个视频的预加载

    2019-07-29
    有用
    回复 7
    • 404
      404
      2019-07-29
      我是要做预加载实时加载进度监听，并实时展示进度条，不是预加载这个功能
      2019-07-29
      赞
      回复
    • Rainbow＊_＊^@^
      Rainbow＊_＊^@^
      2019-07-31
      如果页面渲染完成后就想无卡顿播放视频，目前有什么预加载的方法吗？
      2019-07-31
      赞
      回复
    • 云轻风淡
      云轻风淡
      2019-08-27
      动态替换掉SRC之后 还是会有1-3秒的loading时间 这个是正常的吗
      2019-08-27
      赞
      回复
    • Echonessy
      Echonessy
      2020-04-14
      我现在出现的问题就是src属性清空后，还会一直在请求视频cdn分片
      2020-04-14
      赞
      回复
    • 苟鹏
      苟鹏
      2020-07-15
      并不可以通过设置src的方式加载哦。测试发现，只有调用play以后才会开始加载视频。
      2020-07-15
      赞
      回复
    查看更多(2)
  • 云轻风淡
    云轻风淡
    2019-08-27

    动态替换掉SRC之后 还是会有1-3秒的loading时间   这个是正常的吗

    2019-08-27
    有用 3
    回复
  • Mr姜
    Mr姜
    2020-03-18

    可是试试页面创建两个video标签，来实现预加载的效果

    2020-03-18
    有用 1
    回复 4
    • 咖啡😋
      咖啡😋
      2020-10-06
      我也有同样的想法，但是没有尝试效果。不知道你有没有测试？
      2020-10-06
      赞
      回复
    • 王宏亮
      王宏亮
      2020-12-18
      我试过，可以。但是不要用hidden实现，要用z-index切换实现，在onPlay里面切换。
      2020-12-18
      赞
      回复
    • tothemoon
      tothemoon
      2021-01-11回复王宏亮
      你好，请问有相关代码吗？
      2021-01-11
      赞
      回复
    • tothemoon
      tothemoon
      2021-01-11回复王宏亮
      video没有onPlay方法
      2021-01-11
      赞
      回复
  • 土豆思思•﹏•
    土豆思思•﹏•
    2024-10-17

    使用两个video通过z-index，显示隐藏的方式，能解决切换两个视频出现黑屏的问题

    <image
  :class="{
    'virtual-image': true,
    'virtual-image-lower': virtualPersonPosition === 1,
    'virtual-player-show': !isShow && posterSrc,
    'virtual-player-hidden': isShow
  }"
  v-is="isShow"
  :src="posterSrc"
  mode="aspectFill"
/>
<video
  id="bizui"
  :class="{
    'virtual-player': true,
    'virtual-player-lower': virtualPersonPosition === 1,
    'virtual-player-show': isShow && videoStatus === 'bizui',
    'virtual-player-hidden': !isShow || videoStatus !== 'bizui'
  }"
  :show-center-play-btn="false"
  :enable-play-gesture="false"
  :controls="false"
  object-fit="cover"
  :poster="xxx"
  src="xx.mp4"
  :loop="true"
  :enable-progress-gesture="false"
  :autoplay="true"
  :direction="direction"
  :muted="true"
  @play="onPlay"
/>
<video
  :class="{
    'virtual-player': true,
    'virtual-player-lower': virtualPersonPosition === 1,
    'virtual-player-show': isShow && videoStatus === 'zhangzui',
    'virtual-player-hidden': !isShow || videoStatus !== 'zhangzui'
  }"
  id="zhangzui"
  :show-center-play-btn="false"
  :enable-play-gesture="false"
  :controls="false"
  :object-fit="'cover'"
  :poster="posterSrc"
  src="xx"
  :loop="true"
  :enable-progress-gesture="false"
  :autoplay="true"
  :direction="direction"
  :muted="true"
  @play="onPlay"
/>

onPlay() {
// // 视频可以播放的时候，显示视频，黑屏问题
if (!this.isShow) {
      this.playTimer = setTimeout(() => {
        this.isShow = true;
      }, 300);
    }
  }


public changeVideoStatus(status = 'bizui') {
    if (this.videoStatus === status) return;
    this.videoStatus = status;
  }


    2024-10-17
    有用
    回复
  • 朱云峰Yvan🦖
    朱云峰Yvan🦖
    2022-06-15

    微信内 video 标签不会触发 canplay 事件，点击播放之后才触发

    2022-06-15
    有用
    回复
请 登录 后发表内容
相关问题
相关文档