微信小程序开发之——婚礼邀请函-美好时光页面(4.5)_微信小程序开发实战婚礼邀请函-优快云博客

本文链接：https://blog.youkuaiyun.com/Calvin_zhou/article/details/111621845

一概述

"美好时光"页面任务说明
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事件

实例

布局文件

<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>

样式文件

video{width:100vw}
input{border:1px solid #ccc;margin: 20rpx;}

逻辑文件

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

"usingComponents": {
  "txv-video": "plugin://tencentvideo/video"
}

app.json

"plugins": {
    "tencentvideo": {
      "version": "1.3.18",
      "provider": "wxa75efa648b60994b"
    }
 }

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

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

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

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

<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)

.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)

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  //选定视频的临时文件路径
        })
      }
    })
  }
})