栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

微信小程序如何让视频结束播放

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

微信小程序如何让视频结束播放

原文链接

大致思路就是,wx:for="{{ list }}"下两个view,一个视频video,另一个封面image(客户需求,要可以自定义封面)。
主要控制变量是playIndex,当点击封面时赋予当前点击的e.currentTarget.id,而id="{{ index }}"(index是微信wx:for自带的)。
在video加个wx:if,playIndex == index是判断条件,也就是说点击封面,对应的video的wx:if=true会渲染。
这时最好设置一个延迟来执行videoContext.play(),因为video渲染需要时间,无延迟的话还没渲染完play()就执行了。
其他video的wx:if=false(因为只有要播放的video渲染,而其他video不渲染,所以视频列表不会卡顿)
代码很挫,希望能帮到人

// wxml
    
       
    

    
      
        
      
    
// js//data
 playIndex: null,// 点击cover播放,其它视频结束
  videoPlay: function (e) {    var length = this.data.list.length
    var id = e.currentTarget.id
    var that = this
    that.setData({
      playIndex: id
    })

    setTimeout(fnPlay, 500)

    function fnPlay() {        var videoContext = wx.createVideoContext('index' + that.data.playIndex)
        videoContext.play()
    }
  },

——————第二次更新分割线——————————

解决了,用wx:if取消video的渲染即刻

——————更新分割线————————

一个小程序中有多个视频,当打开一个视频时其它视频停止播放,我是用

videoContextPrev.seek(0)videoContextPrev.pause()

来伪装结束视频
但这样开多了似乎会卡顿(我并不确定现在开多了会卡顿是否是这个原因造成的)
有没有其他办法真正结束视频,我看有小程序实现这样的功能,视频中断结束再次打开得重新加载(而我的再次打开却立马开始,也就是说视频仅仅只是暂停在0s而已)

// 点击cover播放,其它视频结束
  videoPlay: function (e) {    var length = this.data.list.length
    var id = e.currentTarget.id  
    log(this.data.playIndex, id) // 当前播放与当前点击
    if (!this.data.playIndex) { // 没有播放时播放视频
      this.setData({
        playIndex: id
      })      var videoContext = wx.createVideoContext('index'+id)
      videoContext.play()
    } else {                    // 有播放时先将prev暂停到0s,再播放当前点击的current
      var videoContextPrev = wx.createVideoContext('index' +this.data.playIndex)
      videoContextPrev.seek(0)
      videoContextPrev.pause()
      this.setData({
        playIndex: id
      })      var videoContextCurrent = wx.createVideoContext('index' +this.data.playIndex)
      videoContextCurrent.play()
    }
  },


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/245207.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号