video.vue
3.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">视频来源</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex">
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
</view>
</view>
</view>
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<view class="uni-title uni-common-mt uni-common-pl">摄像头位置</view>
<view class="uni-hello-text camera-tips">注意：部分 Android 手机下由于系统 ROM 不支持无法生效，打开拍摄界面后可操作切换</view>
<view class="uni-list">
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in cameraList" :key="item.value">
<radio :value="item.value" :checked="index === cameraIndex">{{item.name}}</radio>
</label>
</radio-group>
</view>
<!-- #endif -->
<template v-if="!src">
<view class="uni-hello-addfile" @tap="chooseVideo">+ 添加视频</view>
</template>
<template v-else>
<video :src="src" class="video"></video>
</template>
</view>
</template>
<script>
var sourceType = [
['camera'],
['album'],
['camera', 'album']
]
export default {
data() {
return {
title: 'chooseVideo',
sourceTypeIndex: 2,
sourceType: ['拍摄', '相册', '拍摄或相册'],
src: '',
cameraList: [{
value: 'back',
name: '后置摄像头',
checked: 'true'
},
{
value: 'front',
name: '前置摄像头'
},
],
cameraIndex: 0
}
},
onUnload() {
this.src = '',
this.sourceTypeIndex = 2,
this.sourceType = ['拍摄', '相册', '拍摄或相册'];
},
methods: {
radioChange(evt) {
for (let i = 0; i < this.cameraList.length; i++) {
if (this.cameraList[i].value === evt.detail.value) {
this.cameraIndex = i;
break;
}
}
},
sourceTypeChange: function(e) {
this.sourceTypeIndex = parseInt(e.detail.value)
},
chooseVideo: function() {
uni.chooseVideo({
camera: this.cameraList[this.cameraIndex].value,
sourceType: sourceType[this.sourceTypeIndex],
success: (res) => {
this.src = res.tempFilePath
},
fail: (err) => {
// #ifdef MP
uni.getSetting({
success: (res) => {
let authStatus = false;
switch (this.sourceTypeIndex) {
case 0:
authStatus = res.authSetting['scope.camera'];
break;
case 1:
authStatus = res.authSetting['scope.album'];
break;
case 2:
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
break;
default:
break;
}
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相机或相册获取视频，请在设置界面打开相关权限',
success: (res) => {
if (res.confirm) {
uni.openSetting()
}
}
})
}
}
})
// #endif
}
})
}
}
}
</script>
<style>
.video {
width: 100%;
}
.camera-tips {
padding: 10rpx 30rpx;
}
</style>