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

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

收到需求后，因为只是临时用一下，不打算写一套完整的系统，所以大概的思路就是，其他成员将视频通过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，跳转到二维码生成页面

B-ui v{{BuiVersion}}@园游会永不打烊视频列表{{item.name}}观看qrcode欢迎使用 B-ui © 园游会永不打烊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})}}}.logo{width: 140rpx;height: 140rpx;}

视频播放页面

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

                                                                                                                                                                                                                                             发送弹幕                                    export default {    data() {        return {            src: '',            danmuList: [{                    text: '第 1s 出现的弹幕',                    color: '#ff0000',                    time: 1                },                {                    text: '第 3s 出现的弹幕',                    color: '#ff00ff',                    time: 3                }            ],            danmuValue: ''        }    },    onReady: function(res) {        // #ifndef MP-ALIPAY        this.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  
qrcode页面
 
可自定义中心图标logo
 
设置二维码大小选择二维码图标生成二维码保存到图库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   },}/* @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;}
 
完整代码包，已经打包上传，需要的请后面看评论区！