六一收到个不同以往的需求，我的指导老师最近有点忙，让我们帮忙做一个可以通过二维码预览视频的小程序

收到需求后，因为只是临时用一下，不打算写一套完整的系统，所以大概的思路就是，其他成员将视频通过ftp传入我的服务器上，我通过uniapp将视频路径写死在index页面上，跳转时将url中的参数传入到下一个页面即可，视频播放页面通过拼接路径最后得到完整的src资源文件，在写入data完成渲染即可，同理在点击生成二维码时将参数带着去新的页面进行处理，得到该视频播放页面的url后利用qrcode进行渲染输出二维码

basic:[
{"name":"蔡晓东英雄事迹","url":"/pages/video/video?url=1.mp4"},
{"name":"云南传统手工业银器制作","url":"/pages/video/video?url=2.mp4"},
{"name":"高山流水的典故","url":"/pages/video/video?url=3.mp4"}
'''
'''

index页面

点击预览，跳转到视频播放页面
点击qrcode，跳转到二维码生成页面

<template><view><view class="b-flex-x b-bg-white b-p-32"><image src="/static/logo.jpg" mode="aspectFit" class="logo b-radius-8"></image><view class="b-flex-item b-ml-32"><view class="b-text-B b-text-48 b-text-black">B-ui v{{BuiVersion}}</view><view class="b-font-24 b-mt-8 b-text-black-dd">@园游会永不打烊</view></view></view><view class="b-pt-32 b-pr-32 b-pl-32 b-pb-24 b-text-black-dd">视频列表</view><view class="b-list-user b-bg-white"><view class="b-list-item" v-for="(item,index) in basic" :key="index"><view class="b-flex-x"><view class="b-icon b-text-black-d"><image src="/static/shipin-.png" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image></view><view class="b-ml-16">{{item.name}}</view></view><view class="btns-box"><button class="b-btn b-btn-blue b-btn-sm" @click="jump(item.url)">观看</button><button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="jumps(item.url)">qrcode</button></view></view></view><view class="b-p-32 b-text-black-dd b-text-c b-text-20"><view>欢迎使用 B-ui </view><view class="b-mt-8">&copy; 园游会永不打烊</view></view></view>
</template><script>export default {data() {return {BuiVersion:"",basic:[{"name":"蔡晓东英雄事迹","url":"/pages/video/video?url=1.mp4"},{"name":"云南传统手工业银器制作","url":"/pages/video/video?url=2.mp4"},{"name":"高山流水的典故","url":"/pages/video/video?url=3.mp4"},{"name":"百里负米的典故","url":"/pages/video/video?url=4.mp4"},{"name":"环境保护相关视频或垃圾分类","url":"/pages/video/video?url=5.mp4"},{"name":"消防人员负重前行的相关","url":"/pages/video/video?url=6.mp4"},{"name":"介绍大学生打游戏耽误学业","url":"/pages/video/video?url=7.mp4"},{"name":"介绍大学生因作弊受处分","url":"/pages/video/video?url=8.mp4"},{"name":"介绍大学生团队创新获奖","url":"/pages/video/video?url=9.mp4"},{"name":"介绍网络并非法外之地","url":"/pages/video/video?url=10.mp4"},{"name":"中国天眼技术介绍","url":"/pages/video/video?url=11.mp4"},{"name":"介绍大学生网络犯罪","url":"/pages/video/video?url=12.mp4"},{"name":"介绍祖国大好河山","url":"/pages/video/video?url=13.mp4"},{"name":"介绍中国少数民族一家亲","url":"/pages/video/video?url=14.mp4"},],}},onLoad() {this.BuiVersion = uni.Bui.version;},methods: {jump(url){uni.navigateTo({url:url})},jumps(url){console.log(url)uni.navigateTo({url:'/pages/qrcode/qrcode?url='+url})}}}
</script><style lang="scss">.logo{width: 140rpx;height: 140rpx;}
</style>

视频播放页面

资源渲染后即可直接播放，这部分的代码找了好久，起初以为uniapp没有支持网页播放的能力，需要用第三方的。

<template><view><view class="uni-padding-wrap uni-common-mt" style="display: flex;flex-direction: column;align-items: center;"><view><video id="myVideo" :src="src"@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video></view><!-- #ifndef MP-ALIPAY --><view class="uni-list uni-common-mt"><view class="uni-list-cell"><view class="uni-list-cell-db"><input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" /></view></view></view><view class="uni-btn-v"><button @click="sendDanmu" class="page-body-button">发送弹幕</button></view><!-- #endif --></view></view>
</template><script>
export default {data() {return {src: '',danmuList: [{text: '第 1s 出现的弹幕',color: '#ff0000',time: 1},{text: '第 3s 出现的弹幕',color: '#ff00ff',time: 3}],danmuValue: ''}},onReady: function(res) {// #ifndef MP-ALIPAYthis.videoContext = uni.createVideoContext('myVideo')// #endif},onLoad(options) {this.src="http://qrcode.taila.club/video/"+options.url},methods: {sendDanmu: function() {this.videoContext.sendDanmu({text: this.danmuValue,color: this.getRandomColor()});this.danmuValue = '';},videoErrorCallback: function(e) {// uni.showModal({//     content: e.target.errMsg,//     showCancel: false// })},getRandomColor: function() {const rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')}}
}
</script>

qrcode页面

可自定义中心图标logo

<template xlang="wxml"><view class="container"><view class="qrimg"><view class="qrimg-i"><tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" /></view><!-- <view class="qrimg-i"><tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" /></view> --></view><view class="uni-padding-wrap uni-common-mt"><view class="uni-title">设置二维码大小</view></view><view class="body-view"><slider :value="size" @change="sliderchange" min="50" max="500" show-value /></view><view class="uni-padding-wrap"><view class="btns"><button type="primary" @tap="selectIcon">选择二维码图标</button><button type="primary" @tap="creatQrcode">生成二维码</button><button type="primary" @tap="saveQrcode">保存到图库</button><!--        <button type="warn" @tap="clearQrcode">清除二维码</button><button type="warn" @tap="ifQrcode">显示隐藏二维码</button> --></view></view></view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {data() {return {ifShow: true,val: 'http://www.taila.club', // 要生成的二维码值size: 300, // 二维码大小unit: 'upx', // 单位background: '#ffffff', // 背景色foreground: '#252625', // 前景色pdground: '#32dbc6', // 角标色icon: '/static/logo.jpg', // 二维码图标iconsize: 40, // 二维码图标大小lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行onval: false, // val值变化时自动重新生成二维码loadMake: true, // 组件加载完成后自动生成二维码src: '' // 二维码生成后的图片地址或base64}},methods: {sliderchange(e) {this.size = e.detail.value},creatQrcode() {this.$refs.qrcode._makeCode()},saveQrcode() {this.$refs.qrcode._saveCode()},qrR(res) {this.src = res},clearQrcode() {this.$refs.qrcode._clearCode()this.val = ''},ifQrcode() {this.ifShow = !this.ifShow},selectIcon() {let that = thisuni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (res) {that.icon = res.tempFilePaths[0]setTimeout(() => {that.creatQrcode()}, 100);// console.log(res.tempFilePaths);}});}},components: {tkiQrcode},onLoad(options) {let that = this;that.val="http://qrcode.taila.club/#"+options.url},
}
</script><style>
/* @import "../../../common/icon.css"; */
.container {display: flex;flex-direction: column;width: 100%;
}.qrimg {display: flex;justify-content: center;
}
.qrimg-i{margin-right: 10px;
}slider {width: 100%;
}input {width: 100%;margin-bottom: 20upx;
}.btns {display: flex;flex-direction: column;width: 100%;
}button {width: 100%;margin-top: 10upx;
}
</style>

完整代码包，已经打包上传，需要的请后面看评论区！

【uniapp】视频分享预览小程序相关推荐

uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
uniapp 分享功能(app , 小程序）
一.APP分享 1.APP分享内容到微信聊天页面 uni.share({provider:'weixin',//分享服务提供商(即weixin|qq|sinaweibo)scene:"WXS ...
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
概述本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...
腾讯技术分享：微信小程序音视频技术背后的故事
1.引言微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
uni-app 使用 webview运行到小程序，打开萤石云视频
由于微信小程序特殊性,导致APP和h5适应的它都适应不了,因此,不得不对小程序做一些特殊的处理. 问题一:微信小程序无法打开web-view 的URL 相对于APP和H5而言,微信小程序比较严格,对于 ...
技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
1.概述本文内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案.希望能带给你启发. 分别介绍 ...
uniapp 打包H5，打包小程序，打包app分享到微信聊天、朋友圈
1.uniapp打包H5操作手法:Hbuilder->发行->网站-PC-WEB端或手机端H5访问,需要填写个访问域名,即发布后访问的域名路径 2.uniapp打包H5配置注意事项:uni ...
uni-app 使用vue的语法+小程序的标签和API。
开发规范为了实现多端兼容,综合考虑编译速度.运行性能等因素,uni-app 约定了如下开发规范: 页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范,详见uni-app 组件 ...
iOS 系统分享UIActivityViewController，自定义分享预览UI
UIActivityViewController继承自UIViewController,是一个系统分享组件,它提供了一些通用的标准服务(AirDrop.Messages,Mail)等,类似于照片里点击 ...

【uniapp】视频分享预览小程序

index页面

视频播放页面

qrcode页面

【uniapp】视频分享预览小程序相关推荐

最新文章

热门文章