148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
<template>
|
|
<video id="player" :class="clazz" :src="src" :autoplay="autoplay" :initial-time="initialTime" :enable-play-gesture="false" :title="title"
|
|
:enable-progress-gesture="false" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-progress="true" @play="status=1"
|
|
@pause="status=0" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange" :poster="pauseImg"
|
|
@ended="$emit('ended')" @error="errorFun" width="100%" height="100%" style="width: 100%;height: 100%;">
|
|
<cover-image src="../../static/loading_1920.gif" class="loading_box" v-if="isSHowLoading"
|
|
:play-strategy="2"></cover-image>
|
|
</video>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
inject: ['pageId', 'pageState'],
|
|
watch: {
|
|
|
|
},
|
|
props: {
|
|
clazz: {
|
|
type: String
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
src: {
|
|
type: String
|
|
},
|
|
autoplay: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showProgress: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isSHowLoading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
pauseImg: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
failStatus: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
initialTime: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
status: 0,
|
|
currentTime: 0,
|
|
fullScreen: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.viderContext = uni.createVideoContext("player", this);
|
|
},
|
|
onLoad() {
|
|
uni.$on('keyDown', this.keyDownFun);
|
|
},
|
|
onUnload() {
|
|
uni.$off('keyDown', this.keyDownFun);
|
|
},
|
|
methods: {
|
|
keyDownFun(data) {
|
|
console.log("keyDownFun")
|
|
this.keyDown(data);
|
|
},
|
|
keyDown(Arrow) {
|
|
console.log("监测到按键：" + Arrow)
|
|
switch (Arrow) {
|
|
case 'KeyLeft': {
|
|
var time = parseInt(this.currentTime - 15, 10);
|
|
this.viderContext.seek(time < 0 ? 0 : time)
|
|
}
|
|
break;
|
|
case 'KeyRight': {
|
|
var time = parseInt(this.currentTime + 15, 10);
|
|
this.viderContext.seek(time);
|
|
}
|
|
break;
|
|
case 'KeyEnter': {
|
|
this.clickVideo();
|
|
}
|
|
break;
|
|
};
|
|
},
|
|
clickVideo() {
|
|
if (this.status) {
|
|
this.viderContext.pause();
|
|
this.viderContext.showStatusBar();
|
|
} else {
|
|
this.viderContext.play();
|
|
this.viderContext.hideStatusBar();
|
|
}
|
|
},
|
|
timeupdate: function(e) {
|
|
this.currentTime = e.detail.currentTime;
|
|
this.$emit("timeupdate", e.detail.currentTime)
|
|
},
|
|
fullscreenchange: function(e) {
|
|
this.fullScreen = e.detail.fullScreen;
|
|
this.pageState.handleEvent = e.detail.fullScreen;
|
|
uni.$off('keyDown', this.keyDownFun);
|
|
if (this.fullScreen) {
|
|
this.viderContext.play();
|
|
uni.$on('keyDown', this.keyDownFun);
|
|
}
|
|
this.$emit("fullscreenchange", e.detail.fullScreen)
|
|
},
|
|
errorFun() {
|
|
this.$emit("errorFun")
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.controls-play.img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 50%;
|
|
left: 0%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.loading_box {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
left: 0px;
|
|
top: 0px;
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
.fail_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|