微信小程序开发之——婚礼邀请函-美好时光页面(4.5)

发表于 分类于 ， ， 阅读时长 ≈ 6 分钟

一 概述

  • "美好时光"页面任务说明
  • video组件和腾讯视频插件介绍
  • "美好时光"页面功能开发
  • "美好时光"页面效果图

二 “美好时光”页面任务说明

  • 该页面采用视频的方式展示新人的难忘时光
  • 视频的播放有两种方式：
    • video组件
    • 腾讯视频插件

三 video组件和腾讯视频插件介绍

3.1 video组件

组件介绍

  • video组件常用于视频播放
  • 默认宽度为300px，高度为225px
  • 通过wxss可重新设置宽度和高度

常用属性

属性 类型 说明
src String 视频的资源地址
loop Boolean 是否循环播放，默认为false
controls Boolean 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)，默认为true
danmu-list Object 弹幕列表
danmu-btn Boolean 是否显示弹幕显示/隐藏按钮，只有在初始化时有效，不能动态变更，默认为false
enable-danmu Boolean 是否展示弹幕，只有初始化时有效，不能动态变更，默认为false
autoplay Boolean 是否自动播放，默认为false
poster String 视频封面的图片资源地址，如果controls属性为false则设置poster无效
bindplay EventHandle 当开始/继续播放时触发play事件
bindpause EventHandle 当暂停播放时触发pause事件

实例

布局文件
1
2
3
4
5
<video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls>
</video>
<input  bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu"></button>
<button bindtap="bindButtonTap">获取视频</button>
样式文件
1
2
video{width:100vw}
input{border:1px solid #ccc;margin: 20rpx;}
逻辑文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
data: {
   src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4',
   danmuList:[
      {text:'第1s出现的弹幕',color:'#ff0000',time:1},
      {text:'第3s出现的弹幕',color:'#ff00ff',time:3}
    ],
 },
 videoContext:null,
 inputValue:'',
 onReady: function () {
 this.videoContext=wx.createVideoContext('myVideo')
 },
   bindInputBlur:function(e){
    this.inputValue=e.detail.value
  },
  bindSendDanmu:function(){
    this.videoContext.sendDanmu({
      text:this.inputValue,
      color:'#f90'
    })
  },
  bindButtonTap:function(){
    wx.chooseVideo({
      sourceType:['album','camera'],//视频选择的来源，相册和相机
      maxDuration:60, //拍摄视频最长拍摄时间(s)
      camera:'back', //默认拉起的是前置(front)或者后置(back)
      success:res=>{ //成功时执行的回调函数
        this.setData({
          src:res.tempFilePath  //选定视频的临时文件路径
        })
      }
    })
  }
VideoContext对象常用方法
名称 说明
paly() 播放视频
pause() 暂停播放
stop() 停止视频
seek(number) 跳转到指定的位置
playbackRate(number) 设置倍速播放
requestFullScreen() 进入全屏
exitFullScreen() 退出全屏

3.2 腾讯视频插件

如何添加腾讯视频插件

登录小程序管理后台后，依次点击：设置—>第三方服务—>插件管理—>搜索"腾讯视频"，进行安装

如何配置腾讯视频插件

按照腾讯视频插件说明文档分配配置json文件

video.json
1
2
3
"usingComponents": {
  "txv-video": "plugin://tencentvideo/video"
}
app.json
1
2
3
4
5
6
"plugins": {
    "tencentvideo": {
      "version": "1.3.18",
      "provider": "wxa75efa648b60994b"
    }
 }

腾讯视频的使用(pages/video/video.wxml)

1
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

四 “美好时光”页面功能开发

4.1 界面布局(pages/video/video.wxml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<view class="video-list" wx:for="{{movieList}}" wx:key="user">
  <view class="video-title">标题：{{item.title}}</view>
  <view class="video-time">时间：{{formatData(item.create_time)}}</view>
  <video src="{{item.src}}" object-fit="fill"></video>
</view>
<wxs module="formatData">
  module.exports=function(timestamp){
    var date=getDate(timestamp)
    var y=date.getFullYear()
    var m=date.getMonth()+1
    var d=date.getDate()
    var h=date.getHours()
    var i=date.getMinutes()
    var s=date.getSeconds()
    return y+'-'+m+'-'+d+'-'+h+':'+i+':'+s
  }
</wxs>

4.2 样式文件(pages/video/video.wxss)

1
2
3
4
5
6
7
8
9
10
.video-list{
  box-shadow:0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
  margin: 10rpx 25rpx;padding: 20rpx;border-radius: 10rpx;
  margin-bottom: 30rpx;background: #fff;
}
.video-title{
  font-size: 35rpx;color: #333;
}
.video-time{font-size: 13px;color: #979797;}
.video-list video{width: 100%;margin-top: 20rpx;}

4.3 功能逻辑文件(pages/video/video.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4',
    danmuList:[
      {text:'第1s出现的弹幕',color:'#ff0000',time:1},
      {text:'第3s出现的弹幕',color:'#ff00ff',time:3}
    ],
    movieList:[{
      create_time:1532519734589,
      //create_time:'2018-7-25 19:55:54',
      title:'海边随拍',
      src:'http://9890.vod.myqcloud.com/9890_4e292f9a3dd011e6b4078980237cc3d3.f20.mp4'
    },{
      create_time:1532519777690,
      //create_time:'2018-7-25 19:56:17',
      title:'勿忘心安',
      src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4'
    },{
      create_time:1532519794991,
      //create_time:'2018-7-25 19:56:34',
      title:'点滴记忆',
      src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4'
    }]
  },
  videoContext:null,
  inputValue:'',



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //this.videoContext=wx.createVideoContext('myVideo')
    //const TxvContext= requirePlugin('tencentvideo')
    //var txvContext=TxvContext.getTxvContext('txv1')
    //txvContext.play() //播放
    //txvContext.pause() //暂停


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  bindInputBlur:function(e){
    this.inputValue=e.detail.value
  },
  bindSendDanmu:function(){
    this.videoContext.sendDanmu({
      text:this.inputValue,
      color:'#f90'
    })
  },
  bindButtonTap:function(){
    wx.chooseVideo({
      sourceType:['album','camera'],//视频选择的来源，相册和相机
      maxDuration:60, //拍摄视频最长拍摄时间(s)
      camera:'back', //默认拉起的是前置(front)或者后置(back)
      success:res=>{ //成功时执行的回调函数
        this.setData({
          src:res.tempFilePath  //选定视频的临时文件路径
        })
      }
    })
  }
})

五 “美好时光”页面效果图