收藏
回答

小程序里timeupdate应该怎么运用?

最近写程序,遇到一个功能,就是在开头加一段小动画,等动画放完了再进入开始小程序。

小动画我用了<video>……</video>来播放,目前想要实现的功能是,用timeupdate统计小动画的播放时间,一旦时间大于等于/等于小动画的时长,就隐藏该开头动画。

但是我不知道应该如何运用timeupdate这个功能。(网上查了资料,但还是不太懂)

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

2 个回答

  • 杨泉
    杨泉
    2023-01-28

    使用 timeupdate 可以在视频播放过程中实时监听视频播放的当前时间。在小程序中,可以在 <video> 标签上绑定 timeupdate 事件,并在事件回调函数中获取当前播放时间。例如:

    <video src="{{ videoSrc }}" bindtimeupdate="timeUpdate"></video>
    

    在 js 中,可以在 timeUpdate 函数中获取当前播放时间,并判断是否已经大于等于视频总时长,如果是,就隐藏该开头动画。

    Page({
      data: {
        videoSrc: '...'
      },
      timeUpdate: function (e) {
        var currentTime = e.detail.currentTime;
        var duration = e.detail.duration;
        if (currentTime >= duration) {
          // 隐藏开头动画
        }
      }
    })
    

    请注意,timeupdate 事件是在视频播放过程中实时触发的,所以需要在视频播放时才能监听到。


    2023-01-28
    有用 1
    回复
  • showms
    showms
    2023-01-28

    监听bindended事件是不是可以满足你的要求,播放到末尾就隐藏

    2023-01-28
    有用
    回复
登录 后发表内容