手把手教你做短视频去水印小程序系列教程（4-解析结果页）

解析结果页：展示和保存解析后的视频

视频播放

解析后的视频可通过现成的视频播放器组件播放，如微信小程序的<video>组件。只需设置视频源地址、播放状态等属性，即可实现视频播放功能。

<video id="my-video" src="{{ videoSrc }}" autoplay></video>

保存视频

保存视频需先下载，再保存到相册。微信小程序提供了<request>接口进行下载，<saveFile>接口进行保存。

wx.downloadFile({
  url: videoSrc,
  success: function (res) {
    wx.saveFile({
      tempFilePath: res.tempFilePath,
      success: function (res) {
        // 保存成功提示
      },
    });
  },
});

分享视频

微信小程序提供了<shareAppMessage>接口，可分享视频。只需设置分享标题、内容、图片等属性即可。

wx.shareAppMessage({
  title: '分享视频',
  content: '快来看看这个有趣的视频吧！',
  path: '/pages/video/video?videoSrc=' + this.data.videoSrc,
});

代码示例

下面是一个完整的解析结果页代码示例：

Page({
  data: {
    videoSrc: '', // 视频源地址
    isVideoPlaying: false, // 视频是否正在播放
    showSaveVideoTip: false, // 是否显示保存视频提示
  },
  onLoad: function (options) {
    // 获取解析后的视频源地址
    const videoSrc = options.videoSrc;

    this.setData({
      videoSrc: videoSrc,
    });
  },
  onVideoPlay: function () {
    // 视频开始播放时，设置isVideoPlaying为true
    this.setData({
      isVideoPlaying: true,
    });
  },
  onVideoPause: function () {
    // 视频暂停播放时，设置isVideoPlaying为false
    this.setData({
      isVideoPlaying: false,
    });
  },
  onSaveVideo: function () {
    // 显示保存视频提示
    this.setData({
      showSaveVideoTip: true,
    });
  },
  onConfirmSaveVideo: function () {
    // 确认保存视频
    const videoSrc = this.data.videoSrc;

    // 下载视频
    wx.downloadFile({
      url: videoSrc,
      success: function (res) {
        // 保存视频到相册
        wx.saveFile({
          tempFilePath: res.tempFilePath,
          success: function (res) {
            // 保存成功，隐藏保存视频提示
            this.setData({
              showSaveVideoTip: false,
            });

            // 提示用户保存成功
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000,
            });
          },
        });
      },
    });
  },
  onCancelSaveVideo: function () {
    // 取消保存视频
    this.setData({
      showSaveVideoTip: false,
    });
  },
  onShareAppMessage: function () {
    // 分享视频
    return {
      title: '分享视频',
      content: '快来看看这个有趣的视频吧！',
      path: '/pages/video/video?videoSrc=' + this.data.videoSrc,
    };
  },
});

常见问题解答

• 如何获取解析后的视频源地址？
  解析视频时，视频源地址会作为参数传递给解析结果页。

• 保存视频时提示权限不足怎么办？
  需要在微信小程序后台申请文件系统读写权限。

• 视频播放失败怎么办？
  检查视频源地址是否正确，视频文件是否可用。

• 如何提升视频播放流畅度？
  使用合适的视频编码格式和码率，优化网络环境。

• 是否可以自定义视频播放器界面？
  可以，通过修改<video>组件的样式和属性来实现。