Skip to content

Commit

Permalink
Video, Grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@szuprefix
szuprefix committed Dec 26, 2019
1 parent 6c3fc1a commit b76a651
Show file tree
Hide file tree
Showing 17 changed files with 528 additions and 49 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-django",
"version": "0.7.0",
"version": "0.7.1",
"description": "个人实验项目, 本框架的目标是借鉴并超越django admin的自动化思想, 实现UI前端的极简快速定制开发",
"main": "index.js",
"files": [
Expand Down
22 changes: 22 additions & 0 deletions src/components/media/VideoInput.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<q-video :width="field.width" :height="field.height" :appID="$store.state.qcloud.vod.appId" :fileID="value.fileId">
</q-video>
</template>
<script>
import QVideo from './qcloud/Video.vue'
export default{
props: {
value: Object,
field: Object
},
data () {
return {}
},
created () {
// console.log(this.value)
},
components: {QVideo},
methods: {},
computed: {}
}
</script>
29 changes: 29 additions & 0 deletions src/components/media/VideoWidget.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<q-video :width="field.width" :height="field.height" :appID="$store.state.qcloud.vod.appId"
:fileID="value[field.name].fileId" ref="video">
</q-video>
</template>
<script>
import QVideo from './qcloud/Video.vue'
export default{
props: {
value: Object,
field: Object
},
data () {
return {}
},
created () {
// console.log(this.value[this.field.name])
},
components: {QVideo},
methods: {},
computed: {},
watch: {
value(v) {
this.$refs.video.createPlayer()
console.log('change', v)
}
}
}
</script>
34 changes: 25 additions & 9 deletions src/components/media/qcloud/Video.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<template>
<video class="player-size" preload="auto" playsinline webkit-playsinline>
<video class="vod-player player-size" :style="{width, height}" preload="auto" playsinline webkit-playsinline>
</video>

</template>
<script>
// import load from 'load.js'
import $script from 'scriptjs'
export default{
props: {
fileID: String,
appID: String
appID: String,
width: String,
height: String
},
data () {
return {
Expand All @@ -18,7 +19,8 @@
}
},
components: {},
created () {
mounted () {
// console.log(this.fileID,this.appID)
this.init()
},
methods: {
Expand All @@ -30,10 +32,7 @@
document.getElementsByTagName('head')[0].appendChild(link)
},
createPlayer () {
this.player = window.TCPlayer(this.$el, {
fileID: this.fileID,
appID: this.appID
})
this.player = window.TCPlayer(this.$el, this.playerOptions)
},
init () {
if (!window.TCPlayer) {
Expand All @@ -46,7 +45,24 @@
}
}
},
computed: {}
computed: {
playerOptions () {
return {
fileID: this.fileID,
appID: this.appID,
plugins: {
ContinuePlay: { // 开启续播功能
auto: true
}
}
}
}
},
watch: {
fileID (v) {
this.player.loadVideoByID(this.playerOptions)
}
}
}
</script>
<style>
Expand Down
66 changes: 38 additions & 28 deletions src/components/media/qcloud/VodUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<el-upload :http-request="uploadFiles"
class="upload-demo"
ref="upload"
action="noaction"
accept=".mp4,.avi,.mov,.png,.jpg"
multiple="multiple"
:on-preview="handlePreview"
Expand All @@ -11,37 +12,39 @@
:on-progress="onProgress"
:on-success="onSuccess"
:on-error="onError"
list-type="picture-card"
:auto-upload="false">
list-type="file">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传mp4/avi文件，且不超过500kb</div>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<video style="width:100%;height:100%;" controls="controls" :src="file.url || toUrl(file.raw)"
v-if="file.raw.type.includes('video')"></video>
<el-image :src="file.url || toUrl(file.raw)" style="width:100%;height:100%;" fit="cover"
v-else-if="file.raw.type.includes('image')"></el-image>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
<!--<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
<div slot="tip" class="el-upload__tip">
<p>只能上传mp4/mov/avi文件.</p>
<p>视频上传成功后, 因为后台转码需要一段时间, 如果马上在播放器上播放, 有可能会提示"没有找到视频转码信息. Error Code: 13", 请稍等一段时间再刷新页面看看.</p>
</div>
<!--<i slot="default" class="el-icon-plus"></i>-->
<!--<div slot="file" slot-scope="{file}">-->
<!--<video style="width:100%;height:100%;" controls="controls" :src="file.url || toUrl(file.raw)"-->
<!--v-if="file.raw.type.includes('video')"></video>-->
<!--<el-image :src="file.url || toUrl(file.raw)" style="width:100%;height:100%;" fit="cover"-->
<!--v-else-if="file.raw.type.includes('image')"></el-image>-->
<!--<span class="el-upload-list__item-actions">-->
<!--<span class="el-upload-list__item-preview" @click="handlePreview(file)">-->
<!--<i class="el-icon-zoom-in"></i>-->
<!--</span>-->
<!--<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">-->
<!--<i class="el-icon-download"></i>-->
<!--</span>-->
<!--<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">-->
<!--<i class="el-icon-delete"></i>-->
<!--</span>-->
<!--</span>-->
<!--</div>-->

</el-upload>
<el-dialog :visible.sync="dialogVisible">
<video style="width:100%;height:100%;" controls="controls" :src="previewFile.url || toUrl(previewFile.raw)"
v-if="previewFile && previewFile.raw.type.includes('video')"></video>
<el-image :src="previewFile.url || toUrl(previewFile.raw)"
v-else-if="previewFile && previewFile.raw.type.includes('image')"></el-image>
</el-dialog>
<!--<el-dialog :visible.sync="dialogVisible">-->
<!--<video style="width:100%;height:100%;" controls="controls" :src="previewFile.url || toUrl(previewFile.raw)"-->
<!--v-if="previewFile && previewFile.raw.type.includes('video')"></video>-->
<!--<el-image :src="previewFile.url || toUrl(previewFile.raw)"-->
<!--v-else-if="previewFile && previewFile.raw.type.includes('image')"></el-image>-->
<!--</el-dialog>-->
</div>
</template>
<script>
Expand Down Expand Up @@ -82,7 +85,7 @@
},
onSuccess(response, file, fileList){
console.log(['success', response, file, fileList])
this.$emit('change', {response,file})
this.$emit('success', {response, file, fileList})
},
onChange (file, fileList) {
this.fileList = fileList
Expand All @@ -93,6 +96,13 @@
return url
},
uploadFiles (req) {
// let d={
// fileId: '12345678',
// video: {url: 'http://baidu.com'},
// cover: {url: 'http://cover.baidu.com'}
// }
// console.log(d)
// return Promise.resolve(d)
let uploader = this.tcVod.upload({
mediaFile: req.file
})
Expand Down

0 comments on commit b76a651

Please sign in to comment.