# UniappReadAndWriteVideo

**Repository Path**: scenario-samples/uniapp-read-and-write-video

## Basic Information

- **Project Name**: UniappReadAndWriteVideo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## uni-app实现视频读取和保存到相册

## 场景介绍
基于[uni.chooseVideo](https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo)方法实现视频读取。chooseVideo方法支持拍摄视频或从手机相册中选视频。


## 效果预览
<img src='screenshots/output.gif' width="200">

## 实现思路
1. 先使用[uni.chooseVideo](https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo)实现录制视频，再使用[uni.saveVideoToPhotosAlbum](https://uniapp.dcloud.net.cn/api/media/video.html#savevideotophotosalbum)保存视频到相册。
```Vue
const chooseVideoAndSaveVideoToPhotosAlbum = () => {
  // 拍摄视频后保存到相册
  uni.chooseVideo({
    sourceType: ['camera'],
    success: function(res) {
      // 保存到相册
      uni.saveVideoToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function() {
          console.info('save success');
          uni.showToast({
            title: "保存相册成功！",
            duration: 2000
          })
        }
      });
    }
  });
}
```

2. 通过[uni.chooseVideo](https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo)API从相册获取视频路径。
```Vue
const getVideo = () => {
  // 读取视频，播放 
  uni.chooseVideo({
    sourceType: ['album'],
    success: function(res) {
      videoUrl.value = res.tempFilePath;
    }
  });
}
```


## 约束与限制

* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 工程目录

```
├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json                                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs                           // HarmonyOS工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
├─pages
│  └─index
│      └─index.vue                          // 首页
│          
├─static                                    // 静态资源文件
└─uni_modules                               // 插件目录，用于存放uniapp的插件
```

## 参考文档
[uni.chooseVideo](https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo)
[uni.saveVideoToPhotosAlbum](https://uniapp.dcloud.net.cn/api/media/video.html#savevideotophotosalbum)