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

最新推荐文章于 2024-04-10 15:33:11 发布

白灵一

最新推荐文章于 2024-04-10 15:33:11 发布

阅读量1.3k

点赞数

文章标签： uni-app 小程序前端音视频

本文链接：https://blog.csdn.net/m0_70190404/article/details/130079277

版权

一、明确目的：

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、“播放”按钮页面

<template>
    <view>
        <view class="container">
            <button @tap="downloadVideo">下载、查看视频</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // h5的地址
                url: 'http://127.0.0.1:5501/1.html'
            }
        },
        methods: {
            downloadVideo: function(e) {
                // 跳转到新webview页面，encodeURIComponent：url参数中出现空格等特殊字符时需要对参数进行编码
                uni.navigateTo({
                    url: '/pages/webview/webview?url=' + encodeURIComponent(this.url)
                })
            }
        }
    }
</script>

<style>

</style>

2、webview页面

<template>
    <view>
        <web-view :src="url" @message="onMessage"></web-view>
        <button class="download-btn" @click="downloadVideo">下载视频</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                downloadUrl: 'https://www.example.com/example.mp4',
                // url: 'https://www.example.com/index.html?videourl=xxx'
                // url: 'https://tieba.baidu.com/p/7722618570?red_tag=1419125733'
                url: ''
            }
        },
        methods: {
            onMessage(e) {
                // 接收H5页面发送的消息
                console.log('接收H5页面发送的消息', e)
                // if (e.detail.data && e.detail.data.type === 'getDownloadUrl')
                if (e.detail.data && e.detail.data[e.detail.data.length - 1].type == 'getDownloadUrl') {
                    // 保存下载链接
                    let downloadUrl = e.detail.data[e.detail.data.length - 1].url
                    this.downloadUrl = downloadUrl
                    // 去下载
                    this.downloadVideo()
                }
            },
            downloadVideo() {
                // 使用 uni.downloadFile() 方法下载视频资源
                console.log('下载')
                // 打开loading等待
                uni.showLoading({
                    mask: true,
                    title: '加载中'
                })

                uni.downloadFile({
                    url: this.downloadUrl,
                    success: (res) => {
                        console.log('success', res)
                        if (res.statusCode === 200) {
                            uni.hideLoading()
                            // 使用 uni.saveVideoToPhotosAlbum() 方法保存到相册
                            uni.saveVideoToPhotosAlbum({
                                filePath: res.tempFilePath,
                                success: () => {
                                    uni.showToast({
                                        title: '下载成功'
                                    })
                                }
                            })
                        }
                    },
                    fail: (res) => {
                        console.log('fail')
                    }
                })
            }

        },
        onLoad(option) {
            console.log('option', option)
            let url = decodeURIComponent(option.url) // 解码
            this.url = url
        }
    }
</script>

<style>

</style>

3、h5页面

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>网络网页</title>
  <style type="text/css">
    .btn {
      display: block;
      margin: 20px auto;
      padding: 5px;
      background-color: #007aff;
      border: 0;
      color: #ffffff;
      height: 40px;
      width: 200px;
    }

    .btn-red {
      background-color: #dd524d;
    }

    .btn-yellow {
      background-color: #f0ad4e;
    }

    .desc {
      padding: 10px;
      color: #999999;
    }

    .post-message-section {
      visibility: hidden;
    }
  </style>

  <script src="https://uniapp.dcloud.io/api/router?id=navigate&name=app"></script>
</head>

<body>
  <div>
    <video width="100%" controls
      src="http://v6.huanqiucdn.cn/4394989evodtranscq1500012236/d9cc07e4243791581279828388/v.f100830.mp4"
      poster="https://v6.huanqiucdn.cn/4394989evodtranscq1500012236/d9cc07e4243791581279828388/sampleSnapshot/sampleSnapshot_10_0.jpg"
      ></video>
  </div>
  <p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
  <div class="btn-list">
    <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
    <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
    <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
    <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
    <button class="btn" type="button" data-action="switchTab">switchTab</button>
  </div>
  <div class="post-message-section">
    <p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
    <div class="btn-list">
      <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
    </div>

    <div class="btn-list">
      <button class="btn btn-red" type="button" id="downLoad">下载</button>
    </div>
  </div>
  <script type="text/javascript">
    const videoUrl = 'http://v6.huanqiucdn.cn/4394989evodtranscq1500012236/d9cc07e4243791581279828388/v.f100830.mp4'




    var userAgent = navigator.userAgent;
    if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
      // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    } else if (/quickapp/i.test(userAgent)) {
      // quickapp
      document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
    }
    if (!/toutiaomicroapp/i.test(userAgent)) {
      document.querySelector('.post-message-section').style.visibility = 'visible';
    }
  </script>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
  <script type="text/javascript">
    // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
    document.addEventListener('UniAppJSBridgeReady', function () {
      uni.postMessage({
        data: {
          action: 'message'
        }
      });
      uni.getEnv(function (res) {
        console.log('当前环境：' + JSON.stringify(res));
      });

      document.querySelector('.btn-list').addEventListener('click', function (evt) {
        var target = evt.target;
        if (target.tagName === 'BUTTON') {
          var action = target.getAttribute('data-action');
          switch (action) {
            case 'switchTab':
              uni.switchTab({
                url: '/pages/tabBar/API/API'
              });
              break;
            case 'reLaunch':
              uni.reLaunch({
                url: '/pages/tabBar/component/component'
              });
              break;
            case 'navigateBack':
              uni.navigateBack({
                delta: 1
              });
              break;
            default:
              uni[action]({
                url: '/pages/component/button/button'
              });
              break;
          }
        }
      });
      document.getElementById('postMessage').addEventListener('click', function () {
        uni.postMessage({
          data: {
            action: 'message'
          }
        });
      });

      document.getElementById('downLoad').addEventListener('click', function () {

        console.log('uni```````````````````', uni)

        uni.postMessage({
          data: {
            type: 'getDownloadUrl',
            url: videoUrl
          }
        });


        uni.navigateBack({
          delta: 1
        });


      })


    });




  </script>
</body>

</html>