refactor: 视频播放器改为artplayer
This commit is contained in:
jmal
parent
aac4f73b9a
commit
07bfb1ffbb
@ -17,6 +17,7 @@
|
||||
"dependencies": {
|
||||
"@moefe/vue-aplayer": "^2.0.0-beta.5",
|
||||
"ant-design-vue": "^1.6.5",
|
||||
"artplayer": "^4.5.4",
|
||||
"clipboard": "^2.0.6",
|
||||
"cropperjs": "^1.5.6",
|
||||
"e-vue-contextmenu": "^0.1.3",
|
||||
@ -52,7 +53,6 @@
|
||||
"vue-aplayer": "^1.6.1",
|
||||
"vue-runtime-helpers": "^1.1.2",
|
||||
"vue-simple-uploader": "^0.7.4",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuex": "^3.1.0",
|
||||
"websocket": "^1.0.34"
|
||||
|
||||
37
src/components/preview/Artplayer.vue
Normal file
37
src/components/preview/Artplayer.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div ref="artRef"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
export default {
|
||||
name: 'Artplayer',
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.instance = new Artplayer({
|
||||
...this.option,
|
||||
container: this.$refs.artRef,
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('get-instance', this.instance);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.instance && this.instance.destroy) {
|
||||
this.instance.destroy(false);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -2,25 +2,11 @@
|
||||
<div class="preview" v-if="show">
|
||||
<van-overlay :show="show">
|
||||
<div class="wrapper">
|
||||
<div class="block"
|
||||
@mousemove="onmousemove"
|
||||
@mouseout="onmouseout"
|
||||
@mouseenter="onmouseenter"
|
||||
@mouseleave="onmouseleave"
|
||||
@touchstart="onmouseenter"
|
||||
@touchend="onmousemove"
|
||||
>
|
||||
<div v-show="closeBarShow" class="close-bar" @click="close">
|
||||
<div class="block">
|
||||
<div class="close-bar" @click="close">
|
||||
<svg-icon class="audio-player-close" icon-class="close"/>
|
||||
</div>
|
||||
<video-player class="video-player vjs-custom-skin"
|
||||
ref="videoPlayer"
|
||||
:playsinline="true"
|
||||
:options="playerOptions"
|
||||
@playing="onPlayerPlaying"
|
||||
@ended="onPlayerEnded"
|
||||
@pause="onPlayerPause">
|
||||
</video-player>
|
||||
<Artplayer @get-instance="getInstance" :option="option" :style="style"/>
|
||||
</div>
|
||||
</div>
|
||||
</van-overlay>
|
||||
@ -28,15 +14,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'vue-video-player/src/custom-theme.css'
|
||||
import 'video.js/dist/video-js.css'
|
||||
import { videoPlayer } from 'vue-video-player'
|
||||
import fileConfig from '@/utils/file-config'
|
||||
import Artplayer from "@/components/preview/Artplayer.vue";
|
||||
|
||||
export default {
|
||||
name: 'VideoPreview',
|
||||
components: {
|
||||
videoPlayer
|
||||
Artplayer
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
@ -58,39 +42,25 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
closeBarShow: false,
|
||||
pc: this.$pc,
|
||||
playerOptions: {
|
||||
//播放速度
|
||||
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||||
//如果true,浏览器准备好时开始回放。
|
||||
autoplay: true,
|
||||
// 默认情况下将会消除任何音频。
|
||||
muted: false,
|
||||
// 导致视频一结束就重新开始。
|
||||
loop: false,
|
||||
// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||||
preload: 'auto',
|
||||
language: 'zh-CN',
|
||||
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||||
aspectRatio: '16:9',
|
||||
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||||
fluid: true,
|
||||
sources: [],
|
||||
//你的封面地址
|
||||
poster: '',
|
||||
//允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||||
notSupportedMessage: '此视频暂无法播放，请稍后再试',
|
||||
controlBar: {
|
||||
timeDivider: true,
|
||||
durationDisplay: true,
|
||||
remainingTimeDisplay: true,
|
||||
//全屏按钮
|
||||
fullscreenToggle: true
|
||||
}
|
||||
},
|
||||
option: {
|
||||
url: '',
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
//pip: true, // 是否在底部控制栏里显示 画中画 的开关按钮
|
||||
flip: true, // 是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
|
||||
playbackRate: true, // 是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
|
||||
aspectRatio: true, // 是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
|
||||
screenshot: true, // 是否在底部控制栏里显示 视频截图 功能
|
||||
setting: true, // 是否在底部控制栏里显示 设置面板 的开关按钮
|
||||
},
|
||||
style: {
|
||||
width: '100vw',
|
||||
height: '60vh',
|
||||
maxWidth: '900px',
|
||||
maxHeight: '600px',
|
||||
},
|
||||
show: this.status,
|
||||
url: '',
|
||||
timeout: null,
|
||||
playing: false,
|
||||
}
|
||||
@ -98,16 +68,11 @@ export default {
|
||||
watch: {
|
||||
status: function(visible){
|
||||
if(visible){
|
||||
let url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
|
||||
this.option.url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
|
||||
if(this.shareId){
|
||||
url = fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken);
|
||||
this.option.url = fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken)
|
||||
}
|
||||
this.playerOptions.sources = [{
|
||||
//类型
|
||||
type: this.file.contentType,
|
||||
//url地址
|
||||
src: url,
|
||||
}]
|
||||
this.option.id = this.file.id
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
@ -117,62 +82,8 @@ export default {
|
||||
this.show = false
|
||||
this.$emit('update:status', false)
|
||||
},
|
||||
onPlayerPlaying(){
|
||||
this.playing = true
|
||||
this.clearTimeout()
|
||||
this.timeout = setTimeout(this.timeoutFun, 2500)
|
||||
getInstance(art) {
|
||||
},
|
||||
onPlayerPause(){
|
||||
this.closeBarShow = true
|
||||
this.playing = false
|
||||
},
|
||||
onPlayerEnded(){
|
||||
this.closeBarShow = true
|
||||
this.playing = false
|
||||
},
|
||||
onmousemove() {
|
||||
if(!this.closeBarShow){
|
||||
this.closeBarShow = true
|
||||
}
|
||||
this.clearTimeout()
|
||||
this.timeout = setTimeout(this.timeoutFun, 2500)
|
||||
},
|
||||
onmouseout() {
|
||||
// console.log('onmouseout')
|
||||
// this.timeout = null
|
||||
},
|
||||
onmouseleave() {
|
||||
this.closeBarShow = false
|
||||
this.clearTimeout()
|
||||
},
|
||||
clearTimeout(){
|
||||
if(this.timeout != null){
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
}
|
||||
},
|
||||
timeoutFun(){
|
||||
if(this.playing){
|
||||
if(!this.$pc){
|
||||
const closeBar = document.querySelector('.block .close-bar')
|
||||
if(closeBar){
|
||||
closeBar.style.display = "none"
|
||||
}
|
||||
}
|
||||
this.closeBarShow = false
|
||||
}
|
||||
this.clearTimeout()
|
||||
},
|
||||
onmouseenter() {
|
||||
this.closeBarShow = true
|
||||
},
|
||||
ontouchstart() {
|
||||
this.closeBarShow = true
|
||||
},
|
||||
ontouchsend() {
|
||||
this.closeBarShow = false
|
||||
this.clearTimeout()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -198,9 +109,11 @@ export default {
|
||||
}
|
||||
|
||||
.block {
|
||||
|
||||
|
||||
.close-bar {
|
||||
z-index: 2006;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
right: -36px;
|
||||
float: right;
|
||||
@ -212,7 +125,7 @@ export default {
|
||||
border-color: transparent transparent transparent #d4d4d475;
|
||||
line-height: 36px;
|
||||
opacity: 1;
|
||||
transform: rotate(-45deg);
|
||||
transform: rotate(315deg);
|
||||
}
|
||||
|
||||
.close-bar:hover {
|
||||
@ -221,13 +134,14 @@ export default {
|
||||
}
|
||||
|
||||
.audio-player-close {
|
||||
transform: rotate(-45deg);
|
||||
transform: rotate(315deg);
|
||||
z-index: 2009;
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
top: -8px;
|
||||
right: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@ -237,7 +151,4 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.block {
|
||||
width: 900px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user