微信小程序 - 视频进度控制

最新推荐文章于 2025-02-09 15:46:36 发布

原创

最新推荐文章于 2025-02-09 15:46:36 发布 · 1.5k 阅读

标签

#微信小程序 #notepad++ #小程序

收录于

文章讲述了如何在WXML和JS页面中使用微信小程序的video组件实现视频的暂停、播放和自动定位功能，以及处理视频播放时间和更新列表的操作。

wxml页面：

<scroll-view class="videoScroll"scroll-y>
    <view class="videoItem" wx:for="[[videoList}}" wx:key="id">
        <!-- 光靠video组件模式是无法实现暂停上一个，播放下一个的操作功能 -->
        <video 
            src="{
  
  {item.data.urlInfo.url}}"
            object-fit="fill" 
            id="{
  
  {item.data.vid}}"
            poster="{
  
  {item.data.coverUrl}}"
            wx:if="{
  
  {videoId === item.data.vid}}"
            bindtimeupdate="bindTimeUpdate"
        />
        <image 
            src="{
  
  {item.data.coverUrl}}"
            id="{
  
  {item.data.vid}}" 
            bindplay="handlePlay"
            wx:else
        />
    </view>
</scroll-view>

js页面：

handlePlay(e){
    this.vid = e.currentTarget.id;
    this.setData({
        videoId:this.vid
    });
    this.videoContext = wx.createVideoContext(this.vid);

    // 如果当前这个视频已经播放过，就跳转到指定的播放位置
    let videoObj