"婚礼邀请函"小程序：美好时光页面

任务分析

该页面采用视频方式来记录一对新人的难忘时光，

在小程序中播放视频有两种实现方式：

一种是使用video组件，一种是使用腾讯视频插件，

前导知识

video组件

WXML

index.wxml:

<!--pages/video/video.wxml-->
<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>

WXSS

index.wxss:

/* pages/video/video.wxss */
video{ width: 100vw; }
input{ border: 1px solid #ccc; margin: 20rpx; }

视频数据

index.js:

  data: {
    src: 'http://qy2y9xnbj.hb-bkt.clouddn.com/1.mp4',
    danmuList: [
      { text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 },
      { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 }
    ]
  },

发送弹幕功能

// pages/video/video.js
Page({
  data: {
    src: 'http://qy2y9xnbj.hb-bkt.clouddn.com/1.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,						// 拍摄视频最长拍摄时间（秒）
      camera: 'back',		// 默认拉起的是前置（front）或者后置（back）摄像头
      success: res => {	// 成功时执行的回调函数
        this.setData({
          src: res.tempFilePath	// 	选定视频的临时文件路径
        })
      }
    })
  }
})

• wx.createVideoContext('myVideo') 用于对video组件进行控制
• this.inputValue = e.detail.value 用于保存用户输入的弹幕
• this.videoContext.sendDanmu 实现了发送弹幕

VideoContext常用方法

• play() 播放视频
• pause() 暂停视频
• stop() 停止视频
• seek(number) 跳转到指定的位置
• playbackRate(number) 设置倍速播放
• requestFullScrenn() 进入全屏
• exitFullScreen() 退出全屏

值得一提的是，video组件还可以用来播放本地视频:

WXML:

<button bindtap="bindButtonTap">获取视频</button>

js:

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

效果图

编写页面结构样式

data

在pages/video/video.js文件中编写视频列表数据

Page({
  data: {
    movieList: [{
      create_time: 1532519754589,
      title: '海边随拍',
      src: 'http://localhost:3000/1.mp4'

    }, {
      create_time: 1532519777690,
      title: '勿忘心安',
      src: 'http://localhost:3000/1.mp4'

    }, {
      create_time: 1532519734589,
      title: '点滴记忆',
      src: 'http://localhost:3000/1.mp4'
    }]
  }
})

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}}" objectFit="fill"></video> 
</view>

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

• box-shadow 属性：向 div 元素添加阴影

效果图

利用WXS增强页面功能

实际开发中，经常会遇到

页面数据 是从服务器端直接获取的，不能直接使，

比方说时间戳，得需要转换成可阅读的时间。

针对这种情况，可在WXML中通过WXS(wexin script)嵌入代码

video.wxml:

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

• 属性module表示模块名称

• 第2行的module.exports用于将代码导出，导出后就可以调用formatData()函数。

（我们是在WXML中调用的）

效果图