@@ -9,6 +9,7 @@ | |||
"dependencies": { | |||
"axios": "0.18.1", | |||
"element-ui": "^2.15.12", | |||
"file-saver": "^2.0.5", | |||
"franc": "^6.1.0", | |||
"install": "^0.13.0", | |||
"lib-flexible": "^0.3.2", | |||
@@ -3,7 +3,7 @@ import request from '@/utils/request' | |||
// https://smapitest.malls.iformall.com/C/api/ | |||
/** | |||
* @description 获取语音列表 | |||
* @description 获取语音列表1级 | |||
* @returns personMouldId,paperwork | |||
*/ | |||
export function voiceList(data) { | |||
@@ -13,6 +13,19 @@ export function voiceList(data) { | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 获取语音列表2级 | |||
* @returns personMouldId,paperwork | |||
*/ | |||
export function voiceList2Api(id) { | |||
return request({ | |||
url: `/api/voiceMould/findById?id=${id}`, | |||
method: 'GET', | |||
}) | |||
} | |||
/** | |||
* @description 试听MP3 | |||
* @returns id | |||
@@ -5,9 +5,9 @@ import request from '@/utils/request' | |||
* @param {number} pageParams (pageNum, pageSize) | |||
* @returns data | |||
*/ | |||
export function getVideoList(pageNum, pageSize,videoType) { | |||
export function getVideoList(pageNum, pageSize,videoType,videoStatuss) { | |||
return request({ | |||
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}&videoStatuss=${videoStatuss}`, | |||
method: 'get' | |||
}) | |||
} | |||
@@ -19,10 +19,10 @@ | |||
class="material" | |||
:style="{ | |||
transformOrigin: 'top left', | |||
transform: 'scale(' + item.w + ') ', | |||
transform: 'scale(' + item.w / proportion + ') ', | |||
zIndex: item.z, | |||
top: item.y + 'px', | |||
left: item.x + 'px' | |||
top: item.y / proportion + 'px', | |||
left: item.x / proportion + 'px' | |||
}" | |||
> | |||
<div>{{ item.text }}</div> | |||
@@ -166,8 +166,8 @@ export default { | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
// console.log(deltaX) | |||
this.materialList.scList[index].x += deltaX | |||
this.materialList.scList[index].y += deltaY | |||
this.materialList.scList[index].x += deltaX.toFixed(0) * this.proportion | |||
this.materialList.scList[index].y += deltaY.toFixed(0) * this.proportion | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
@@ -219,6 +219,7 @@ export default { | |||
// 鼠标抬起 | |||
onMouseUp1() { | |||
this.dragging = false | |||
this.startDistance = 0 | |||
}, | |||
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
onMouseMove1() { | |||
@@ -1,5 +1,5 @@ | |||
.floatRight { | |||
float: right; | |||
// float: right; | |||
} | |||
// 淡化文字 | |||
.desalinate { | |||
@@ -29,4 +29,13 @@ p { | |||
} | |||
.relative { | |||
position: relative; | |||
} | |||
.wordColor { | |||
color: #51d9ca; | |||
} | |||
.displayFlex { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} |
@@ -17,7 +17,7 @@ | |||
</van-tabs> | |||
<!-- 模板列表 --> | |||
<div class="choose"> | |||
<div class="choose" v-if="showModeList"> | |||
<waterfall class="modeList" :col="2" :data="modeList"> | |||
<div | |||
class="model" | |||
@@ -65,7 +65,8 @@ export default { | |||
type: 0, | |||
currentId: '', | |||
modeList: [], // 模板列表 | |||
tabList: ['全部', '男性', '女性'] | |||
tabList: ['全部', '男性', '女性'], | |||
showModeList: true | |||
} | |||
}, | |||
computed: { | |||
@@ -107,7 +108,9 @@ export default { | |||
try { | |||
sex = sex == 0 ? '' : sex | |||
// const res = await getModeList(sex) | |||
this.showModeList = false | |||
const res = await getModeList1(sex) | |||
this.showModeList = true | |||
console.log(res, '获取模板列表') | |||
this.modeList = res.data.list | |||
} catch (error) { | |||
@@ -59,7 +59,7 @@ | |||
<div class="addText-title"> | |||
播报声音<span class="redWord">(必选)</span> | |||
</div> | |||
<div>英语_女性_安娜</div> | |||
<div>{{ soundChoose.subTitle }}</div> | |||
</div> | |||
<!-- 合成按钮 --> | |||
<div class="makeVideo" @click="submit">立即制作</div> | |||
@@ -170,6 +170,13 @@ | |||
<!-- 展示页 --> | |||
<div class="list"> | |||
<div v-if="textareaContent.length == 0">请输入文案</div> | |||
<div | |||
v-if=" | |||
soundItemList.length == 0 && textareaContent.length != 0 | |||
" | |||
> | |||
文字过少,难以识别 | |||
</div> | |||
<template v-if="soundItemList.length != 0"> | |||
<div | |||
@click="clickSoundItem(index, item)" | |||
@@ -189,6 +196,30 @@ | |||
</div> | |||
</van-tab> | |||
</van-tabs> | |||
<!-- 二级列表显示 --> | |||
<van-popup | |||
class="SoundList2" | |||
v-model="showSoundList2" | |||
position="bottom" | |||
:style="{ width: '100%' }" | |||
> | |||
<div class="list"> | |||
<div v-if="soundItemList2.length == 0">暂无数据</div> | |||
<template v-if="soundItemList.length != 0"> | |||
<div | |||
@click="clickSoundItem2(index, item)" | |||
class="listItem" | |||
:class="{ active: soundItemListAction2 == index }" | |||
v-for="(item, index) in soundItemList2" | |||
:key="index" | |||
> | |||
<img src="../../assets/icon/icon-earphone.png" alt="" /> | |||
<div>{{ item.title }}-{{ item.speakTypeStr }}</div> | |||
</div> | |||
</template> | |||
</div></van-popup | |||
> | |||
</div> | |||
</div> | |||
@@ -376,6 +407,7 @@ import { | |||
import { | |||
videoDetial, | |||
voiceList, | |||
voiceList2Api, | |||
systemBGIListApi, | |||
myBGIListApi, | |||
systemScListApi, | |||
@@ -411,15 +443,20 @@ export default { | |||
saveID: null, // 作品id | |||
inputTitle: '', // 作品标题 | |||
textareaContent: '', // 输入框内容 | |||
//底部 | |||
bottomTabActive: 2, // 底部导航高亮 | |||
showSubtitle: false, // 是否展示字幕 | |||
showSynthesisDialog: false, //合成进度条窗口显示隐藏 | |||
showTabSheet: false, //tab栏弹出框显隐 | |||
showSoundList2: false, //声音的二级显隐 | |||
soundTabList: ['全部'], // 声音tab栏标题 | |||
soundListAction: -1, //声音tab栏标题高亮 | |||
soundItemList: [], // 声音展示列表 | |||
soundItemList: [], // 声音展示一级列表 | |||
soundItemList2: [], // 声音展示二级列表 | |||
soundItemListAction: -1, // 声音展示列表高亮 | |||
soundItemListAction2: -1, // 声音展示列表高亮二级 | |||
soundChoose: {}, //选中的音频 | |||
//编辑 | |||
bjAction: 0, // 背景:素材库和上传高亮 | |||
bjImgAction: -1, // 选中背景图高亮 | |||
scAction: 0, // 素材:素材库和上传高亮 | |||
@@ -446,6 +483,7 @@ export default { | |||
this.bottomTabActive = index | |||
if (this.textareaContent.length == 0) { | |||
this.soundItemList = [] //清空处理 | |||
this.soundItemList2 = [] //清空处理 | |||
} | |||
console.log(this.bottomTabActive) | |||
this.showTabSheet = !this.showTabSheet | |||
@@ -478,16 +516,44 @@ export default { | |||
// 点击声音列表中的某一项 | |||
async clickSoundItem(index, item) { | |||
if (this.soundItemListAction != index) { | |||
this.soundItemListAction = index | |||
this.soundItemListAction = index //高亮 | |||
this.soundChoose = item | |||
this.showSoundList2 = true | |||
const res = await voiceList2Api(item.id) | |||
let list = res.data.subVoiceMould ? res.data.subVoiceMould : [] | |||
console.log(list) | |||
let obj = JSON.parse(JSON.stringify(res)) | |||
delete obj.data.subVoiceMould | |||
let list2 = [{ ...obj.data }, ...list] | |||
console.log(list2) | |||
this.soundItemList2 = list2 || [] | |||
// console.log(this.soundItemList2) | |||
// this.audioUrl = res.data.videoUrl | |||
} else { | |||
this.soundItemListAction = -1 | |||
this.soundChoose = {} | |||
} | |||
}, | |||
// 点击声音列表中的某一项2级 | |||
async clickSoundItem2(index, item) { | |||
if (this.soundItemListAction2 != index) { | |||
this.soundItemListAction2 = index //高亮 | |||
this.soundChoose = item | |||
// 得到试听文件 | |||
const res = await videoDetial(item.exampleVideoId) | |||
this.audioUrl = res.data.videoUrl | |||
} else { | |||
this.soundItemListAction = -1 | |||
this.soundItemListAction2 = -1 | |||
this.soundChoose = {} | |||
} | |||
}, | |||
// 提交合成视频 | |||
submit() { | |||
// 组装参数 | |||
@@ -600,8 +666,10 @@ export default { | |||
const url = res.data.videoPathUri + res.data.videoPath | |||
console.log(url, 'url') | |||
this.$router.push({ | |||
path: '/downloadVideo', | |||
// path: '/downloadVideo', | |||
path: '/videoDownload', | |||
query: { | |||
id: this.$route.query.id, | |||
videoId: res.data.videoId, | |||
videoUrl: url | |||
} | |||
@@ -640,8 +708,7 @@ export default { | |||
h: 1 | |||
} | |||
} | |||
// console.log(JSON.parse(res.data.backgroundSm)) | |||
// console.log(JSON.parse(res.data.materialAllJson)) | |||
this.videoType = res.data.videoType | |||
// this.imgUrl = res.data.personMould.coverImg | |||
this.personMouldId = res.data.personMouldId | |||
@@ -651,20 +718,6 @@ export default { | |||
this.soundChoose.id = res.data.voiceMouldId | |||
this.soundChoose.mouldSmId = res.data.voiceMouldSmId | |||
// { | |||
// "videoType": 1:竖版2:横版 | |||
// "personMouldId":选择数字人id | |||
// "personMouldSm":数字人json(title-数字人标题,mouldSmId-数字人模板编码,material-数字人图片,backgroundId-默认背景id,backgroundMaterial-默认背景图片), | |||
// "voiceMouldId":声音模板id | |||
// "voiceMouldSm":声音模板json(title-声音标题,mouldSmId-声音模板编码,personId-声音风格id,speakId-声音性格ID), | |||
// "backgroundId":背景ID | |||
// "backgroundSm":背景json(material-背景图片) | |||
// "materialIds":素材ids | |||
// "materialAllJson":素材+数字人层级关系json() | |||
// "paperwork":文案 | |||
// "title":标题 | |||
// } | |||
await this.loadVoice() // 获取音频列表 | |||
this.soundItemListAction = this.soundItemList.findIndex((item) => { | |||
return item.id == this.soundChoose.id | |||
@@ -865,11 +918,12 @@ export default { | |||
const elementWidth = document.getElementById('editPosition').clientWidth | |||
console.log(elementWidth) | |||
// 根据横竖屏来确定比例 1竖2横 | |||
if (this.videoType == 1) { | |||
this.proportion = 1920 / elementWidth | |||
this.proportion = 1080 / elementWidth | |||
console.log(this.proportion) | |||
} else if (this.videoType == 2) { | |||
this.proportion = 1080 / elementWidth | |||
this.proportion = 1920 / elementWidth | |||
console.log(this.proportion) | |||
} | |||
} | |||
@@ -1209,6 +1263,22 @@ export default { | |||
} | |||
} | |||
.SoundList2 { | |||
height: 280px; | |||
padding: 10px 10px 10px; | |||
.list { | |||
height: 280px; | |||
margin-top: 0px; | |||
} | |||
.list::-webkit-scrollbar { | |||
width: 0; | |||
display: none; | |||
} | |||
} | |||
.SoundList2::-webkit-scrollbar { | |||
width: 0; | |||
display: none; | |||
} | |||
.myTab { | |||
display: flex; | |||
margin: 10px 0; | |||
@@ -7,9 +7,11 @@ | |||
<!-- 展示列表 --> | |||
<div class="item"> | |||
<div class="title"> | |||
<img src="../../assets/img/myVideo.png" alt="" /> | |||
我的视频作品 | |||
<span | |||
<div> | |||
<img src="../../assets/img/myVideo.png" alt="" /> | |||
我的视频作品 | |||
</div> | |||
<!-- <span | |||
v-show="listActive == 1" | |||
class="floatRight" | |||
@click="listActive = 2" | |||
@@ -19,54 +21,88 @@ | |||
v-show="listActive == 2" | |||
class="floatRight" | |||
><img src="../../assets/icon/icon-list1.png" alt="" | |||
/></span> | |||
<span class="floatRight" @click="getNewList(1)">只看竖屏</span> | |||
<span class="floatRight" @click="getNewList(2)">只看横屏</span> | |||
/></span> --> | |||
<div class="title-change"> | |||
<div class="displayFlex"> | |||
<span | |||
v-show="listActive == 1" | |||
class="floatRight" | |||
:class="videoType == 1 ? 'wordColor' : ''" | |||
@click="getNewList(1)" | |||
>只看竖屏</span | |||
> | |||
<span | |||
v-show="listActive == 1" | |||
class="floatRight" | |||
:class="videoType == 2 ? 'wordColor' : ''" | |||
@click="getNewList(2)" | |||
>只看横屏</span | |||
> | |||
<span | |||
v-show="listActive == 1" | |||
class="floatRight" | |||
@click="draftChange(2)" | |||
>草稿箱</span | |||
><span | |||
@click="draftChange(1)" | |||
v-show="listActive == 2" | |||
class="floatRight" | |||
>已完成</span | |||
> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 具体内容 --> | |||
<!-- 列表样式--大图 --> | |||
<div v-if="videoList.length == 0">暂无数据123</div> | |||
<div v-if="videoList.length == 0">暂无数据</div> | |||
<!-- 新 修改v-if--> | |||
<waterfall | |||
v-if="videoList.length != 0" | |||
v-show="listActive == 1" | |||
class="waterFall" | |||
:col="2" | |||
:data="videoList" | |||
> | |||
<div | |||
v-for="(item, index) in videoList" | |||
class="waterFall-item" | |||
:key="item.id ? item.id : index" | |||
@click="goDetail(item)" | |||
<div v-if="waterfallBug"> | |||
<waterfall | |||
v-if="videoList.length != 0" | |||
v-show="listActive == 1" | |||
class="waterFall" | |||
:col="2" | |||
:data="videoList" | |||
> | |||
<div class="waterFall-item-paddding"> | |||
<img :src="index == 1 ? defaultImg : defaultImg1" alt="" /> | |||
<!-- 渐变遮罩层 --> | |||
<div class="waterFall-item-mask"> | |||
<div>{{ item.title || '暂无' }}</div> | |||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div> | |||
创建时间:{{ | |||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||
}} | |||
<div | |||
v-for="(item, index) in videoList" | |||
class="waterFall-item" | |||
:key="item.id ? item.id : index" | |||
@click="goDetail(item)" | |||
> | |||
<div class="waterFall-item-paddding"> | |||
<img | |||
:src="item.videoType == 2 ? defaultImg : defaultImg1" | |||
alt="" | |||
/> | |||
<!-- 渐变遮罩层 --> | |||
<div class="waterFall-item-mask"> | |||
<div>{{ item.title || '暂无' }}</div> | |||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div> | |||
创建时间:{{ | |||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||
}} | |||
</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||
<div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover"> | |||
视频生成失败 | |||
</div> | |||
</div> | |||
<!-- 删除 --> | |||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||
</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||
<div class="waterFall-item-state"> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
</div> | |||
<!-- 删除 --> | |||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
</waterfall> | |||
</waterfall> | |||
</div> | |||
<!-- 列表样式--小图 --> | |||
<van-swipe-cell | |||
@@ -184,6 +220,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
waterfallBug: true, // 解决瀑布流不显示bug | |||
videoType: 1, //1竖屏2横屏 | |||
showPopup: false, // 编辑和删除显示隐藏 | |||
clickItem: -1, // 弹出层显示隐藏 | |||
@@ -209,6 +246,12 @@ export default { | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// 草稿箱切换 | |||
draftChange(type) { | |||
this.listActive = type | |||
this.videoType = 1 | |||
this.loadVideoList(1, this.pageSize, this.videoType) | |||
}, | |||
// 横屏竖屏列表 | |||
getNewList(videoType) { | |||
this.videoType = videoType | |||
@@ -269,13 +312,7 @@ export default { | |||
this.$router.push({ | |||
path: '/editModel', | |||
query: { | |||
// videoType: item.videoType, | |||
// saveID: item.id, | |||
id: item.id | |||
// imgUrl: item.id, | |||
// modelId: item.id, | |||
// mouldSmId: item.id, | |||
// modify: true | |||
} | |||
}) | |||
} | |||
@@ -285,14 +322,15 @@ export default { | |||
return | |||
} | |||
// 成功 | |||
else if (status == 2) { | |||
else if ([2, 4, 5, 6].includes(status)) { | |||
const url = item.videoPathUri + item.videoPath | |||
this.$router.push({ | |||
// path: '/downloadVideo', | |||
path: '/videoDownload', | |||
query: { | |||
videoId: item.videoId, | |||
videoUrl: url | |||
videoUrl: url, | |||
id: item.id | |||
} | |||
}) | |||
} | |||
@@ -334,10 +372,19 @@ export default { | |||
*/ | |||
async loadVideoList(pageNum, pageSize, videoType) { | |||
try { | |||
const res = await getVideoList(pageNum, pageSize, videoType) | |||
this.waterfallBug = false | |||
// 根据listActive判断是不是看的草稿箱 | |||
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3] | |||
const res = await getVideoList( | |||
pageNum, | |||
pageSize, | |||
videoType, | |||
videoStatuss | |||
) | |||
console.log(res, '获取作品列表') | |||
this.videoList = res.data.list | |||
this.waterfallBug = true | |||
this.total = res.data.total | |||
} catch (error) { | |||
console.log(error, 'error') | |||
@@ -420,7 +467,7 @@ export default { | |||
} | |||
} | |||
.page { | |||
transform: translateX(30%); | |||
// transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
@@ -465,6 +512,9 @@ export default { | |||
width: 100%; | |||
padding: 15px 10px; | |||
.title { | |||
display: flex; | |||
justify-content: space-between; | |||
width: 100%; | |||
font-size: 16px; | |||
font-weight: 500; | |||
// margin-left: 15px; | |||
@@ -476,6 +526,10 @@ export default { | |||
height: 18px; | |||
background-size: 100% 100%; | |||
} | |||
&-change { | |||
display: inline-block; | |||
font-size: 12px; | |||
} | |||
} | |||
.itemList { | |||
.videoModel { | |||
@@ -548,8 +602,8 @@ export default { | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: center; | |||
top: 70%; | |||
left: 290px; | |||
top: 50%; | |||
left: 80%; | |||
width: 80px; | |||
height: 30px; | |||
border-radius: 12px; | |||
@@ -4,9 +4,8 @@ | |||
<HeadTop /> | |||
<div class="content"> | |||
<!-- 视频 --> | |||
<div class="videoBox"> | |||
<div class="videoBox" v-if="videoSrc"> | |||
<video | |||
loop | |||
download | |||
ref="video" | |||
:src="videoSrc" | |||
@@ -49,9 +48,12 @@ | |||
</div> | |||
</div> | |||
<!-- 下载按钮 --> | |||
<a :href="videoSrc" download class="videoBox-download"> | |||
<!-- <a :href="videoSrc" download class="videoBox-download"> | |||
<img src="../../assets/icon/icon-download.png" alt="" /> | |||
</a> | |||
</a> --> | |||
<div class="videoBox-download" @click="downloadVideo"> | |||
<img src="../../assets/icon/icon-download.png" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -64,6 +66,11 @@ import { mapState, mapActions } from 'vuex' | |||
import HeadTop from './../../components/common/head.vue' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
import { saveAs } from 'file-saver' | |||
// 接口 | |||
import { getModelDetailById } from '../../api/getPaper' | |||
import { doGetVideoDetialById } from '../../api/downloadVideo' | |||
Vue.use(Toast) | |||
export default { | |||
components: { | |||
@@ -72,15 +79,17 @@ export default { | |||
data() { | |||
return { | |||
inPage: false, | |||
videoSrc: | |||
'https://wenlian.wenzhou.gov.cn:8001//upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4', | |||
// videoSrc: | |||
// 'https://wenlian.wenzhou.gov.cn:8001//upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4', | |||
videoSrc: null, | |||
showControls: false, // 控制台显示隐藏 | |||
playing: false, // 播放 | |||
isLandscape: false, | |||
progress: 0, | |||
currentTime: 0, | |||
totalTime: 0, | |||
progressChanging: false | |||
progressChanging: false, | |||
title: null | |||
} | |||
}, | |||
computed: { | |||
@@ -88,9 +97,16 @@ export default { | |||
characters: (state) => state.publicObj.characters | |||
}) | |||
}, | |||
created() { | |||
// console.log(this.$route) | |||
// this.videoSrc = this.$route.query.videoUrl | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
//初始化数据 | |||
this.getVideoInfo() | |||
this.$refs.video.addEventListener('timeupdate', this.onTimeUpdate) | |||
this.$refs.video.addEventListener('ended', this.onVideoEnded) | |||
screen.orientation.addEventListener('change', this.onOrientationChange) | |||
@@ -101,15 +117,28 @@ export default { | |||
screen.orientation.removeEventListener('change', this.onOrientationChange) | |||
}, | |||
methods: { | |||
// 下载视频 | |||
downloadVideo() { | |||
// 视频地址 | |||
const videoUrl = this.videoSrc | |||
// 下载视频 | |||
saveAs(videoUrl, this.title) | |||
}, | |||
// 获取视频信息 | |||
async getVideoInfo() { | |||
const { data: res } = await getModelDetailById(this.$route.query.id) | |||
if (res.videoId) { | |||
const { data: res2 } = await doGetVideoDetialById(res.videoId) | |||
this.videoSrc = res2.videoUrl | |||
this.title = res2.title | |||
return | |||
} | |||
this.videoSrc = res.videoPathUri + res.videoPath | |||
this.title = res.title | |||
}, | |||
onVideoLoaded() { | |||
this.totalTime = this.$refs.video.duration | |||
}, | |||
// onTimeUpdate() { | |||
// if (!this.progressChanging) { | |||
// this.currentTime = this.$refs.video.currentTime | |||
// this.progress = this.currentTime | |||
// } | |||
// }, | |||
onVideoEnded() { | |||
this.playing = false | |||
}, | |||
@@ -170,8 +199,8 @@ export default { | |||
<style lang="scss" scoped> | |||
.page { | |||
width: 375px; | |||
height: 100vh; | |||
// width: 375px; | |||
// height: 100vh; | |||
overflow-y: hidden; | |||
} | |||
.content { | |||
@@ -233,7 +262,7 @@ export default { | |||
} | |||
&-download { | |||
position: absolute; | |||
right: 10px; | |||
right: 15px; | |||
top: 15px; | |||
display: inline-block; | |||
width: 24px; | |||