June 1 received a different request from the past. My instructor has been a little busy recently. Let us help to make a small program that can preview videos through QR codes
After receiving the demand, because it is only for temporary use, I don’t plan to write a complete system, so the general idea is that other members transfer the video to my server through ftp, and I write the video path to the index page through uniapp urlAbove, just transfer the parameters in to the next page when jumping, and finally get the complete src resource file through the splicing path on the video playback page, and write data to complete the rendering. Similarly, when clicking to generate a QR code Take the parameters to a new page for processing, and use qrcode to render and output the QR code after getting the url of the video playback page
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 page
Click preview to jump to the video playback page
Click qrcode to jump to the QR code generation page
<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">© 园游会永不打烊</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>
video playback page
After the resources are rendered, they can be played directly. I have been looking for this part of the code for a long time. At first I thought that uniapp does not have the ability to support web page playback and needs to use a third party.
<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-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 < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
}
}
</script>
qrcode page
Customizable center icon 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 = this
uni.chooseImage({
count: 1, //默认9
sizeType: ['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>
The complete code package has been packaged and uploaded, please read the comment area later if you need it!