save-video-to-photos-album.uvue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <!-- #ifdef APP -->
  3. <scroll-view style="flex:1">
  4. <!-- #endif -->
  5. <page-head :title="title"></page-head>
  6. <view class="uni-padding-wrap">
  7. <video class="video" :src="src" :controls="true"></video>
  8. <button type="primary" class="margin-top-10" @click="saveVideo">将视频保存到手机相册</button>
  9. </view>
  10. <!-- #ifdef APP -->
  11. </scroll-view>
  12. <!-- #endif -->
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. title: 'saveVideoToPhotosAlbum',
  19. src: '/static/test-video/10second-demo.mp4',
  20. // 自动化测试
  21. success: false
  22. }
  23. },
  24. methods: {
  25. saveVideo() {
  26. uni.saveVideoToPhotosAlbum({
  27. filePath: this.src,
  28. success: (_) => {
  29. console.log("saveVideoToPhotosAlbum success");
  30. uni.showToast({
  31. position: "center",
  32. icon: "none",
  33. title: "视频保存成功,请到手机相册查看"
  34. });
  35. this.success = true;
  36. },
  37. fail: (err) => {
  38. uni.showModal({
  39. title: "保存视频到相册失败",
  40. content: JSON.stringify(err),
  41. showCancel: false
  42. });
  43. this.success = false;
  44. }
  45. });
  46. }
  47. }
  48. }
  49. </script>
  50. <style>
  51. .video {
  52. align-self: center;
  53. }
  54. .margin-top-10 {
  55. margin-top: 10px;
  56. }
  57. </style>