uni-app视频播放及下载功能

视频列表页

<template><view class="video_main"><viewclass="video_item"v-for="item in list":key="item.id"@click="handleGoVideo(item)"><imagemode="widthFix":src="item.img"></image></view></view>
</template>
<script>
export default {data () {return {list: []}},methods: {// ... 获取视频列表数据内容省略handleGoVideo (item) { // 图片点击事件// 1. 保存到全局共享中 getApp().globalDatagetApp().globalData.video = itemuni.navigateTo({url: '/pages/videoPlay/index'})}}
}
</script>
<style  lang="scss" scoped>
</style>

视频播放详情

<!-- pages/videoPlay/index -->
<template><view class="video_play"><image :src="videoObj.img"></image><!-- 工具栏 开始 --><view class="video_tool"><!-- 是否播放声音 -->    <view:class="['iconfont', muted ? 'iconjingyin' : 'iconshengyin' ]"@click="muted = !muted"></view><view class="iconfont iconzhuanfa"><!-- open-type 具体查看微信api --><button open-type="share"></button></view></view><!-- 工具栏 结束 --><!-- 视频播放器 开始 --><view class="video_wrap"><video:src="videoObj.video":muted="muted"objectFit="fill"></video></view><!-- 视频播放器 结束 --><!-- 视频下载 开始 --><view class="download"><viewclass="download_btn"@click="handleDownload">下载高清</view></view><!-- 视频下载 结束 --></view>
</template>
<script>
export default {data () {return {videoObj: {}, // 视频信息muted: false // 是否静音}},onLoad () {// console.log(getApp().globalData.video)this.videoObj = getApp().globalData.video // 从全局数据中获取video信息},methods: {async handleDownload () { // 下载功能await uni.showLoading({ title: '下载中' })// 1. 将远程文件 下载到小程序内存中const { tempFilePath } = (await uni.downloadFile({url: this.videoObj.video}))[1]// 2. 将内存中的文件 下载到本地系统相册uni.saveVideoToPhotosAlbum({ filePath: tempFilePath })uni.hideLoading()// 3. 提示用户下载成功await uni.showToast({ title: '下载成功', icon: 'none' })}}
}
</script>
<style  lang="scss" scoped>
.video_play {position: relative;image {position: absolute;width: 100vw;height: 100vh;z-index: -1;// css3 滤镜filter: blur(20px);}.video_tool {height: 80rpx;display: flex;justify-content: flex-end;.iconfont {width: 80rpx;color: #fff;font-size: 50rpx;border-radius: 40rpx;background-color: rgba(0, 0, 0, 0.2);display: flex;justify-content: center;align-items: center;margin-right: 20rpx;}.iconzhuanfa {position: relative;button {position: absolute;width: 100%;height: 100%;opacity: 0;}}}.video_wrap {display: flex;justify-content: center;video {width: 360rpx;height: 600rpx;}}.download {display: flex;justify-content: center;margin-top: 30rpx;.download_btn {width: 360rpx;height: 80rpx;border-radius: 40rpx;display: flex;justify-content: center;align-items: center;color: #fff;border: 1rpx solid #fff;background-color: rgba(0, 0, 0, 0.6);}}
}
</style>

效果图

uni-app视频播放及下载功能相关推荐

uni-app开发的APP项目上线后，登录后自动检测更新，点击下载并安装，可手动检测版本更新，实现扫码下载功能
先说实现逻辑:我选择原生app-云打包,打包时设置好版本号,打包后上传到后台管理的app版本管理中:页面在App.vue中加载时storage设置当前的app版本号,首页加载出来时调用后台管理上传的最 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
【h5】扫描二维码打开app或点击下载功能的实现
背景: 有时候,会遇到这种需求,就是扫描二维码打开app,若是用户没有这个app则提示它跳转:或者,用户首次安装,通过扫描二维码进行跳转到应用商店,或直接下载apk. 用网页直接来调用app是 ...
silverlight 类似百度的图片浏览器，视频播放，附件下载功能，全部后台程序。...
#region =========图片点击按钮================String[] nr = new String[7] { "房屋照片", "房屋所有权证& ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
iOS流媒体开发之三：HLS直播（M3U8）回看和下载功能的实现
1.概要流媒体开发第一篇文章就说要把这些不是随便就可以百度到的知识献给"简书",拖了一个多月了,总算弄完了,深深松了口气,万幸没有食言,否则对不起小伙伴们. 流媒体始终是大众生活 ...
使用uni-app实现使用浏览器下载功能时，安卓端部分机型不兼容问题（小米/华为）
在公司中使用 uni-app 进行移动端开发过程中涉及到检查更新功能的一些奇葩问题(主要是plus.runtime.openURL的使用)和大家进行分享一下. 文章目录 1. 实现检查更新用的方法 1 ...
c++ 暂停功能_app下载功能背后的逻辑
本文跟大家探讨下app的下载功能,也让大家更直观的理解功能和场景之间密不可分的关系. 目的下载功能在app中十分常见,比如:腾讯视频app的视频缓存到本地.百度网盘的下载.手机软件更新的下载等等.很 ...
python视频下载-Python实现视频下载功能
最近一两年短视频业务风生水起,各个视频网站都有各自特色的短视频内容.如果有这样一个程序,可以把各大视频网站的热门用户最新发布的视频都下载下来,不仅方便自己观看,还可以将没有版权的视频发布在个人社交网站 ...

uni-app视频播放及下载功能

uni-app视频播放及下载功能相关推荐

最新文章

热门文章