图片、视频加载方式
This commit is contained in:
zhujingzhou
@@ -1,25 +1,45 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="780px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-row :gutter="24">
|
||||
<el-col >
|
||||
<h3>AI生成的视频URl</h3>
|
||||
<div v-if="form.vidUrl" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer ref="player" v-if="form.vidUrl.indexOf('mp4') === -1" :video="{
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-if="form.vidUrl.indexOf('mp4') === -1"
|
||||
:video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.vidUrl),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
<DPlayer ref="player" v-else :video="{
|
||||
url: this.$store.getters.getSystemConfig.webImgReq + form.vidUrl,
|
||||
}"
|
||||
hotkey ></DPlayer>
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-else
|
||||
:video="{
|
||||
url: this.$store.getters.getSystemConfig.mp4Url + form.vidUrl,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
}"
|
||||
hotkey ></DPlayer>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="form"
|
||||
class="demo-form-inline"
|
||||
label-width="120px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
@@ -43,8 +63,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
@@ -76,15 +95,15 @@ export default {
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
"byWay": undefined,
|
||||
"id": undefined,
|
||||
"modifyImgs": undefined,
|
||||
"vidUrl": undefined,
|
||||
"reason": undefined,
|
||||
"status": 0,
|
||||
"updatedAt": undefined
|
||||
'byWay': undefined,
|
||||
'id': undefined,
|
||||
'modifyImgs': undefined,
|
||||
'vidUrl': undefined,
|
||||
'reason': undefined,
|
||||
'status': 0,
|
||||
'updatedAt': undefined
|
||||
},
|
||||
rules: {},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -95,22 +114,20 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增应用列表数据
|
||||
|
||||
filterM3u8(v) {
|
||||
// TODO:新增应用列表数据
|
||||
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
//TODO：编辑应用列表数据
|
||||
// TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
|
||||
aiorderFacechangeUpdate(data).then((res) => {
|
||||
if (res && res.code === 200) {
|
||||
this.$message.success(res.data ? res.data : '更新成功')
|
||||
} else {
|
||||
this.$message.error(res.data ? res.data : '更新失败')
|
||||
this.$message.error(res.data ? res.data : '更新失败')
|
||||
}
|
||||
this.Visible = false
|
||||
|
||||
this.Visible = false
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
@@ -145,16 +162,16 @@ export default {
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.modifyImgs = data
|
||||
},
|
||||
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,26 +1,46 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="780px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-row :gutter="24">
|
||||
<el-col>
|
||||
<h3>AI生成的视频URl</h3>
|
||||
<div v-if="form.modifyVideoUrl" style="width: 380px; height: 240px; overflow: hidden">
|
||||
|
||||
<DPlayer ref="player" v-if="form.modifyVideoUrl.indexOf('mp4') === -1" :video="{
|
||||
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-if="form.modifyVideoUrl.indexOf('mp4') === -1"
|
||||
:video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.modifyVideoUrl),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
<DPlayer ref="player" v-else :video="{
|
||||
url: this.$store.getters.getSystemConfig.webImgReq + form.modifyVideoUrl,
|
||||
}"
|
||||
hotkey ></DPlayer>
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-else
|
||||
:video="{
|
||||
url: this.$store.getters.getSystemConfig.mp4Url + form.modifyVideoUrl,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
}"
|
||||
hotkey ></DPlayer>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="form"
|
||||
class="demo-form-inline"
|
||||
label-width="120px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
@@ -31,7 +51,10 @@
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="换脸方式">
|
||||
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"
|
||||
<el-option
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -51,7 +74,6 @@
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
@@ -83,15 +105,15 @@ export default {
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
"byWay": undefined,
|
||||
"id": undefined,
|
||||
"modifyImgs": undefined,
|
||||
"modifyVideoUrl": undefined,
|
||||
"reason": undefined,
|
||||
"status": 0,
|
||||
"updatedAt": undefined
|
||||
'byWay': undefined,
|
||||
'id': undefined,
|
||||
'modifyImgs': undefined,
|
||||
'modifyVideoUrl': undefined,
|
||||
'reason': undefined,
|
||||
'status': 0,
|
||||
'updatedAt': undefined
|
||||
},
|
||||
rules: {},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -102,18 +124,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增应用列表数据
|
||||
// TODO:新增应用列表数据
|
||||
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
//TODO：编辑应用列表数据
|
||||
// TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
|
||||
aiorderStripUpdate(data).then((res) => {
|
||||
|
||||
|
||||
if (res && res.code === 200) {
|
||||
if (res && res.code === 200) {
|
||||
this.$message.success(res.data ? res.data : '更新成功')
|
||||
} else {
|
||||
this.$message.error(res.data ? res.data : '更新失败')
|
||||
@@ -161,8 +180,8 @@ export default {
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,159 +1,129 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="1800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="1800px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="标题">
|
||||
<el-input v-model="form.title" style="width: 315px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="封面类型">
|
||||
<el-select style="width: 180px" placeholder="请选择封面类型" v-model="form.coverType">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in coverTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="视频归类">
|
||||
<div>
|
||||
<el-form-item label="标题">
|
||||
<el-input v-model="form.title" style="width: 315px" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg" @onRemove="handleRemove('coverImg')">
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="影片类型">
|
||||
<el-select clearable placeholder="影片类型" v-model="form.type" style="width: 180px">
|
||||
<el-option label="长视频" value="longvideo" />
|
||||
<el-option label="短视频" value="shortvideo" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频归类">
|
||||
<el-select placeholder="请选择视频归类" v-model="videoType" style="width: 180px">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in formVideoTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="番号">
|
||||
<el-input v-model="form.bango" style="width: 315px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="演员">
|
||||
<el-input v-model="form.actors" placeholder="可填多人，中间用'，/。/,'等符号分割" style="width:315px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="视频归属">
|
||||
<el-input v-model="form.mediaSet" style="width: 315px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="一级标签:">
|
||||
<el-input v-model="form.firstTag" placeholder="请输入一级标签,中间用'，/。/,'等符号分割" style="width:315px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="二级标签">
|
||||
<el-input v-model="form.secondTags" placeholder="请输入二级标签,中间用'，/。/,'等符号分割" style="width:315px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="APP">
|
||||
<el-select multiple placeholder="APP" v-model="form.appids" style="width: 180px">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in appidsList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="视频类型">
|
||||
<el-select placeholder="请选择视频类型" v-model="form.formatType" style="width: 180px">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in formatTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="内容类型">
|
||||
<el-select placeholder="请选择内容类型" v-model="form.contentType" style="width: 180px">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in contentTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
|
||||
<el-form-item label="发布者">
|
||||
<el-input v-model="form.publish" placeholder="请输入发布者" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
|
||||
<el-form-item label="所有者">
|
||||
<el-input v-model="form.studio" placeholder="请输入所有者" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
|
||||
<el-form-item label="上架时间">
|
||||
<el-date-picker style="width: 180px" v-model="form.addedTime" type="date" placeholder="选择日期" value-format="yyyy-MM-ddTHH:mm:ssZ">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
|
||||
<el-form-item label="正片地址">
|
||||
<el-input v-model="form.fieldNameFs" style="width: 515px" disabled="disabled" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
|
||||
<el-form-item label="预览地址">
|
||||
<el-input v-model="form.preFileName" style="width: 515px">
|
||||
<el-button slot="append" @click="innerVisible = true">自定义设置预览</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
|
||||
<el-form-item label="详细描述">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 515px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div style="position: absolute;top: 50px;right: 50px">
|
||||
<div style="float:left">
|
||||
<h3>预览</h3>
|
||||
<div v-if="form.preFileName" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer ref="player" v-if="form.preFileName.indexOf('mp4') === -1" :video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.preFileName),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}" hotkey></DPlayer>
|
||||
<DPlayer ref="player" v-else :video="{
|
||||
url: this.$store.getters.getSystemConfig.webImgReq + form.preFileName,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey></DPlayer>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="APP">
|
||||
<el-select multiple placeholder="APP" v-model="form.appids" style="width: 180px">
|
||||
<el-option label="麻豆APP" :value="1" />
|
||||
<el-option label="麻豆官网" :value="2" />
|
||||
<el-option label="逼喱逼喱" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<h3>正片</h3>
|
||||
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer ref="player" v-if="form.fieldNameFs.indexOf('mp4') === -1" :video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.fieldNameFs),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}" hotkey></DPlayer>
|
||||
<DPlayer ref="player" v-else :video="{
|
||||
url: this.$store.getters.getSystemConfig.webImgReq + form.fieldNameFs,
|
||||
<div>
|
||||
<el-form-item label="上架时间">
|
||||
<el-date-picker
|
||||
style="width: 180px"
|
||||
v-model="form.addedTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-ddTHH:mm:ssZ">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="正片地址">
|
||||
<el-input v-model="form.fieldNameFs" style="width: 515px" disabled="disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="预览地址">
|
||||
<el-input v-model="form.preFileName" style="width: 515px">
|
||||
<el-button slot="append" @click="innerVisible = true">自定义设置预览</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="详细描述">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 515px" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<div style="position: absolute; top: 50px; right: 10px">
|
||||
<h3>正片</h3>
|
||||
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-if="form.fieldNameFs.indexOf('mp4') === -1"
|
||||
:video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.fieldNameFs),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-else
|
||||
:video="{
|
||||
url: this.$store.getters.getSystemConfig.mp4Url + form.fieldNameFs,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey></DPlayer>
|
||||
</div>
|
||||
<UploadVideo v-if="videoType" @changeVideoUrl="changeVideoUrl" :type="videoType" @repeatVideo="repeatVideo"
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
</div>
|
||||
<UploadVideo
|
||||
v-if="videoType"
|
||||
@changeVideoUrl="changeVideoUrl"
|
||||
:type="videoType"
|
||||
@repeatVideo="repeatVideo"
|
||||
style="max-width: 520px"></UploadVideo>
|
||||
<div v-else class="check_upload" @click.prevent="checkUpload">
|
||||
<div>
|
||||
选择文件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="position: absolute; top: 50px; right: 410px">
|
||||
<h3>预览</h3>
|
||||
<div v-if="form.preFileName" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-if="form.preFileName.indexOf('mp4') === -1"
|
||||
:video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.preFileName),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-else
|
||||
:video="{
|
||||
url: this.$store.getters.getSystemConfig.mp4Url + form.preFileName,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
|
||||
@@ -169,7 +139,6 @@
|
||||
时:
|
||||
<el-input-number :min="0" :max="24" size="mini" v-model="previewTimeData.h"></el-input-number>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
分:
|
||||
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.m"></el-input-number>
|
||||
@@ -193,68 +162,68 @@
|
||||
<script>
|
||||
import DPlayer from '@/components/VueDplayerHls/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import UploadVideo from '@/components/UploadVideoLibrary/index'
|
||||
import UploadVideo from '@/components/UploadVideo/index'
|
||||
import 'videojs-contrib-hls'
|
||||
import { mediaUpdate, updatePreTime } from '@/api/mediaLibrary/videoList'
|
||||
import { stringToArry, arryToString, current } from '@/filters/index'
|
||||
import {
|
||||
coverTypeList,
|
||||
appidsList,
|
||||
formatTypeList,
|
||||
formVideoTypeList
|
||||
} from '@/filters/mediaLibrary/videoList'
|
||||
import { stringToArry, arryToString } from '@/filters/index'
|
||||
import { StatusList, formVideoTypeList } from '@/filters/mediaLibrary/videoList'
|
||||
import { current } from '@/filters/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data','contentTypeList'],
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
UploadVideo,
|
||||
DPlayer,
|
||||
DPlayer
|
||||
},
|
||||
computed: {
|
||||
totalTime() {
|
||||
return this.data.data.videoTime
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
coverTypeList: coverTypeList(),
|
||||
appidsList: appidsList(),
|
||||
formatTypeList: formatTypeList(),
|
||||
formVideoTypeList: formVideoTypeList(),
|
||||
type: undefined,
|
||||
videoType: undefined,
|
||||
innerVisible: false,
|
||||
Visible: true,
|
||||
title: '',
|
||||
defaltTime: current() + 'T12:00:00.000Z',
|
||||
taskId: '',
|
||||
StatusList: StatusList(),
|
||||
formVideoTypeList: formVideoTypeList(),
|
||||
tags: null,
|
||||
fieldNameFs: '', // 正片地址全称
|
||||
form: {
|
||||
formatType: undefined, // 视频类型 1:长视频 2:短视频 3:预览
|
||||
mediaSet: undefined, // 视频归属
|
||||
contentType: undefined, // 内容类型 1:av（日本） 2:国产（短视频） 3:动漫
|
||||
coverType: undefined, // 封面类型 1:竖版 2:横版 3:系统
|
||||
secondTags: [],
|
||||
FirstTagList: [],
|
||||
|
||||
title: undefined, // 'string',标题
|
||||
addedTime: undefined, // 'string',上架时间
|
||||
publish: undefined, // 'string',视频发布者
|
||||
firstTag: undefined, // 'string',一级标签
|
||||
secondTags: undefined, // [],二级标签标签
|
||||
bango: undefined, // 'string',番号
|
||||
form: {
|
||||
appids: [],
|
||||
desc: undefined, // 'string',详细描述
|
||||
preFileName: undefined, // 'string',预览文件
|
||||
coverImg: undefined, // 封面
|
||||
actors: undefined, // [],演员
|
||||
addedTime: undefined, // 'string',上架时间
|
||||
bango: undefined, // 'string',番号
|
||||
checkSum: undefined, // 'string',md5校验码
|
||||
country: undefined, // 'string',国家
|
||||
coverImg: undefined, // 封面
|
||||
desc: undefined, // 'string',详细描述
|
||||
directors: undefined, // [],导演
|
||||
firstTag: undefined, // 'string',一级标签
|
||||
preFileName: undefined, // 'string',预览文件
|
||||
preview: undefined, // 0,预览普通视频
|
||||
publish: undefined, // 'string',视频发布者
|
||||
secondTags: undefined, // [],二级标签标签
|
||||
size: undefined, // 0,文件大小
|
||||
status: undefined, // 'string',当前状态
|
||||
studio: undefined, // 'string',工作室/所有者
|
||||
title: undefined, // 'string',标题
|
||||
type: undefined, // 'string',长视频/短视频
|
||||
videoTime: undefined // 0,影片长度
|
||||
},
|
||||
previewTimeData: {
|
||||
h: 0,
|
||||
m: 0,
|
||||
s: 0,
|
||||
s: 0
|
||||
},
|
||||
type: undefined,
|
||||
videoType: undefined
|
||||
}
|
||||
},
|
||||
|
||||
@@ -263,8 +232,7 @@ export default {
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.actors = arryToString(this.form.actors)
|
||||
this.form.secondTags = arryToString(this.form.secondTags)
|
||||
this.form.mediaSet = arryToString(this.form.mediaSet)
|
||||
this.form.directors = arryToString(this.form.directors)
|
||||
if (this.form.fieldNameFs) {
|
||||
this.open()
|
||||
}
|
||||
@@ -273,16 +241,44 @@ export default {
|
||||
this.player.dispose()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkUpload() {
|
||||
if (!this.type) {
|
||||
checkUpload() {
|
||||
if (!this.videoType) {
|
||||
return this.$message({
|
||||
type: 'error',
|
||||
message: '请选择视频归类！!'
|
||||
})
|
||||
}
|
||||
},
|
||||
//TODO:编辑影片列表数据
|
||||
// TODO：新增视频时绑定煤资库ID
|
||||
async subimitPTime() {
|
||||
let s = 0
|
||||
if (this.previewTimeData.h) {
|
||||
s += this.previewTimeData.h * 60 * 60
|
||||
}
|
||||
if (this.previewTimeData.m) {
|
||||
s += this.previewTimeData.m * 60
|
||||
}
|
||||
s += this.previewTimeData.s
|
||||
if (s > 0 && s + 15 <= this.data.data.videoTime - 15) {
|
||||
const data = {
|
||||
id: this.data.data.id,
|
||||
preFileTime: s
|
||||
}
|
||||
updatePreTime(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('预览时长设置成功')
|
||||
this.innerVisible = false
|
||||
} else {
|
||||
this.$message.error('预览时长设置失败')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error('预览时长设置不能为零或不能超过播放时长')
|
||||
}
|
||||
},
|
||||
// TODO：提交视频列表数据
|
||||
update(data) {
|
||||
mediaUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
@@ -296,6 +292,9 @@ export default {
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
handleRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.form.param[key] = []
|
||||
@@ -304,57 +303,52 @@ export default {
|
||||
this.previewTimeData = {
|
||||
h: 0,
|
||||
m: 0,
|
||||
s: 0,
|
||||
s: 0
|
||||
}
|
||||
this.innerVisible = false
|
||||
},
|
||||
async subimitPTime() {
|
||||
let s = 0
|
||||
if (this.previewTimeData.h) {
|
||||
s += this.previewTimeData.h * 60 * 60
|
||||
}
|
||||
if (this.previewTimeData.m) {
|
||||
s += this.previewTimeData.m * 60
|
||||
}
|
||||
s += this.previewTimeData.s
|
||||
if (s > 0 && s + 15 <= this.data.data.videoTime - 15) {
|
||||
const res = await updatePreTime({
|
||||
id: this.data.data.id,
|
||||
preFileTime: s,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
this.$message.success('预览时长设置成功')
|
||||
this.innerVisible = false
|
||||
} else {
|
||||
this.$message.error('预览时长设置失败')
|
||||
}
|
||||
} else {
|
||||
this.$message.error('预览时长设置不能为零或不能超过播放时长')
|
||||
}
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submit() {
|
||||
const data = { ...this.form }
|
||||
data.actors = data.actors ? stringToArry(data.actors) : []
|
||||
data.secondTags = data.secondTags ? stringToArry(data.secondTags) : []
|
||||
data.mediaSet = data.mediaSet ? stringToArry(data.mediaSet) : []
|
||||
data.addedTime = data.addedTime
|
||||
? data.addedTime === '0001-01-01T00:00:00Z'
|
||||
? this.defaltTime
|
||||
: data.addedTime
|
||||
: this.defaltTime
|
||||
data.directors = data.directors ? stringToArry(data.directors) : []
|
||||
const YY = new Date().getUTCFullYear()
|
||||
const MM =
|
||||
new Date().getMonth() + 1 < 10
|
||||
? `0${new Date().getMonth() + 1}`
|
||||
: new Date().getMonth() + 1
|
||||
const DD =
|
||||
new Date().getUTCDate() < 10
|
||||
? `0${new Date().getUTCDate()}`
|
||||
: new Date().getUTCDate()
|
||||
const HH =
|
||||
new Date().getUTCHours() < 10
|
||||
? `0${new Date().getUTCHours()}`
|
||||
: new Date().getUTCHours()
|
||||
const MU =
|
||||
new Date().getUTCMinutes() < 10
|
||||
? `0${new Date().getUTCMinutes()}`
|
||||
: new Date().getUTCMinutes()
|
||||
const SS =
|
||||
new Date().getUTCSeconds() < 10
|
||||
? `0${new Date().getUTCSeconds()}`
|
||||
: new Date().getUTCSeconds()
|
||||
const MS =
|
||||
new Date().getUTCMilliseconds() < 10
|
||||
? `0${new Date().getUTCMilliseconds()}`
|
||||
: new Date().getUTCMilliseconds()
|
||||
data.addedTime =
|
||||
data.addedTime || `${YY}-${MM}-${DD}T${HH}:${MU}:${SS}.${MS}Z`
|
||||
this.update(data)
|
||||
},
|
||||
|
||||
// 上传视频返回地址
|
||||
changeVideoUrl(data) {
|
||||
this.form.id = data.id
|
||||
// this.$set(this.form, 'fieldNameFs', data.videoUri)
|
||||
this.fieldNameFs = data.videoUri
|
||||
// this.form.fieldNameFs = data.videoUri
|
||||
// this.form.videoTime = parseInt(data.duration)
|
||||
// this.form.size = data.size
|
||||
// this.open()
|
||||
this.form.videoTime = parseInt(data.duration)
|
||||
this.form.size = data.size
|
||||
},
|
||||
|
||||
// 重复上传视频
|
||||
@@ -368,36 +362,23 @@ export default {
|
||||
this.form.coverImg = data
|
||||
},
|
||||
// / 监听视频播放的回调函数
|
||||
onPlayerPlay() {},
|
||||
onPlayerPlay() { },
|
||||
// / 监听暂停播放的回调函数
|
||||
onPlayerPause() {},
|
||||
onPlayerPause() { },
|
||||
// / 监听当前视频数据加载完成
|
||||
onPlayerLoadeddata() {},
|
||||
onPlayerLoadeddata() { },
|
||||
// / 监听当前视频数据加载失败
|
||||
onPlayerError() {},
|
||||
onPlayerError() { },
|
||||
// / 监听当前视频数据加载ing
|
||||
onPlayerWaiting() {},
|
||||
onPlayerWaiting() { },
|
||||
// / 监听当前视频播放完成
|
||||
onPlayerEnded() {},
|
||||
onPlayerEnded() { },
|
||||
open() {
|
||||
this.mediaUrl =
|
||||
'api/web/media/m3u8/' +
|
||||
'api/web/media/m3u8' +
|
||||
(this.form.fieldNameFs.match(RegExp(/.m3u8/))
|
||||
? this.form.fieldNameFs
|
||||
: this.form.fieldNameFs + '.m3u8')
|
||||
// this.$nextTick(function () {
|
||||
// document.getElementById("media-box").innerHTML =
|
||||
// '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%;height:100%; " playsinline="true"></video>';
|
||||
// this.player = videojs("my-video", {
|
||||
// bigPlayButton: false,
|
||||
// textTrackDisplay: false,
|
||||
// posterImage: true,
|
||||
// errorDisplay: true,
|
||||
// controlBar: true,
|
||||
// playbackRates: [0.5, 1, 1.5, 2, 3, 5, 10],
|
||||
// });
|
||||
// this.player.src(this.mediaUrl);
|
||||
// });
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
@@ -406,8 +387,8 @@ export default {
|
||||
this.player.dispose()
|
||||
}
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@@ -423,10 +404,12 @@ export default {
|
||||
max-height: calc(100% - 30px);
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.el-dialog .el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.videoBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -436,15 +419,18 @@ export default {
|
||||
.el-textarea.is-disabled.ti .el-textarea__inner {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.media-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#my-video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
@@ -0,0 +1,469 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="1800px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<div>
|
||||
<el-form-item label="标题">
|
||||
<el-input v-model="form.title" style="width: 315px" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg" @onRemove="handleRemove('coverImg')">
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="影片类型">
|
||||
<el-select clearable placeholder="影片类型" v-model="form.type" style="width: 180px">
|
||||
<el-option label="长视频" value="longvideo" />
|
||||
<el-option label="短视频" value="shortvideo" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频归类">
|
||||
<el-select placeholder="请选择视频归类" v-model="videoType" style="width: 180px">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in formVideoTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="APP">
|
||||
<el-select placeholder="APP" v-model="form.appids" style="width: 180px">
|
||||
<el-option label="麻豆APP" :value="1" />
|
||||
<el-option label="麻豆官网" :value="2" />
|
||||
<el-option label="逼喱逼喱" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="上架时间">
|
||||
<el-date-picker
|
||||
style="width: 180px"
|
||||
v-model="form.addedTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-ddTHH:mm:ssZ">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="正片地址">
|
||||
<el-input v-model="form.fieldNameFs" style="width: 515px" disabled="disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="预览地址">
|
||||
<el-input v-model="form.preFileName" style="width: 515px">
|
||||
<el-button slot="append" @click="innerVisible = true">自定义设置预览</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="详细描述">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 515px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div style="position: absolute; top: 50px; right: 10px">
|
||||
<h3>正片</h3>
|
||||
<div v-if="form.fieldNameFs" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-if="form.fieldNameFs.indexOf('mp4') === -1"
|
||||
:video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.fieldNameFs),
|
||||
type: 'hls',
|
||||
pic: ''
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-else
|
||||
:video="{
|
||||
url:
|
||||
this.$store.getters.getSystemConfig.mp4Url + form.fieldNameFs,
|
||||
type: 'mp4',
|
||||
pic: ''
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
</div>
|
||||
<UploadVideo
|
||||
v-if="videoType"
|
||||
@changeVideoUrl="changeVideoUrl"
|
||||
:appId="form.appids ? form.appids : 888"
|
||||
:type="videoType"
|
||||
@repeatVideo="repeatVideo"
|
||||
style="max-width: 520px"></UploadVideo>
|
||||
<div v-else class="check_upload" @click.prevent="checkUpload">
|
||||
<div>
|
||||
选择文件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute; top: 50px; right: 410px">
|
||||
<h3>预览</h3>
|
||||
<div v-if="form.preFileName" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-if="form.preFileName.indexOf('mp4') === -1"
|
||||
:video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.preFileName),
|
||||
type: 'hls',
|
||||
pic: ''
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
<DPlayer
|
||||
ref="player"
|
||||
v-else
|
||||
:video="{
|
||||
url:
|
||||
this.$store.getters.getSystemConfig.mp4Url + form.preFileName,
|
||||
type: 'mp4',
|
||||
pic: ''
|
||||
}"
|
||||
hotkey></DPlayer>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click.native.prevent="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click.native.prevent="submit('ruleForm')">
|
||||
确 定
|
||||
</el-button>
|
||||
</div>
|
||||
<el-dialog width="30%" title="设置预览时长" :visible.sync="innerVisible" append-to-body>
|
||||
<el-row>
|
||||
<el-col :span="24" style="text-align: center">
|
||||
<div><span>总时长:</span>{{ totalTime }}s</div>
|
||||
<div>
|
||||
时:
|
||||
<el-input-number :min="0" :max="24" size="mini" v-model="previewTimeData.h"></el-input-number>
|
||||
</div>
|
||||
<div>
|
||||
分:
|
||||
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.m"></el-input-number>
|
||||
</div>
|
||||
<div>
|
||||
秒:
|
||||
<el-input-number :min="0" :max="59" size="mini" v-model="previewTimeData.s"></el-input-number>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24" style="text-align: center; margin: 10px 0">
|
||||
<el-button-group>
|
||||
<el-button type="info" @click.native.prevent="restTime">取消</el-button>
|
||||
<el-button type="primary" @click.native.prevent="subimitPTime">确定
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import DPlayer from '@/components/VueDplayerHls/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import UploadVideo from '@/components/UploadVideoLibraryV2/index'
|
||||
import 'videojs-contrib-hls'
|
||||
import { mediaUpdateV2, updatePreTime } from '@/api/mediaLibrary/videoList'
|
||||
import { stringToArry, arryToString } from '@/filters/index'
|
||||
import {
|
||||
StatusList,
|
||||
formVideoTypeList
|
||||
} from '@/filters/mediaLibrary/videoList'
|
||||
import { current } from '@/filters/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
UploadVideo,
|
||||
DPlayer
|
||||
},
|
||||
computed: {
|
||||
totalTime() {
|
||||
return this.data.data.videoTime
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerVisible: false,
|
||||
Visible: true,
|
||||
title: '',
|
||||
defaltTime: current() + 'T12:00:00.000Z',
|
||||
taskId: '',
|
||||
StatusList: StatusList(),
|
||||
formVideoTypeList: formVideoTypeList(),
|
||||
tags: null,
|
||||
fieldNameFs: '', // 正片地址全称
|
||||
secondTags: [],
|
||||
FirstTagList: [],
|
||||
|
||||
form: {
|
||||
appids: undefined,
|
||||
actors: undefined, // [],演员
|
||||
addedTime: undefined, // 'string',上架时间
|
||||
bango: undefined, // 'string',番号
|
||||
checkSum: undefined, // 'string',md5校验码
|
||||
country: undefined, // 'string',国家
|
||||
coverImg: undefined, // 封面
|
||||
desc: undefined, // 'string',详细描述
|
||||
directors: undefined, // [],导演
|
||||
firstTag: undefined, // 'string',一级标签
|
||||
preFileName: undefined, // 'string',预览文件
|
||||
preview: undefined, // 0,预览普通视频
|
||||
publish: undefined, // 'string',视频发布者
|
||||
secondTags: undefined, // [],二级标签标签
|
||||
size: undefined, // 0,文件大小
|
||||
status: undefined, // 'string',当前状态
|
||||
studio: undefined, // 'string',工作室/所有者
|
||||
title: undefined, // 'string',标题
|
||||
type: undefined, // 'string',长视频/短视频
|
||||
videoTime: undefined // 0,影片长度
|
||||
},
|
||||
previewTimeData: {
|
||||
h: 0,
|
||||
m: 0,
|
||||
s: 0
|
||||
},
|
||||
type: undefined,
|
||||
videoType: undefined
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.actors = arryToString(this.form.actors)
|
||||
this.form.directors = arryToString(this.form.directors)
|
||||
if (this.form.fieldNameFs) {
|
||||
this.open()
|
||||
}
|
||||
}
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkUpload() {
|
||||
if (!this.videoType) {
|
||||
return this.$message({
|
||||
type: 'error',
|
||||
message: '请选择视频归类！!'
|
||||
})
|
||||
}
|
||||
},
|
||||
// TODO：新增视频时绑定煤资库ID
|
||||
async subimitPTime() {
|
||||
let s = 0
|
||||
if (this.previewTimeData.h) {
|
||||
s += this.previewTimeData.h * 60 * 60
|
||||
}
|
||||
if (this.previewTimeData.m) {
|
||||
s += this.previewTimeData.m * 60
|
||||
}
|
||||
s += this.previewTimeData.s
|
||||
if (s > 0 && s + 15 <= this.data.data.videoTime - 15) {
|
||||
const data = {
|
||||
id: this.data.data.id,
|
||||
preFileTime: s
|
||||
}
|
||||
updatePreTime(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('预览时长设置成功')
|
||||
this.innerVisible = false
|
||||
} else {
|
||||
this.$message.error('预览时长设置失败')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error('预览时长设置不能为零或不能超过播放时长')
|
||||
}
|
||||
},
|
||||
// TODO：提交视频列表数据
|
||||
update(data) {
|
||||
mediaUpdateV2(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
handleRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.form.param[key] = []
|
||||
},
|
||||
restTime() {
|
||||
this.previewTimeData = {
|
||||
h: 0,
|
||||
m: 0,
|
||||
s: 0
|
||||
}
|
||||
this.innerVisible = false
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submit() {
|
||||
const data = { ...this.form }
|
||||
data.appids = data.appids ? [data.appids] : []
|
||||
data.actors = data.actors ? stringToArry(data.actors) : []
|
||||
data.directors = data.directors ? stringToArry(data.directors) : []
|
||||
const YY = new Date().getUTCFullYear()
|
||||
const MM =
|
||||
new Date().getMonth() + 1 < 10
|
||||
? `0${new Date().getMonth() + 1}`
|
||||
: new Date().getMonth() + 1
|
||||
const DD =
|
||||
new Date().getUTCDate() < 10
|
||||
? `0${new Date().getUTCDate()}`
|
||||
: new Date().getUTCDate()
|
||||
const HH =
|
||||
new Date().getUTCHours() < 10
|
||||
? `0${new Date().getUTCHours()}`
|
||||
: new Date().getUTCHours()
|
||||
const MU =
|
||||
new Date().getUTCMinutes() < 10
|
||||
? `0${new Date().getUTCMinutes()}`
|
||||
: new Date().getUTCMinutes()
|
||||
const SS =
|
||||
new Date().getUTCSeconds() < 10
|
||||
? `0${new Date().getUTCSeconds()}`
|
||||
: new Date().getUTCSeconds()
|
||||
const MS =
|
||||
new Date().getUTCMilliseconds() < 10
|
||||
? `0${new Date().getUTCMilliseconds()}`
|
||||
: new Date().getUTCMilliseconds()
|
||||
data.addedTime =
|
||||
data.addedTime || `${YY}-${MM}-${DD}T${HH}:${MU}:${SS}.${MS}Z`
|
||||
this.update(data)
|
||||
},
|
||||
|
||||
// 上传视频返回地址
|
||||
changeVideoUrl(data) {
|
||||
console.log(data)
|
||||
this.form.id = data.id
|
||||
this.form.fieldNameFs = data.videoUri
|
||||
this.form.videoTime = parseInt(data.duration)
|
||||
this.form.size = data.size
|
||||
},
|
||||
|
||||
// 重复上传视频
|
||||
repeatVideo(data) {
|
||||
this.taskId = data.taskId
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.coverImg = data
|
||||
},
|
||||
// / 监听视频播放的回调函数
|
||||
onPlayerPlay() { },
|
||||
// / 监听暂停播放的回调函数
|
||||
onPlayerPause() { },
|
||||
// / 监听当前视频数据加载完成
|
||||
onPlayerLoadeddata() { },
|
||||
// / 监听当前视频数据加载失败
|
||||
onPlayerError() { },
|
||||
// / 监听当前视频数据加载ing
|
||||
onPlayerWaiting() { },
|
||||
// / 监听当前视频播放完成
|
||||
onPlayerEnded() { },
|
||||
open() {
|
||||
this.mediaUrl =
|
||||
'api/web/media/m3u8' +
|
||||
(this.form.fieldNameFs.match(RegExp(/.m3u8/))
|
||||
? this.form.fieldNameFs
|
||||
: this.form.fieldNameFs + '.m3u8')
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
}
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/*height:600px;*/
|
||||
max-height: calc(100% - 30px);
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.el-dialog .el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.videoBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-textarea.is-disabled.ti .el-textarea__inner {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.media-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#my-video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.check_upload {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px dashed #ccc;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 4px 8px;
|
||||
font-size: 100%;
|
||||
line-height: 1.4;
|
||||
color: #666;
|
||||
border: 1px solid #666;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user