devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app 框架建小程序跳转h5页面播放视频并下载到本地_h5下载视频

作者：羊村懒王 | 2024-05-28 10:02:03

赞

踩

h5下载视频

一、明确目的：

1、视频的位置在h5的页面中，包含下载按钮；

2、小程序中有“播放”的按钮；

3、h5页面内嵌在小程序里面里

 二、选择组件

uni-app内嵌h5页面，用<web-view>组件；

三、实现思路

1、小程序中找到“播放”按钮，点击跳转“新页面-webview”，并传递h5页面的url地址给新页面

2、新建页面-webview，内含<web-view>标签组件

3、h5页面，播放视频，并通过uni.postMessage来传递数据信息（视频地址）

4、小程序webview页面的message事件拿到下载提供的数据，进行下载操作

四、代码实现

1、“播放”按钮页面

  1. <template>
  2.     <view>
  3.         <view class="container">
  4.             <button @tap="downloadVideo">下载、查看视频</button>
  5.         </view>
  6.     </view>
  7. </template>
  8.  
  9. <script>
  10.     export default {
  11.         data() {
  12.             return {
  13.                 // h5的地址
  14.                 url: 'http://127.0.0.1:5501/1.html'
  15.             }
  16.         },
  17.         methods: {
  18.             downloadVideo: function(e) {
  19.                 // 跳转到新webview页面，encodeURIComponent：url参数中出现空格等特殊字符时需要对参数进行编码
  20.                 uni.navigateTo({
  21.                     url: '/pages/webview/webview?url=' + encodeURIComponent(this.url)
  22.                 })
  23.             }
  24.         }
  25.     }
  26. </script>
  27.  
  28. <style>
  29.  
  30. </style>

2、webview页面

  1. <template>
  2.     <view>
  3.         <web-view :src="url" @message="onMessage"></web-view>
  4.         <button class="download-btn" @click="downloadVideo">下载视频</button>
  5.     </view>
  6. </template>
  7.  
  8. <script>
  9.     export default {
  10.         data() {
  11.             return {
  12.                 downloadUrl: 'https://www.example.com/example.mp4',
  13.                 // url: 'https://www.example.com/index.html?videourl=xxx'
  14.                 // url: 'https://tieba.baidu.com/p/7722618570?red_tag=1419125733'
  15.                 url: ''
  16.             }
  17.         },
  18.         methods: {
  19.             onMessage(e) {
  20.                 // 接收H5页面发送的消息
  21.                 console.log('接收H5页面发送的消息', e)
  22.                 // if (e.detail.data && e.detail.data.type === 'getDownloadUrl')
  23.                 if (e.detail.data && e.detail.data[e.detail.data.length - 1].type == 'getDownloadUrl') {
  24.                     // 保存下载链接
  25.                     let downloadUrl = e.detail.data[e.detail.data.length - 1].url
  26.                     this.downloadUrl = downloadUrl
  27.                     // 去下载
  28.                     this.downloadVideo()
  29.                 }
  30.             },
  31.             downloadVideo() {
  32.                 // 使用 uni.downloadFile() 方法下载视频资源
  33.                 console.log('下载')
  34.                 // 打开loading等待
  35.                 uni.showLoading({
  36.                     mask: true,
  37.                     title: '加载中'
  38.                 })
  39.  
  40.                 uni.downloadFile({
  41.                     url: this.downloadUrl,
  42.                     success: (res) => {
  43.                         console.log('success', res)
  44.                         if (res.statusCode === 200) {
  45.                             uni.hideLoading()
  46.                             // 使用 uni.saveVideoToPhotosAlbum() 方法保存到相册
  47.                             uni.saveVideoToPhotosAlbum({
  48.                                 filePath: res.tempFilePath,
  49.                                 success: () => {
  50.                                     uni.showToast({
  51.                                         title: '下载成功'
  52.                                     })
  53.                                 }
  54.                             })
  55.                         }
  56.                     },
  57.                     fail: (res) => {
  58.                         console.log('fail')
  59.                     }
  60.                 })
  61.             }
  62.  
  63.         },
  64.         onLoad(option) {
  65.             console.log('option', option)
  66.             let url = decodeURIComponent(option.url) // 解码
  67.             this.url = url
  68.         }
  69.     }
  70. </script>
  71.  
  72. <style>
  73.  
  74. </style>

3、h5页面

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.   <title>网络网页</title>
  8.   <style type="text/css">
  9.     .btn {
  10.       display: block;
  11.       margin: 20px auto;
  12.       padding: 5px;
  13.       background-color: #007aff;
  14.       border: 0;
  15.       color: #ffffff;
  16.       height: 40px;
  17.       width: 200px;
  18.     }
  19.  
  20.     .btn-red {
  21.       background-color: #dd524d;
  22.     }
  23.  
  24.     .btn-yellow {
  25.       background-color: #f0ad4e;
  26.     }
  27.  
  28.     .desc {
  29.       padding: 10px;
  30.       color: #999999;
  31.     }
  32.  
  33.     .post-message-section {
  34.       visibility: hidden;
  35.     }
  36.   </style>
  37.  
  38.   <script src="https://uniapp.dcloud.io/api/router?id=navigate&name=app"></script>
  39. </head>
  40.  
  41. <body>
  42.   <div>
  43.     <video width="100%" controls
  44.       src="http://v6.huanqiucdn.cn/4394989evodtranscq1500012236/d9cc07e4243791581279828388/v.f100830.mp4"
  45.       poster="https://v6.huanqiucdn.cn/4394989evodtranscq1500012236/d9cc07e4243791581279828388/sampleSnapshot/sampleSnapshot_10_0.jpg"
  46.       ></video>
  47.   </div>
  48.   <p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
  49.   <div class="btn-list">
  50.     <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
  51.     <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
  52.     <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
  53.     <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
  54.     <button class="btn" type="button" data-action="switchTab">switchTab</button>
  55.   </div>
  56.   <div class="post-message-section">
  57.     <p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
  58.     <div class="btn-list">
  59.       <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
  60.     </div>
  61.  
  62.     <div class="btn-list">
  63.       <button class="btn btn-red" type="button" id="downLoad">下载</button>
  64.     </div>
  65.   </div>
  66.   <script type="text/javascript">
  67.     const videoUrl = 'http://v6.huanqiucdn.cn/4394989evodtranscq1500012236/d9cc07e4243791581279828388/v.f100830.mp4'
  68.  
  69.  
  70.  
  71.  
  72.     var userAgent = navigator.userAgent;
  73.     if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
  74.       // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
  75.       document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
  76.     } else if (/quickapp/i.test(userAgent)) {
  77.       // quickapp
  78.       document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
  79.     }
  80.     if (!/toutiaomicroapp/i.test(userAgent)) {
  81.       document.querySelector('.post-message-section').style.visibility = 'visible';
  82.     }
  83.   </script>
  84.   <!-- uni 的 SDK -->
  85.   <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
  86.   <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
  87.   <script type="text/javascript">
  88.     // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
  89.     document.addEventListener('UniAppJSBridgeReady', function () {
  90.       uni.postMessage({
  91.         data: {
  92.           action: 'message'
  93.         }
  94.       });
  95.       uni.getEnv(function (res) {
  96.         console.log('当前环境：' + JSON.stringify(res));
  97.       });
  98.  
  99.       document.querySelector('.btn-list').addEventListener('click', function (evt) {
  100.         var target = evt.target;
  101.         if (target.tagName === 'BUTTON') {
  102.           var action = target.getAttribute('data-action');
  103.           switch (action) {
  104.             case 'switchTab':
  105.               uni.switchTab({
  106.                 url: '/pages/tabBar/API/API'
  107.               });
  108.               break;
  109.             case 'reLaunch':
  110.               uni.reLaunch({
  111.                 url: '/pages/tabBar/component/component'
  112.               });
  113.               break;
  114.             case 'navigateBack':
  115.               uni.navigateBack({
  116.                 delta: 1
  117.               });
  118.               break;
  119.             default:
  120.               uni[action]({
  121.                 url: '/pages/component/button/button'
  122.               });
  123.               break;
  124.           }
  125.         }
  126.       });
  127.       document.getElementById('postMessage').addEventListener('click', function () {
  128.         uni.postMessage({
  129.           data: {
  130.             action: 'message'
  131.           }
  132.         });
  133.       });
  134.  
  135.       document.getElementById('downLoad').addEventListener('click', function () {
  136.  
  137.         console.log('uni```````````````````', uni)
  138.  
  139.         uni.postMessage({
  140.           data: {
  141.             type: 'getDownloadUrl',
  142.             url: videoUrl
  143.           }
  144.         });
  145.  
  146.  
  147.         uni.navigateBack({
  148.           delta: 1
  149.         });
  150.  
  151.  
  152.       })
  153.  
  154.  
  155.     });
  156.  
  157.  
  158.  
  159.  
  160.   </script>
  161. </body>
  162.  
  163. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/636962
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号