Pārlūkot izejas kodu

添加视频按钮悬浮位置

master
congzc pirms 1 gada
vecāks
revīzija
5e41ca1da1
4 mainītis faili ar 57 papildinājumiem un 7 dzēšanām
  1. Binārs
      dist.zip
  2. +1
    -0
      src/main.js
  3. +1
    -1
      src/views/myPage/myPage.vue
  4. +55
    -6
      src/views/videoDownload/videoDownload.vue

Binārs
dist.zip Parādīt failu


+ 1
- 0
src/main.js Parādīt failu

@@ -14,6 +14,7 @@ import "@/styles/reset.scss"; // 引入清除默认样式
import "@/styles/index.scss"; // 引入全局样式



import waterfall from 'vue-waterfall2'

Vue.use(waterfall)// 瀑布流插件


+ 1
- 1
src/views/myPage/myPage.vue Parādīt failu

@@ -680,7 +680,7 @@ export default {
}
.goNewAdd {
position: sticky;
left: 300px;
left: 80%;
bottom: 25px;
width: 60px;
height: 60px;


+ 55
- 6
src/views/videoDownload/videoDownload.vue Parādīt failu

@@ -21,7 +21,7 @@

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { Toast, Dialog } from 'vant'
import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
// 工具
@@ -32,6 +32,7 @@ import { saveAs } from 'file-saver'
import { getModelDetailById } from '../../api/getPaper'
import { doGetVideoDetialById } from '../../api/downloadVideo'
Vue.use(Toast)

export default {
components: {
HeadTop
@@ -87,12 +88,13 @@ export default {
// 安卓设备尺寸比其他设备小一半,需适配
// width: isAndroid ? '260px' : '480px',
// height: isAndroid ? '427px' : '854px',
width: isAndroid ? '50%' : '100%',
height: isAndroid ? '50%' : '100%',
width: '100%',
height: '100%',
// 以下可选设置
playsinline: true, // 禁止内置播放
isLive: false, // 直播
rePlay: false, // 循环播放
useH5Prism: true, // 开启H5播放器
preload: true, //播放器自动加载
autoplay: false, // 自动播放
diagnosisButtonVisible: false, //是否显示检测按钮
@@ -106,11 +108,57 @@ export default {
)
},
// 下载视频
downloadVideo() {
async downloadVideo() {
// 视频地址
let that = this
const videoUrl = this.videoSrc
// 下载视频
saveAs(videoUrl, this.title + '.mp4')
const title = this.sanitizeFilename(this.title)
// ios
const deviceType = getDeviceType()
let isAndroid = false
if (!deviceType) {
// 设备类型为pc
isAndroid = false
} else {
if (deviceType[0] == 'Android') {
// 设备类型为安卓
isAndroid = true
} else {
// 其他设备
isAndroid = false
}
}
if (!isAndroid) {
console.log('ios')
await this.downloadFun(
this.videoSrc + '?response-content-type=application/octet-stream',
this.title + '.mp4'
)
} else {
// 下载视频
saveAs(videoUrl, this.title + '.mp4')
}
},
// 视频名转化
sanitizeFilename(filename) {
return filename.replace(/[/\\:?*"<>|]/g, '').trim()
},
// ios下载处理
async downloadFun(blobFile, fileName) {
let blob = new Blob([blobFile], {
type: 'application/pdf;charset=UTF-8'
})
console.log(blob)
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
let link = document.createElement('a')
// link.href = blobFile
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
window.URL.revokeObjectURL(link.href) //释放内存
}
},
// 获取视频信息
async getVideoInfo() {
@@ -148,6 +196,7 @@ export default {
height: calc(100vh - 40px);
overflow: hidden;
}

.page {
// width: 375px;
// height: 100vh;


Notiek ielāde…
Atcelt
Saglabāt