uni-app视频保存到本地/相册

需求：

        页面标题为视频名称，视频可播放观看，允许播放手势（如双击切换暂停/播放，拖拽改变视频进度等），显示静音和全屏按钮，其余类似弹幕等功能不需要。视频下方按钮“保存视频到相册”，允许下载视频到本地，下载成功后需提示。

知识点：

        1、video 组件：视频播放组件，官网API： uni-app官网

        2、uni.setNavigationBarTitle：动态设置当前页面的标题，官网API：uni-app官网

        3、uni.downloadFile：下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径，注意：想要保存视频必须先下载视频；官网API：uni-app官网

        4、uni.saveVideoToPhotosAlbum：保存视频到系统相册，官网API：uni-app官网

<template>
  <view>
    <video class="video-play"
        :src="url" 
        :poster="img" 
        :title="title" 
        show-fullscreen-btn
        show-mute-btn 
        enable-play-gesture
    />
    <u-button @click="saveVideo">保存视频到相册</u-button>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  name: 'PlayVideo', // 播放视频
  data() {
    return {
      title: '', // 视频标题
      url: '', // 视频地址
      img: '' // 视频封面
    }
  },
  onLoad(option) {
    // 获取前页跳转带过来的视频信息
    const video = JSON.parse(decodeURIComponent(option.video))
    this.title = video.nam
    this.url = video.url
    this.img = video.img

    // 设置小程序页面标题 为视频标题
    uni.setNavigationBarTitle({ title: this.title })

    // 交互新增浏览次数
    ...
  },
  methods: {
    // 保存按钮
    saveVideo() {
      // 打开loading等待
      uni.showLoading({ mask: true, title: '加载中' })

      // 先下载视频
      uni.downloadFile({
        url: this.url,
        success: (res) => {
          const that = this

          if (res.statusCode === 200) {
            // 关闭loading
            uni.hideLoading()

            // 保存视频到手机相册
            uni.saveVideoToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function() {
                // 成功提示
                that.$refs.uToast.show({
                    title: '保存成功', 
                    type: 'success', 
                    position: 'bottom'
                })
              }
            })
          }

        }
      })
    }
  }
}
</script>
<style scoped>
    .video-play { width: 100vw; }
</style>