mirror of https://github.com/halo-dev/halo
增加附加视频预览功能，并对不支持预览的缩略图做不支持处理
guqing
parent
7b8a468ccf
commit
17ffe87f81
|
|
@ -21,12 +21,13 @@
|
|||
"vue": "^2.6.10",
|
||||
"vue-clipboard2": "^0.3.0",
|
||||
"vue-codemirror-lite": "^1.0.4",
|
||||
"vue-count-to": "^1.0.13",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-ls": "^3.2.1",
|
||||
"vue-router": "^3.0.6",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vuejs-logger": "^1.5.3",
|
||||
"vuex": "^3.1.1",
|
||||
"vue-count-to": "^1.0.13"
|
||||
"vuex": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/polyfill": "^7.4.4",
|
||||
|
|
|
|||
|
|
@ -99,7 +99,8 @@
|
|||
@click="handleShowDetailDrawer(item)"
|
||||
>
|
||||
<div class="attach-thumb">
|
||||
<img :src="item.thumbPath">
|
||||
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
|
||||
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)">
|
||||
</div>
|
||||
<a-card-meta>
|
||||
<ellipsis
|
||||
|
|
@ -242,6 +243,23 @@ export default {
|
|||
onUploadClose() {
|
||||
this.loadAttachments()
|
||||
this.loadMediaTypes()
|
||||
},
|
||||
handleJudgeMediaType(attachment) {
|
||||
var mediaType = attachment.mediaType
|
||||
// 判断文件类型
|
||||
if(mediaType) {
|
||||
var prefix = mediaType.split('/')[0]
|
||||
|
||||
if(prefix === 'image') {
|
||||
// 是图片
|
||||
return true
|
||||
} else {
|
||||
// 非图片
|
||||
return false
|
||||
}
|
||||
}
|
||||
//没有获取到文件返回false
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -262,13 +280,20 @@ export default {
|
|||
position: relative;
|
||||
padding-bottom: 56%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
img, span{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
span {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9b9ea0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-meta {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,12 @@
|
|||
>
|
||||
<div class="attach-detail-img">
|
||||
<div v-show="nonsupportPreviewVisible">此文件不支持预览</div>
|
||||
<img :src="attachment.path" v-if="photoPreviewVisible">
|
||||
<img :src="attachment.path" v-show="photoPreviewVisible">
|
||||
<video-player class="video-player-box" v-show="videoPreviewVisible"
|
||||
ref="videoPlayer"
|
||||
:options="playerOptions"
|
||||
:playsinline="true">
|
||||
</video-player>
|
||||
</div>
|
||||
</a-skeleton>
|
||||
</a-col>
|
||||
|
|
@ -149,18 +154,41 @@
|
|||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import attachmentApi from '@/api/attachment'
|
||||
import photoApi from '@/api/photo'
|
||||
import 'video.js/dist/video-js.css'
|
||||
import { videoPlayer } from 'vue-video-player'
|
||||
|
||||
export default {
|
||||
name: 'AttachmentDetailDrawer',
|
||||
mixins: [mixin, mixinDevice],
|
||||
components: {
|
||||
videoPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detailLoading: true,
|
||||
editable: false,
|
||||
photo: {},
|
||||
photoPreviewVisible: false,
|
||||
vedioPreviewVisible: false,
|
||||
nonsupportPreviewVisible: false
|
||||
videoPreviewVisible: false,
|
||||
nonsupportPreviewVisible: false,
|
||||
playerOptions: {
|
||||
// videojs options
|
||||
muted: true,
|
||||
language: 'zh-CN',
|
||||
aspectRatio: '16:9',
|
||||
fluid: true,
|
||||
controls: true,
|
||||
loop: false,
|
||||
muted: false,
|
||||
playbackRates: [0.7, 1.0, 1.5, 2.0],
|
||||
sources: [{
|
||||
type: "video/mp4",
|
||||
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
|
||||
}],
|
||||
poster: "/static/images/author.jpg",
|
||||
width: document.documentElement.clientWidth,
|
||||
notSupportedMessage: '此视频暂无法播放，请稍后再试'
|
||||
}
|
||||
}
|
||||
},
|
||||
model: {
|
||||
|
|
@ -186,6 +214,11 @@ export default {
|
|||
created() {
|
||||
this.loadSkeleton()
|
||||
},
|
||||
computed: {
|
||||
player() {
|
||||
return this.$refs.videoPlayer.player
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visiable: function(newValue, oldValue) {
|
||||
this.$log.debug('old value', oldValue)
|
||||
|
|
@ -197,8 +230,7 @@ export default {
|
|||
attachment: function(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
var attachment = newValue
|
||||
var mediaType = attachment.mediaType
|
||||
this.handleJudgeMediaType(mediaType)
|
||||
this.handleJudgeMediaType(attachment)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -262,20 +294,29 @@ export default {
|
|||
onClose() {
|
||||
this.$emit('close', false)
|
||||
},
|
||||
handleJudgeMediaType(mediaType) {
|
||||
handleJudgeMediaType(attachment) {
|
||||
var mediaType = attachment.mediaType
|
||||
// 判断文件类型
|
||||
if(mediaType) {
|
||||
var prefix = mediaType.split('/')[0]
|
||||
|
||||
if(prefix === 'video' || prefix==='flv') {
|
||||
this.vedioPreviewVisible = true
|
||||
this.videoPreviewVisible = true
|
||||
this.photoPreviewVisible = false
|
||||
this.nonsupportPreviewVisible = false
|
||||
// 设置视频地址
|
||||
this.$set(this.playerOptions.sources, 0, {
|
||||
type: mediaType,
|
||||
src: attachment.path
|
||||
})
|
||||
console.log(this.playerOptions.sources)
|
||||
} else if(prefix === 'image') {
|
||||
this.photoPreviewVisible = true
|
||||
this.videoPreviewVisible = false
|
||||
this.nonsupportPreviewVisible = false
|
||||
} else {
|
||||
this.nonsupportPreviewVisible = true
|
||||
this.vedioPreviewVisible = false
|
||||
this.videoPreviewVisible = false
|
||||
this.photoPreviewVisible = false
|
||||
}
|
||||
}
|
||||
|
|
@ -288,4 +329,7 @@ export default {
|
|||
.attach-detail-img img {
|
||||
width: 100%;
|
||||
}
|
||||
.video-player-box {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue