云诺说 - 小程序定制 - 广告营销
当前位置: 微信小程序 > 微信小程序播放视频-小程序video组件播放视频功能示例

微信小程序播放视频-小程序video组件播放视频功能示例

2019-09-18 03:02 分类:微信小程序 作者:云诺 阅读(433)

版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156182.html

前段时间闲来无事就做了一个糗事段子类的微信小程序。小程序用到了微信小程序播放视频的功能。就用小程序提供的video组件实现了一个多视频播放的功能。播放下一个视频自动暂定上一个播放的视频。小程序已经提供了video组件相关的API,参照文档,实现起来就简单的多了。

主要用到的API大概有这些(具体详细参数可以看官方API文档

VideoContext wx.createVideoContext(string id, Object this)
创建 video 上下文 VideoContext 对象。
VideoContext.play()
播放视频
VideoContext.pause()
暂停视频
VideoContext.stop()
停止视频
VideoContext.seek(number position)
跳转到指定位置
VideoContext.sendDanmu(Object data)
发送弹幕
VideoContext.playbackRate(number rate)
设置倍速播放
VideoContext.requestFullScreen(Object object)
进入全屏
VideoContext.exitFullScreen()
退出全屏
VideoContext.showStatusBar()
显示状态栏,仅在iOS全屏下有效
VideoContext.hideStatusBar()
隐藏状态栏,仅在iOS全屏下有效

下面来看具体的代码吧!!

wxml代码

<scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%">
  <block wx:for="{{list}}" wx:for-item="item">
      <!-- 视频组件 -->
      <video id="video-{{index}}" bindplay= 'playVideo' bindpause='pauseVideo' src="{{item.videouri}}" binderror="error" style="width: 100%; margin-top: 15rpx" />
  </block>
</scroll-view>

js代码

Page({
  data: {
    list: [],
    playId:'',
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },

  /**
   * 视频格式出错
   */
  error: function (e) {
    console.log(e.detail);
  },


  //视频播放
  playVideo:function(e){
      var that = this;
      var id = e.currentTarget.id
      if (that.data.playId==id){
      }else if (that.data.playId == ''){
      }else{
        var prevV = wx.createVideoContext(that.data.playId);
        prevV.pause()
      }
      var prevV2 = wx.createVideoContext(id);
      prevV2.play()
      that.setData({
        playId: id
      })
 
  },
  
  pauseVideo:function(e){
    var that = this;
    if (e.currentTarget.id == that.data.playId){
      var prevV = wx.createVideoContext(that.data.playId);
      prevV.pause()
      that.setData({
        playId: ''
      })
    }
    
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    
    // 页面显示
  },
  onHide: function () {
    var that = this;
    if (that.data.playId != '') {
      var prevV = wx.createVideoContext(that.data.playId);
      prevV.pause()
    }
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

效果如下

QQ截图20190918145421.png

 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 微信小程序播放视频-小程序video组件播放视频功能示例

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、网络推广引流服务、推荐优质的引流渠道、广告开户、竞价推广等行业的IT技术网站,希望你能在本站得到你所需要的信息。

Q Q :2730094141

微信 :LGY17666

职业 :小程序开发、网络推广

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:109 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:119 个
  • 评论总数:0 条
  • 访问总量: 86965次
  • 最近更新:2020年10月01日