|
@@ -11,9 +11,9 @@ |
|
|
<!-- <a :href="videoSrc" download class="videoBox-download"> |
|
|
<!-- <a :href="videoSrc" download class="videoBox-download"> |
|
|
<img src="../../assets/icon/icon-download.png" alt="" /> |
|
|
<img src="../../assets/icon/icon-download.png" alt="" /> |
|
|
</a> --> |
|
|
</a> --> |
|
|
<!-- <a class="videoBox-download" :href="videoSrc" download |
|
|
|
|
|
><img src="../../assets/icon/icon-download.png" alt="" |
|
|
|
|
|
/></a> --> |
|
|
|
|
|
|
|
|
<!-- <a class="videoBox-download" :href="baseUrl + `/api/userVideo/exportVideo?id=${id}`"> |
|
|
|
|
|
<img src="../../assets/icon/icon-download.png" alt="" /> |
|
|
|
|
|
</a> --> |
|
|
<div class="videoBox-download" @click="downloadVideo"> |
|
|
<div class="videoBox-download" @click="downloadVideo"> |
|
|
<img src="../../assets/icon/icon-download.png" alt="" /> |
|
|
<img src="../../assets/icon/icon-download.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
@@ -33,7 +33,7 @@ import { saveAs } from 'file-saver'; |
|
|
|
|
|
|
|
|
// 接口 |
|
|
// 接口 |
|
|
import { getModelDetailById } from '../../api/getPaper'; |
|
|
import { getModelDetailById } from '../../api/getPaper'; |
|
|
import { doGetVideoDetialById } from '../../api/downloadVideo'; |
|
|
|
|
|
|
|
|
import { doGetVideoDetialById, exportVideoApi } from '../../api/downloadVideo'; |
|
|
Vue.use(Toast); |
|
|
Vue.use(Toast); |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
@@ -43,9 +43,13 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
inPage: false, |
|
|
inPage: false, |
|
|
|
|
|
id: null, |
|
|
|
|
|
isAndroid: true, |
|
|
|
|
|
baseUrl: null, |
|
|
// videoSrc: |
|
|
// 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', |
|
|
// '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, //播放地址路径 |
|
|
videoSrc: null, //播放地址路径 |
|
|
|
|
|
videoId: null, //视频ID |
|
|
title: null, // 视频名称 |
|
|
title: null, // 视频名称 |
|
|
coverUrl: null, //封面图 |
|
|
coverUrl: null, //封面图 |
|
|
height: null |
|
|
height: null |
|
@@ -56,7 +60,10 @@ export default { |
|
|
characters: state => state.publicObj.characters |
|
|
characters: state => state.publicObj.characters |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
created() {}, |
|
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
this.id = this.$route.query.id; |
|
|
|
|
|
this.baseUrl = process.env.VUE_APP_API_ROOT; |
|
|
|
|
|
}, |
|
|
async mounted() { |
|
|
async mounted() { |
|
|
this.inPage = true; |
|
|
this.inPage = true; |
|
|
scrollToID('top'); |
|
|
scrollToID('top'); |
|
@@ -74,13 +81,16 @@ export default { |
|
|
if (!deviceType) { |
|
|
if (!deviceType) { |
|
|
// 设备类型为pc |
|
|
// 设备类型为pc |
|
|
isAndroid = false; |
|
|
isAndroid = false; |
|
|
|
|
|
this.isAndroid = false; |
|
|
} else { |
|
|
} else { |
|
|
if (deviceType[0] == 'Android') { |
|
|
if (deviceType[0] == 'Android') { |
|
|
// 设备类型为安卓 |
|
|
// 设备类型为安卓 |
|
|
isAndroid = true; |
|
|
isAndroid = true; |
|
|
|
|
|
this.isAndroid = true; |
|
|
} else { |
|
|
} else { |
|
|
// 其他设备 |
|
|
// 其他设备 |
|
|
isAndroid = false; |
|
|
isAndroid = false; |
|
|
|
|
|
this.isAndroid = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@@ -135,12 +145,26 @@ export default { |
|
|
} |
|
|
} |
|
|
if (!isAndroid) { |
|
|
if (!isAndroid) { |
|
|
console.log('ios'); |
|
|
console.log('ios'); |
|
|
// await this.downloadFun( |
|
|
|
|
|
// this.videoSrc + '?response-content-type=application/octet-stream', |
|
|
|
|
|
// this.title + '.mp4' |
|
|
|
|
|
// ) |
|
|
|
|
|
// await this.downloadFile1(this.videoSrc) |
|
|
|
|
|
window.open(this.videoSrc, '_self'); |
|
|
|
|
|
|
|
|
// let videoData = await exportVideoApi(this.id); |
|
|
|
|
|
const AccessToken = localStorage.getItem('AccessToken'); |
|
|
|
|
|
that |
|
|
|
|
|
.$axios({ |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
url: process.env.VUE_APP_API_ROOT + `/api/userVideo/exportVideo?id=${that.id}`, |
|
|
|
|
|
headers: { |
|
|
|
|
|
'content-type': 'application/octet-stream;charset=UTF-8', |
|
|
|
|
|
token: AccessToken, |
|
|
|
|
|
'Access-Control-Allow-Origin': '*', |
|
|
|
|
|
'Access-Control-Allow-Credentials': 'true' |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.then(async res => { |
|
|
|
|
|
console.log(res, 'AccessTokenAccessToken'); |
|
|
|
|
|
}); |
|
|
|
|
|
// console.log(videoData); |
|
|
|
|
|
|
|
|
|
|
|
// await this.downloadFun(this.id); |
|
|
|
|
|
// await this.downloadFile1(this.id); |
|
|
} else { |
|
|
} else { |
|
|
// 下载视频 |
|
|
// 下载视频 |
|
|
saveAs(videoUrl, this.title + '.mp4'); |
|
|
saveAs(videoUrl, this.title + '.mp4'); |
|
@@ -151,10 +175,10 @@ export default { |
|
|
return filename.replace(/[/\\:?*"<>|]/g, '').trim(); |
|
|
return filename.replace(/[/\\:?*"<>|]/g, '').trim(); |
|
|
}, |
|
|
}, |
|
|
// ios下载处理 |
|
|
// ios下载处理 |
|
|
downloadFile1(url) { |
|
|
|
|
|
|
|
|
downloadFile1(id) { |
|
|
return new Promise((resolve, reject) => { |
|
|
return new Promise((resolve, reject) => { |
|
|
const xhr = new XMLHttpRequest(); |
|
|
const xhr = new XMLHttpRequest(); |
|
|
xhr.open('GET', url, true); |
|
|
|
|
|
|
|
|
xhr.open('GET', process.env.VUE_APP_API_ROOT + `/api/userVideo/exportVideo?id=${id}`, true); |
|
|
xhr.responseType = 'arraybuffer'; |
|
|
xhr.responseType = 'arraybuffer'; |
|
|
xhr.onload = () => { |
|
|
xhr.onload = () => { |
|
|
if (xhr.status === 200) { |
|
|
if (xhr.status === 200) { |
|
@@ -224,6 +248,7 @@ export default { |
|
|
async getVideoInfo() { |
|
|
async getVideoInfo() { |
|
|
const { data: res } = await getModelDetailById(this.$route.query.id); |
|
|
const { data: res } = await getModelDetailById(this.$route.query.id); |
|
|
if (res.videoId) { |
|
|
if (res.videoId) { |
|
|
|
|
|
this.videoId = res.videoId; |
|
|
const { data: res2 } = await doGetVideoDetialById(res.videoId); |
|
|
const { data: res2 } = await doGetVideoDetialById(res.videoId); |
|
|
this.videoSrc = res2.videoUrl; |
|
|
this.videoSrc = res2.videoUrl; |
|
|
this.title = res2.title; |
|
|
this.title = res2.title; |
|
|